Mermaid で描ける図の種類と、書き方の例をメモしました。普段の文書なら、フローチャート、シーケンス図、状態遷移図、ER 図の4つでたいていの図が描けます。

環境

• Mermaid 11.12.2(このブログで使っているバージョン)
• Mermaid 11.17.2(VS Code 1.144.0 に入っているバージョン)

一覧

図の書き出しの言葉(1行目)で、図の種類が決まります。

書き方の例

迷いやすいのは次の4組です。

フローチャートとシーケンス図

1つの処理の分岐を見せるならフローチャート、複数の登場人物の間のやり取りを見せるならシーケンス図です。

同じ「記事を表示する」という話でも、ログインの有無で分かれる話はフローチャートが向いています。

mermaidCopy codeflowchart TD
    A[開始] --> B{ログイン済み?}
    B -->|はい| C[記事を表示]
    B -->|いいえ| D[ログイン画面]

ブラウザー、API、データベースの間で何がどの順番に流れるかを見せるなら、シーケンス図です。

mermaidCopy codesequenceDiagram
    participant B as ブラウザー
    participant A as API
    participant D as データベース
    B->>A: 記事を取得
    A->>D: 検索
    D-->>A: 結果
    A-->>B: JSON

タイムラインとガントチャート

期間や依存関係が要らなければ、タイムラインで足ります。

mermaidCopy codetimeline
    title サイトの移行
    2026年1月 : 調査
    2026年2月 : 新環境の構築
    2026年3月 : 本番の切り替え

「調査が終わってから構築を始める」という依存関係や日数を表すなら、ガントチャートです。

mermaidCopy codegantt
    dateFormat YYYY-MM-DD
    title 移行の予定
    section 準備
    調査 :a1, 2026-01-05, 10d
    構築 :after a1, 14d

フローチャートと状態遷移図

処理の手順ならフローチャート、「下書き」「公開」のように状態が移り変わる話なら状態遷移図です。

mermaidCopy codestateDiagram-v2
    [*] --> 下書き
    下書き --> 公開: 公開する
    公開 --> [*]

ER 図とクラス図

データベースのテーブルの関係なら ER 図、プログラムのクラスの継承や関連ならクラス図です。

mermaidCopy codeerDiagram
    ユーザー ||--o{ 記事 : 書く

ER 図にはテーブルの列も書けます。列の説明は " で囲むと日本語にできます。

mermaidCopy codeerDiagram
    USER ||--o{ POST : writes
    USER {
        int id
        string name "名前"
    }
    POST {
        int id
        string title "タイトル"
    }

mermaidCopy codeclassDiagram
    class 利用者 {
        +名前
        +ログインする()
    }
    利用者 <|-- 管理者

Git グラフ

ブランチの流れを表します。

mermaidCopy codegitGraph
    commit id: "初回"
    branch develop
    checkout develop
    commit id: "機能の追加"
    checkout main
    merge develop

マインドマップ

考えの整理に使います。

mermaidCopy codemindmap
  root((記事))
    調査
      検索語
      公式の案内
    手順
      動かす
      結果
    公開

アーキテクチャ図

アイコン付きの構成図です。このブログの 11.12.2 では、英語のラベルだけが通ります。

mermaidCopy codearchitecture-beta
    group vpc(cloud)[VPC]
    service web(server)[Web] in vpc
    service db(database)[DB] in vpc
    web:R --> L:db

ユーザージャーニー

作業ごとの満足度を表します。

mermaidCopy codejourney
    title 記事を書く流れ
    section 準備
      調べる: 5: 筆者
      試す: 3: 筆者
    section 公開
      書く: 4: 筆者

カンバン

作業の状況を列で表します。

mermaidCopy codekanban
  未着手
    t1[記事を書く]
  作業中
    t2[動かす]
  完了
    t3[公開する]

パケット図

通信の説明に使います。

mermaidCopy codepacket-beta
0-15: "送信元ポート"
16-31: "宛先ポート"
32-63: "シーケンス番号"

円グラフ

割合を見せます。

mermaidCopy codepie title 流入の内訳
    "検索" : 60
    "直接" : 40

ブロック図

配置を自分で決めたいときに使います。

mermaidCopy codeblock-beta
    columns 3
    a["ブラウザー"] b["API"] c["データベース"]
    a --> b
    b --> c

レーダーチャート

複数の軸で比べます。

mermaidCopy coderadar-beta
    title 比較
    axis a["速度"], b["安定"], c["価格"]
    curve x["案1"]{4,3,2}
    curve y["案2"]{2,4,3}

ツリーマップ

全体に対する内訳を面積で表します。

mermaidCopy codetreemap-beta
"全体"
    "検索": 60
    "直接": 30
    "その他": 10

XY チャート

棒グラフと折れ線グラフを描けます。横軸の日本語は " で囲みます。

mermaidCopy codexychart-beta
    title "月別の件数"
    x-axis ["1月", "2月", "3月"]
    y-axis "件数" 0 --> 100
    bar [30, 50, 80]
    line [30, 50, 80]

四象限チャート

2つの軸で分類します。

mermaidCopy codequadrantChart
    title 優先度
    x-axis "効果 小" --> "効果 大"
    y-axis "手間 小" --> "手間 大"
    A: [0.8, 0.2]
    B: [0.3, 0.7]

要件図

要件とその関係を表します。

mermaidCopy coderequirementDiagram
    requirement r1 {
        id: 1
        text: "ログインできること"
        risk: high
        verifymethod: test
    }

C4 図

システムの全体像を表します。

mermaidCopy codeC4Context
    title 構成
    Person(u, "利用者")
    System(s, "ブログ")
    Rel(u, s, "読む")

サンキー図

流れの量を表します。項目は英語で書きます。

mermaidCopy codesankey-beta

search,article,60
direct,article,40

ネットワーク構成図

専用の図はないので、flowchart か architecture-beta を使います。書き方は Mermaid でネットワーク構成図を書く手順 にあります。

注意点

日本語のラベルでエラーになる図

日本語のラベルは、ほとんどの図で使えますが、図によってはそのまま書くとエラーになります。

" で囲むと、次のように書けます。

textCopy codegitGraph
    commit id: "初回"
    branch "開発"
    checkout "開発"
    commit

textCopy codexychart-beta
    x-axis ["1月", "2月"]
    y-axis "件数" 0 --> 100
    bar [10, 50]

architecture-beta は、" で囲んでも 11.12.2 ではエラーになります。sankey-beta は英語の項目を使います。

手元では描けたのに、公開先で描けないとき

手元で描けた図が公開先で描けないときは、表示する環境の Mermaid のバージョンが違います。VS Code 1.144.0 に入っている 11.17.2 で通る図が、11.12.2 ではエラーになることがあります。新しい図を使うときは、公開先で一度表示します。

参考文献

• Mermaid 公式ドキュメント
• Mermaid でネットワーク構成図を書く手順
• VS Code で Mermaid の図をプレビューする手順