Mermaid記法の書き方（Markdownテキストでチャート・グラフが描ける）
NotePM 公式ヘルプによる Mermaid 記法の解説記事。テキストだけでフローチャート・シーケンス図・ガントチャート・クラス図・Gitグラフ・ER図・ユーザージャーニー図・ステータス図・円グラフ・要件図の10種類を描く構文を網羅。
概要
Mermaid はテキストでグラフやチャートを描ける記法。テキストベースのため検索が容易で修正も手軽。NotePM のコードブロックで mermaid を指定して使う。
対応ダイアグラム一覧（本記事収録分）
フローチャート（graph TD）
graph TD;
A-->B;
A-->C;
B-->D;
C-->D;
--> で要素同士を結ぶ。TD（Top-Down）方向。
シーケンス図（sequenceDiagram）
sequenceDiagram
participant 太郎
participant 花子
太郎->>花子: こんにちは
loop Healthcheck
花子->>花子: Fight against hypochondria
end
花子-->>太郎: 良いですよ！
->>: 実線矢印-->>: 破線矢印loop ... end: ループブロックNote right of X:: 注釈
ガントチャート（gantt）
gantt
dateFormat YYYY-MM-DD
title ガントチャートのサンプル
section A section
完了したタスク :done, des1, 2022-07-06,2022-07-08
アクティブなタスク :active, des2, 2022-07-09, 3d
未来のタスク : des3, after des2, 5d
タスクに done / active のステータスを付与できる。after des2 で依存関係を表現。
クラス図（classDiagram）
PlantUML でも使われる図。関係性を示す矢印記号が多数ある（<|--・*--・o--・-->・--|> 等）。
Gitグラフ（gitGraph）
gitGraph
commit
commit
branch develop
commit
checkout main
commit
GitHub などで見られる Git ツリーを表現。commit・branch・checkout の3コマンドで構成。
ER図（erDiagram）
erDiagram
CUSTOMER ||--o{ ORDER : places
ORDER ||--|{ LINE-ITEM : contains
データベースのスキーマ表現。||--o{（1対多）など関係性記号でエンティティ間の多重度を表現。
ユーザージャーニー図（journey）
journey
title My working day
section Go to work
Make tea: 5: Me
Go upstairs: 3: Me
カスタマージャーニーのユーザー活動を可視化。スコア（1〜5）とアクター名を付与できる。
ステータス図（stateDiagram-v2）
stateDiagram-v2
state if_state <<choice>>
[*] --> IsPositive
IsPositive --> if_state
if_state --> False: if n < 0
if_state --> True : if n >= 0
フローチャートよりシステム的な状態遷移の表現。<<choice>> で分岐ノードを定義。
円グラフ（pie）
pie showData
title Key elements in Product X
"Calcium" : 42.96
"Potassium" : 50.05
showData オプションで実数値をラベルに表示できる。
要件図（requirementDiagram）
SysML で使用される図。要件同士・モデル要素との関係を表現。satisfies 等の関係タイプを使う。