Mermaid構文チートシート

最短で動くフローチャート

フローチャートには宣言行1つと矢印1つがあれば十分です。TDは上から下(top-down)を意味し、横に広いプロセスにはLR(左から右)が向いています。

flowchart TD
  A[Start] --> B{Ready?}
  B -->|Yes| C[Ship it]
  B -->|No| A

A、B、Cはノードid ― 内部的な名前であり、画面には描かれません。角括弧内のテキストがラベルで、角括弧の種類が形状を決めます。

ノードの形状

形状は、ラベルを囲む区切り記号のペアによって決まります。覚えておく価値があるのは次のものです。

💡ラベルに角括弧、コロン、引用符が含まれる場合は引用符で囲みます: A["Load (raw) data"]。引用符がないと、パーサーは記号を構文として解釈してしまいます。

矢印

矢印の長さにも意味があります。-->は1ランク分、--->は対象をもう1ランク下に押し下げます。mermaidが提供する、最もシンプルなレイアウト制御です。

サブグラフによるグループ化

subgraphはノードの周りにラベル付きの枠を描きます。サブグラフは入れ子にでき、矢印は境界を自由に越えられます。

flowchart LR
  subgraph api["API"]
    H[Handler] --> S[(Postgres)]
  end
  subgraph worker["Worker"]
    Q[Queue] --> W[Job]
  end
  H --> Q

色とスタイル

styleは1つのノードを彩色します。classDefとclassを組み合わせると複数のノードをまとめて彩色でき、ノードが3〜4個を超えたら使いたくなります。

flowchart TD
  A[OK] --> B[Failed]
  style A fill:#16a34a,stroke:#333,color:#fff
  classDef bad fill:#dc2626,stroke:#333,color:#fff
  class B bad

色は図のソースの一部なので、書き出し後も保持され、ファイルと一緒に移動します。これはレンダリングするツールのテーマ設定には一切依存しません。

図の種類ごとの実例

シーケンス図

sequenceDiagram
  participant User
  participant API
  participant DB
  User->>API: request
  API->>DB: query
  DB-->>API: rows
  API-->>User: response

クラス図

classDiagram
  class Animal {
    +String name
    +move()
  }
  class Dog {
    +bark()
  }
  Animal <|-- Dog

状態遷移図

stateDiagram-v2
  [*] --> Idle
  Idle --> Running: start
  Running --> Idle: stop
  Running --> [*]: finish

ER図(実体関連図)

erDiagram
  CUSTOMER ||--o{ ORDER : places
  ORDER ||--|{ LINE_ITEM : contains
  CUSTOMER {
    string name
    string email
  }

ガントチャート

gantt
  title Project
  dateFormat YYYY-MM-DD
  section Phase 1
  Task 1 :a1, 2026-01-01, 5d
  Task 2 :after a1, 5d

mermaidが単体でレンダリングされる場所

• GitHub ― フェンス付きの```mermaidブロックが、issue、プルリクエスト、コメント、READMEファイルの中でレンダリングされます。
• GitLab ― 同じフェンス付きブロックが、issue、マージリクエスト、Wikiの中でレンダリングされます。
• Notion ― 言語をMermaidに設定したコードブロックが、ソースの隣にレンダリングされます。
• Obsidian ― フェンス付きのmermaidブロックがプレビューモードでレンダリングされます。
• ドキュメントサイト ― Docusaurus、MkDocs Material、VitePressはいずれもmermaidブロックに対応しています。

これこそが、図を画像ではなくmermaidのまま残しておくべき本当の理由です。図は、それが説明する対象と同じテキストファイルの中に存在し、コードレビューで何が変わったかを確認できます。