チェンジビジョン藤元です。
前回の記事では、僕が作成したVSCodeとChrome拡張「Mermaid Graphical Editor」を紹介しましたが、今回は、この「Mermaid Graphical Editor」を使う3つのメリットと簡単なフローチャートの描き方をお伝えします。
(※ Mermaidの記法に関する記事ではありません)
「Mermaid Graphical Editor」を使う３つのメリット
メリット①「 Mermaid記法を覚えなくても描ける！」
基本的なフローチャートであれば、アイコンをクリックして繋げていくだけで、フローチャートを描画でき、且つMermaidコードが自動で作成されます！
メリット②「ラベルはエスケープする！」
ノードやリンクのラベルでは、特殊な文字をエスケープするようにしたので、改行や”(ダブルコーテーション)などを気にせず入力することができます！
メリット③「既存のMermaidコードも編集可能！」
Mermaid Graphical Editorは、編集された内容のみをコードに反映するようにしているため、既存のMermaidコードがあれば、そのまま「Mermaid Graphical Editor」で使用／編集することもできます。
（Chrome版の方では、エディタ上部のテキストボックスに既存のMermaidコードを張り付けることで追加編集できます）
「Mermaid Graphical Editor」でフローチャートを描く！サッと！！
手順０：フローチャート描き始める準備
まずはインストール。
（VSCode版の場合)
- Markdownファイル(.md)にMermaidコードブロックを作成します（①）
- 作成したコードブロック上部に「MermaidEditor」と表示されるので、これをクリックします（②）
- エディタビューより「フローチャート」をクリックします（③）
（Chrome版の場合 )
- 拡張機能を呼び出します（①）
- エディタビューより「フローチャート」をクリックします（②）
手順１：ノードを作成する
- メインメニューより「ノード」ボタンをクリックします（①）
- 作成したいノードの形を選択します（②）
※必要に応じてリンクの形も選択 - ノードを追加したい場所をクリックします（③）
作成後、続けてラベル編集モードになるので、入力後、Enterキーで決定します
※Shift＋Enterキーで改行します
手順２：リンクを追加する
- メインメニューより「リンク」ボタンをクリックします（①）
- 作成したいリンクの形を選択します（②）
- リンクの元（from）となるノードをクリックします（③）
- リンクの先（to）となるノードをクリックします（④）
手順３：ラベルを変更する
- メインメニューより「ラベル」ボタンをクリックします（①）
- ラベルを編集したいノード、およびリンクのエディットポイントをクリックします（②）
ラベル編集モードになるので、入力後、Enterキーで決定します
※Shift＋Enterキーで改行します
手順４：削除する
- メインメニューより「削除」ボタンをクリックします（①）
- 削除したいノード、およびリンクのエディットポイントをクリックします（②）
手順５：ノード、リンクの形を変更する
- メインメニューより「ノード」ボタン、または「リンク」ボタンをクリックします（①）
- 「置き換えモード」ボタンをクリックします（②）
- 形の変更を反映するノード、またはリンクのエディットポイントをクリックします（③）
手順６：編集を終了する
(VSCode版の場合)
- エディタビューを閉じます
（Chrome版の場合）
- 拡張機能を呼び出します（①）
- 作成したコードを利用する場合は、「コピー」ボタン（②）をクリックすることで作成されたMermaidコードがクリップボードにコピーされるので任意の場所にペーストして使用してください
- Mermaidコードをクリアする場合は、「CLEAR」ボタン（③）をクリックします
その他：ビューの縮小表示、イメージコピー
- 右下のスライドバーでエディタビューの縮尺を変更できます（①）
- 「図のコピー」ボタン（②）をクリックするとPNGイメージがクリップボードにコピーされるので、任意の場所にペーストして使用してください
※macの場合は動作しないので注意（Safariでの方法をよくわかっていない…）
フローチャートの”試行錯誤”をしたいなら [モデリングツール] が便利
描きたいフローチャートが決まっていて、手軽に”サッ”と書きたい場合はMermaidは非常に便利だと思うのですが、まだ試行段階の場合は”ノードの追加・削除”や”リンクの付け替え”が頻発するためモデリングツールを使用した方が楽しく作業できます。
弊社製品の astah* professional ではフローチャートを試行錯誤／整理整頓するための便利な機能が備わっていますので、ご活用いただければ幸いです。
astah in 5 min 