Mermaidでフローチャートを描くなら「Mermaid Graphical Editor」!

チェンジビジョン藤元です。
前回の記事では、僕が作成したVSCodeとChrome拡張「Mermaid Graphical Editor」を紹介しましたが、今回は、この「Mermaid Graphical Editor」を使う3つのメリットと簡単なフローチャートの描き方をお伝えします。
(※ Mermaidの記法に関する記事ではありません)

チェンジビジョン 藤元です。
ご存知の方も多いと思いますが、GithubではIssueも含むMarkdown上でMermaidによる図の表示が可能です。

「Mermaid Graphical Editor」を使う3つのメリット

メリット①「 Mermaid記法を覚えなくても描ける!

基本的なフローチャートであれば、アイコンをクリックして繋げていくだけで、フローチャートを描画でき、且つMermaidコードが自動で作成されます!

メリット②「ラベルはエスケープする!」

ノードやリンクのラベルでは、特殊な文字をエスケープするようにしたので、改行や”(ダブルコーテーション)などを気にせず入力することができます!

Mermaidでフローチャートを描く

メリット③「既存のMermaidコードも編集可能!」

Mermaid Graphical Editorは、編集された内容のみをコードに反映するようにしているため、既存のMermaidコードがあれば、そのまま「Mermaid Graphical Editor」で使用/編集することもできます。

(Chrome版の方では、エディタ上部のテキストボックスに既存のMermaidコードを張り付けることで追加編集できます)

チェンジビジョン 藤元です。
ご存知の方も多いと思いますが、GithubではIssueも含むMarkdown上でMermaidによる図の表示が可能です。

「Mermaid Graphical Editor」でフローチャートを描く!サッと!!

手順0:フローチャート描き始める準備

まずはインストール。

VSCode拡張

Mermaid Graphical Editor

Chrome拡張

Mermaid Graphical Editor

(VSCode版の場合)
  • Markdownファイル(.md)にMermaidコードブロックを作成します(①)
  • 作成したコードブロック上部に「MermaidEditor」と表示されるので、これをクリックします(②)
  • エディタビューより「フローチャート」をクリックします(③)
(Chrome版の場合 )
  • 拡張機能を呼び出します(①)
  • エディタビューより「フローチャート」をクリックします(②)

手順1:ノードを作成する

  • メインメニューより「ノード」ボタンをクリックします(①)
  • 作成したいノードの形を選択します(②)
    ※必要に応じてリンクの形も選択
  • ノードを追加したい場所をクリックします(③)
    作成後、続けてラベル編集モードになるので、入力後、Enterキーで決定します
    ※Shift+Enterキーで改行します

手順2:リンクを追加する

  • メインメニューより「リンク」ボタンをクリックします(①)
  • 作成したいリンクの形を選択します(②)
  • リンクの元(from)となるノードをクリックします(③)
  • リンクの先(to)となるノードをクリックします(④)

手順3:ラベルを変更する

  • メインメニューより「ラベル」ボタンをクリックします(①)
  • ラベルを編集したいノード、およびリンクのエディットポイントをクリックします(②)
    ラベル編集モードになるので、入力後、Enterキーで決定します
    ※Shift+Enterキーで改行します

手順4:削除する

  • メインメニューより「削除」ボタンをクリックします(①)
  • 削除したいノード、およびリンクのエディットポイントをクリックします(②)

手順5:ノード、リンクの形を変更する

  • メインメニューより「ノード」ボタン、または「リンク」ボタンをクリックします(①)
  • 「置き換えモード」ボタンをクリックします(②)
  • 形の変更を反映するノード、またはリンクのエディットポイントをクリックします(③)

手順6:編集を終了する

(VSCode版の場合)
  • エディタビューを閉じます
(Chrome版の場合)
  • 拡張機能を呼び出します(①)
  • 作成したコードを利用する場合は、「コピー」ボタン(②)をクリックすることで作成されたMermaidコードがクリップボードにコピーされるので任意の場所にペーストして使用してください
  • Mermaidコードをクリアする場合は、「CLEAR」ボタン(③)をクリックします

その他:ビューの縮小表示、イメージコピー

  • 右下のスライドバーでエディタビューの縮尺を変更できます(①)
  • 「図のコピー」ボタン(②)をクリックするとPNGイメージがクリップボードにコピーされるので、任意の場所にペーストして使用してください
    ※macの場合は動作しないので注意(Safariでの方法をよくわかっていない…)
チェンジビジョン 藤元です。
ご存知の方も多いと思いますが、GithubではIssueも含むMarkdown上でMermaidによる図の表示が可能です。

フローチャートの”試行錯誤”をしたいなら [モデリングツール] が便利

描きたいフローチャートが決まっていて、手軽に”サッ”と書きたい場合はMermaidは非常に便利だと思うのですが、まだ試行段階の場合は”ノードの追加・削除”や”リンクの付け替え”が頻発するためモデリングツールを使用した方が楽しく作業できます。

弊社製品の astah* professional ではフローチャートを試行錯誤/整理整頓するための便利な機能が備わっていますので、ご活用いただければ幸いです。

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト /  変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト /  変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト /  変更 )

%s と連携中