Mermaid記法で描くフローチャート入門

Markdownで文章を書いていると、処理の流れを図で説明したい場面が多々あります。
しかし、画像を作って貼り付けるのは手間がかかる上、専用ソフトや技能も必要です。
Mermaid記法を使用することで、テキストだけでフローチャートを描けるため、記事やドキュメントの中で図を直接管理できます。
さらに、GitHubやQiitaでもそのまま表示できるので、図をテキストで差分管理できるという大きなメリットもあります。
Mermaid記法ではER図やガントチャートなどの表現も可能ですが、本記事ではフローチャートに焦点を当てて紹介をします。

Mermaid記法とは

Mermaidとは、Markdownベースで図表を記述できるDSL(Domain Specific Language：特定分野専用の言語)です。
テキストのみで様々な図を表現できるため、GUIツールでの煩雑な図作成の手間を軽減することが可能になります。

Mermaidで表現可能な図種

図種	用途
フローチャート	処理や業務フローの可視化
シーケンス図	時系列のやり取りの可視化
ER図	データベース設計の可視化
ガントチャート	スケジュール管理の可視化
状態遷移図	ステートマシンの表現

このように、Mermaidは多様な図を扱えますが、本記事では最も基本的で汎用性の高い フローチャート に焦点を当てます。

サンプル

このセクションでは記法のサンプルとその図を紹介します。
使用する際には本記事でMarkdownのブロックにあるテキストを、mermaidのブロックで囲ってください。

簡単な上から下へのフローチャートの記法

Markdown

graph TD
  A[開始] --> B[処理]
  B --> C[終了]

フローチャート図

方向指定

graph 方向で図の方向を決定します。
本記事ではTD(Top→Down)のため、上から下への図となっています。

記法	意味	図の流れ
graph TD	Top → Down（上から下へ）	縦方向に展開
graph BT	Bottom → Top（下から上へ）	縦方向逆流
graph LR	Left → Right（左から右へ）	横方向に展開
graph RL	Right → Left（右から左へ）	横方向逆流

Markdown

graph BT
  A[開始] --> B[処理]
  B --> C[終了]

Markdown

graph LR
  A[開始] --> B[処理]
  B --> C[終了]

Markdown

graph RL
  A[開始] --> B[処理]
  B --> C[終了]

ノード

ID[表示ラベル]でノードを表現します。
IDは内部の識別子で、表示ラベルは図形の中に表示される文字列のことです。
[]が各括弧の図形を表しており、他にも下記のような図形が表現できます。

記法	図形の種類	用途例
A[テキスト]	長方形	一般的な処理やステップ
A(テキスト)	丸（円形）	開始・終了ノード
A((テキスト))	二重丸	特殊な開始・終了、強調
A{テキスト}	ひし形	条件分岐（Yes/No判定など）
A[[テキスト]]	角丸長方形	サブ処理や補助的な処理
A[/テキスト/]	平行四辺形	入力・出力
A[\テキスト\]	平行四辺形	入力・出力（逆方向）

Markdown

graph LR
  A[一般的な処理やステップ] --> B(開始・終了ノード)
  B --> C((特殊な開始・終了、強調))
  C --> D{条件分岐（Yes/No判定など）}
  D --> E[[サブ処理や補助的な処理]]
  E --> F[/入力/出力/]
  F --> G[\入力/出力（逆方向）\]

矢印

Mermaidではノード間を-->で繋ぐことで、矢印を表現します。

記法	意味	用途例
A --> B	通常の矢印（片方向）	処理の流れを表す
A --- B	線のみ（矢印なし）	関係性や関連を示す
A -- Yes --> B	ラベル付き矢印	条件分岐のYes/Noなどを表す
A -.-> B	点線矢印	補助的な関係や弱い関連を示す
A ==> B	太線矢印	強調した流れを示す

Markdown

graph TD
  start[開始] --> check{条件判定}
  check -- Yes --> process1[処理1]
  check -- No --> process2[処理2]
  process1 -.-> note[補助的な説明]
  process2 ==> finish[終了]

条件分岐の記法

矢印のセクションでも少し触れましたが、条件分岐のフローチャートについて紹介します。

Markdown

graph TD
  start[開始] --> checkCondition{条件判定}
  checkCondition -- Yes --> processValid[処理1]
  checkCondition -- No --> processInvalid[処理2]
  processValid --> endNode[終了]
  processInvalid --> endNode[終了]

条件分岐図

条件判定のノードは、一般的にひし形ノード{}を使用して表現します。
これにより「Yes/No」や「成功/失敗」といった分岐を直感的に示すことができます。

ラベル付き矢印

-- Yes -->のように、矢印の中にラベル(表示する文字列)を記述することで、上記の図のような表現が行えます。
ラベルには任意の文字列を挿入可能です。

ループ処理の記法

Markdown

graph TD
  start[開始] --> init[初期化]
  init --> process[処理]
  process --> check{条件判定}
  check -- 継続 --> process
  check -- 終了 --> finish[終了]

ループ処理の図

条件判定ノードから再び前の処理へ戻る矢印を描くことでループ処理を表すことが出来ます。

総括

• フローチャートは、Mermaidを使用することでテキストのみで図示することが出来る
• ノードの図形によって、様々な処理の種類を表すことが出来る
• 矢印にもノードと同様にラベルをつけることが出来る
• 再び前の処理へ戻る矢印を描くことでループ処理を表すことが出来る