Mermaid記法一覧｜全図種のコピペ用コードと描画結果まとめ

Mermaid（マーメイド）記法とは、テキストで書いたコードから、フローチャートやガントチャートなどの図を自動で描くための記法です。 Markdownのコードブロックに ```mermaid と書くだけで、GitHub・GitLab・Notionなどで図として表示されます。図をファイルで管理でき、差分もテキストで確認できるので、設計書やREADMEで広く使われています。

この記事では、2026年9月10日公開の最新版 Mermaid 12.0.0 に登録されている全図種について、書き出しのキーワード早見表と、そのまま貼って使えるコードをまとめました。すべてのコードを公式CLI（@mermaid-js/mermaid-cli 12.0.0）で実際にSVGへ描画し、成功したことをファイルサイズと要素数で確認しています。 日本語ラベルで実際に起きた構文エラーと直し方、フローチャートとガントチャートの記号一覧も表で載せています。

Mermaid記法の早見表（全図種の書き出しキーワード）

1行目のキーワードで図の種類が決まります。 「描画」はこの記事の検証環境（Mermaid 12.0.0）で描画できたことを示します。

• 1〜31は公式ドキュメントの「Diagram Syntax」に並ぶ図種です（2026年10月1日時点）。
• -beta がつく図種は仕様が変わる可能性があるものです。業務文書で使うときはバージョンを固定すると安心です。
• 鉄道図（railroad）は 12.0.0 のパッケージに登録されていますが、公式ドキュメントの一覧には載っていないため「参考」としています。

Mermaidの最新版は12.0.0（2026年10月時点）

npmの公開情報で確認した最新版は mermaid@12.0.0（2026-09-10公開）です。 直前の 11 系は 11.17.0（2026-08-19）でした。

npm view mermaid version
npm view @mermaid-js/mermaid-cli version

12.0.0
12.0.0

12.0.0 のリリースノートに書かれている主な変更は次のとおりです。既存の図の見た目が変わる変更があるので、11系から上げるときは確認しましょう。

図ごとに設定を変えるときは、コードの先頭にフロントマター（--- で囲んだ設定）を書きます。

---
config:
  theme: forest
  layout: dagre
---
flowchart LR
    A[注文] --> B[出荷]

GitHubやGitLabがどのバージョンを使っているかは、info とだけ書いたコードブロックで確認できます（GitHub公式ドキュメントに記載）。

info

全コードを実際に描画した結果

この記事のコードは、すべて公式CLIの mermaid-cli 12.0.0 でSVGに描画して確認しました。 記事に画像は載せられないため、成功の証拠として出力SVGのサイズ・要素数・図の大きさを表にしています。

検証環境と手順

# 1. インストール（Chromiumは既存のものを使うのでダウンロードを省略）
mkdir mm && cd mm && npm init -y
PUPPETEER_SKIP_DOWNLOAD=1 npm i @mermaid-js/mermaid-cli@12.0.0

# 2. 既存のChromiumを指定する設定ファイル
cat > pp.json <<'EOF'
{"executablePath":"/path/to/chrome","args":["--no-sandbox"]}
EOF

# 3. .mmd ファイルをまとめてSVGに変換
for f in d/*.mmd; do
  npx mmdc -p pp.json -i "$f" -o "out/$(basename "$f" .mmd).svg" -q
done

描画結果一覧

36ファイルすべてで変換が成功し、SVG内に「Syntax error」の表示がないことも確認しました（mmdc が正常終了してもエラー画像が出る図種があるため。後述）。

要素数はSVG内のタグの総数です。 フローチャートなど一部の図はスタイル定義をSVG内に持つため、サイズが大きめになります。

フローチャートの記号一覧（形状・矢印・subgraph・スタイル）

向きの指定

ノードの形状

かっこの組み合わせで形が決まります。 12.0.0 では @{ shape: ... } という新しい書き方も使えます。

flowchart LR
    a1[四角] --> a2(角丸) --> a3([スタジアム]) --> a4[[サブルーチン]]
    b1[(DB)] --> b2((円)) --> b3>旗] --> b4{ひし形}
    c1{{六角形}} --> c2[/平行四辺形/] --> c3[\逆平行四辺形\] --> c4[/台形\]
    d1[\逆台形/] --> d2(((二重円)))
    e1@{ shape: doc, label: "書類" } --> e2@{ shape: cyl, label: "円柱" }

矢印（リンク）の種類

flowchart LR
    A --> B
    A --- C
    A -.-> D
    A ==> E
    A --o F
    A --x G
    H <--> I
    J -- ラベル --> K
    L -->|ラベル| M
    N ---> O
    P ~~~ Q
    R --> S & T

subgraph・スタイル・クリック・コメント

flowchart TB
    subgraph front[フロント]
        direction LR
        UI[画面] --> API
    end
    subgraph back[バックエンド]
        API[API] --> DB[(DB)]
    end
    front --> back
    classDef warn fill:#fff3cd,stroke:#d39e00,stroke-width:2px
    class DB warn
    style UI fill:#e3f2fd,stroke:#1e88e5
    linkStyle 0 stroke:#e53935,stroke-width:2px
    click API "https://example.com" "APIの説明"
    %% これはコメント

ガントチャートの記号一覧（依存・除外日・マイルストーン）

タスクは タスク名 :状態, ID, 開始, 期間 の順に書きます。 状態とIDは省略できます。

---
title: 開発スケジュール
---
gantt
    dateFormat YYYY-MM-DD
    axisFormat %m/%d
    tickInterval 1week
    excludes weekends, 2026-11-03
    todayMarker off
    section 設計
        要件定義        :done, a1, 2026-10-01, 2026-10-07
        基本設計        :active, a2, after a1, 5d
    section 開発
        画面実装        :b1, after a2, 8d
        API実装         :crit, b2, after a2, 10d
        結合テスト      :b3, after b1 b2, 5d
    section リリース
        レビュー完了    :milestone, m1, after b3, 0d
        本番反映        :c1, after m1, until m2
        告知            :milestone, m2, 2026-11-20, 0d

excludes weekends を付けると、5d は「営業日で5日」として伸びます。 祝日は自動では入らないため、必要な日を excludes に並べます。

全図種のコピペ用コード

どれもそのまま貼って描画できることを確認したコードです。 クラス図・シーケンス図・ER図は書き方の詳細を別記事で扱っているため、ここでは最小の形だけ載せています。

1. フローチャート

flowchart TD
    A[注文を受け付け] --> B{在庫あり?}
    B -->|はい| C[出荷準備]
    B -->|いいえ| D[入荷待ちに登録]
    C --> E([完了])
    D --> E

2. スイムレーン図

トップレベルの subgraph がレーンになります。 キーワードの後ろに向き（LRなど）を書けます。

swimlane-beta LR
    subgraph user["会員"]
        A[注文する]
    end
    subgraph shop["ショップ"]
        B[在庫を確認] --> C[発送する]
    end
    A --> B

3. シーケンス図

sequenceDiagram
    participant U as 会員
    participant A as API
    U->>A: 注文を送信
    A-->>U: 注文番号を返す

4. クラス図

classDiagram
    class Order {
        +int id
        +total() int
    }
    class OrderItem
    Order "1" *-- "many" OrderItem

5. 状態遷移図

stateDiagram-v2
    [*] --> 未着手
    未着手 --> 作業中: 開始
    作業中 --> 完了: 終了
    完了 --> [*]

6. ER図

erDiagram
    MEMBER ||--o{ ORDERS : places
    ORDERS ||--|{ ORDER_ITEM : contains
    MEMBER {
        int id PK
        string name
    }

7. ユーザージャーニー

タスク: 満足度(1〜5): 登場人物 の形で書きます。

journey
    title 会員登録の体験
    section 登録
      フォーム入力: 3: 会員
      メール確認: 4: 会員
    section 初回利用
      商品を探す: 5: 会員

8. ガントチャート

記号をひととおり使った完成形は、上の「ガントチャートの記号一覧」のコードをそのまま使えます。

9. 円グラフ

pie title 問い合わせの内訳
    "配送" : 42
    "返品" : 25
    "会員情報" : 18
    "その他" : 15

10. 4象限チャート

座標は 0〜1 の範囲で指定します。

quadrantChart
    title 機能の優先度
    x-axis 工数が小さい --> 工数が大きい
    y-axis 効果が小さい --> 効果が大きい
    quadrant-1 計画して着手
    quadrant-2 すぐ着手
    quadrant-3 後回し
    quadrant-4 見直す
    検索改善: [0.3, 0.8]
    一括登録: [0.7, 0.7]

11. 要求図

text: に日本語を書くときはダブルクォートで囲みます（囲まないとエラーになることを確認しました。後述）。

requirementDiagram
    requirement login_req {
        id: 1
        text: "会員はログインできる"
        risk: medium
        verifymethod: test
    }
    element login_test {
        type: "テストケース"
    }
    login_test - verifies -> login_req

12. ユースケース図（12.0.0で追加）

usecase-beta
actor Member("会員")
actor Admin("管理者")
Order("注文する")
Manage("在庫を管理する")
Member --> Order
Admin --> Manage

13. Gitグラフ

gitGraph
    commit id: "init"
    branch feature
    checkout feature
    commit id: "add-form"
    checkout main
    merge feature
    commit id: "release" tag: "v1.0"

14. C4図

C4Context のほか、C4Container・C4Component・C4Dynamic・C4Deployment が使えます。

C4Context
    title 在庫管理システムのコンテキスト
    Person(staff, "スタッフ", "在庫を登録する")
    System(inv, "在庫管理システム", "在庫と入出庫を管理")
    System_Ext(mail, "メール配信", "通知を送る")
    Rel(staff, inv, "使う")
    Rel(inv, mail, "通知を依頼")

15. マインドマップ

インデント（字下げ）の深さで階層が決まります。

mindmap
  root((新機能))
    画面
      一覧
      詳細
    API
      検索
      登録
    テスト

16. タイムライン

timeline
    title サービスの歩み
    2024 : β版公開
    2025 : 正式リリース
         : スマホ対応
    2026 : 多言語対応

17. ZenUML

ZenUMLは別プラグイン（@mermaid-js/mermaid-zenuml）で描画されます。 mermaid-cli には同梱されているため描画できました。表示先がプラグインを読み込んでいるか確認してから使いましょう。

zenuml
    title 注文の流れ
    Member->OrderService.create() {
        Stock.reserve()
        return orderId
    }

18. サンキー図

CSV形式（流出元,流入先,量）で書きます。12.0.0 ではノード名に英数字を使います（日本語はエラーになりました。後述）。

sankey-beta

Search,ProductPage,500
Ads,ProductPage,300
ProductPage,Cart,350
ProductPage,Exit,450
Cart,Purchase,200
Cart,Exit,150

19. XYチャート

x軸のカテゴリに日本語を使うときは、1つずつダブルクォートで囲みます。

xychart-beta
    title "月別の注文数"
    x-axis ["4月", "5月", "6月", "7月", "8月", "9月"]
    y-axis "件数" 0 --> 500
    bar [120, 180, 240, 300, 380, 420]
    line [120, 180, 240, 300, 380, 420]

20. ブロック図

block-beta
  columns 3
  web["Web画面"] api["API"] db[("DB")]
  web --> api
  api --> db

21. パケット図

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

22. かんばん

kanban
  todo[未着手]
    t1[ログイン画面を作る]
  doing[作業中]
    t2[検索APIを作る]@{ priority: 'High' }
  done[完了]
    t3[DB設計]

23. アーキテクチャ図

web:R -- L:db は「webの右辺とdbの左辺をつなぐ」という意味です（T=上、B=下、L=左、R=右）。

architecture-beta
    group app(cloud)[アプリ基盤]
    service web(server)[Web] in app
    service db(database)[DB] in app
    service files(disk)[ファイル] in app
    web:R -- L:db
    web:B -- T:files

24. レーダーチャート

radar-beta
  axis a["設計"], b["実装"], c["テスト"], d["運用"], e["文書"]
  curve x["Aさん"]{4, 5, 3, 2, 4}
  curve y["Bさん"]{3, 3, 5, 4, 2}
  max 5
  min 0

25. イベントモデリング

tf 番号 種類 名前 の形で書きます。 種類は ui（画面）、cmd（コマンド）、evt（イベント）、rmo（読み取りモデル）です。

eventmodeling

tf 01 ui TaskBoard
tf 02 cmd AddTask
tf 03 evt TaskAdded
tf 04 rmo TaskList ->> 03

26. ツリーマップ

treemap-beta
"備品"
    "PC"
        "ノート": 40
        "デスクトップ": 15
    "周辺機器"
        "モニター": 30
        "キーボード": 25

27. ベン図

集合名は英数字のIDを付け、表示名を ["..."] で指定します。

venn-beta
    title 必要なスキル
    set design["設計"]
    set impl["実装"]
    union design,impl["両方できる"]

28. 特性要因図（石川ダイアグラム）

2行目が結果（魚の頭）、その下のインデントが要因です。

ishikawa-beta
    ページ表示が遅い
    サーバー
        CPU使用率が高い
    データベース
        インデックス不足
    フロント
        画像が大きい

29. ワードリーマップ

座標は [可視性, 成熟度] の順に 0〜1 で書きます。 12.0.0 では要素名に英数字を使います（日本語はエラー表示になりました。後述）。

wardley-beta
title Equipment Service
anchor Staff [0.95, 0.6]
component Request Form [0.8, 0.5]
component Database [0.4, 0.8]
Staff -> Request Form
Request Form -> Database

30. クネビン

cynefin-beta
  title 問い合わせ対応
  clear
    "手順書どおりに回答"
  complicated
    "担当者が調査"
  complex
    "小さく試して判断"
  chaotic
    "まず影響を抑える"
  confusion
    "状況を整理"

31. ツリービュー

フォルダ構成をインデントで書くだけで図になります。 末尾に / を付けた行がフォルダです。

treeView-beta
    my-app/
        src/
            index.ts
        package.json
        README.md

日本語で書くときの注意（検証で見つかったこと）

日本語ラベルは多くの図種でそのまま使えますが、一部の図種では囲み方や名前の付け方に決まりがあります。 今回の検証で実際にエラーになったものと、直し方をまとめます。

サンキー図は、字句解析の規則が英数字・記号（ASCII）の範囲だけを受け付ける作りになっていました（12.0.0 のソースで確認）。ダブルクォートで囲んでも次のエラーになります。

Error: Parse error on line 2:
Expecting 'DQUOTE', got 'ESCAPED_TEXT'

ワードリーマップは、タイトルは日本語で描画できましたが、要素名を日本語にすると「Syntax error in text」という画像が出力されました。 このとき mmdc はエラー終了せず、正常終了します。CIなどで自動生成するときは、出力SVGに次の文字列が含まれていないかも確認すると安心です。

grep -l 'Syntax error' out/*.svg

よくある構文エラーと直し方

実際に mmdc で出たエラー文をそのまま載せています。 エラー文の ^ の位置が、問題のある場所の目安です。

ラベルにかっこを含めたとき

直す前：

flowchart LR
    A[注文(仮)] --> B[確定]

Error: Parse error on line 2:
...lowchart LR    A[注文(仮)] --> B[確定]
----------------------^
Expecting 'SQE', 'DOUBLECIRCLEEND', 'PE', '-)', 'STADIUMEND', 'SUBROUTINEEND', 'PIPE', 'CYLINDEREND', 'DIAMOND_STOP', 'TAGEND', 'TRAPEND', 'INVTRAPEND', 'UNICODE_TEXT', 'TEXT', 'TAGSTART', got 'PS'

直した後（描画できました）：

flowchart LR
    A["注文(仮)"] --> B[確定]

ノードIDに end を使ったとき

end は subgraph を閉じる予約語のため、小文字のままではノード名に使えません。 start --> end は got 'end' のエラーになり、start --> End のように頭文字を大文字にすると描画できました。

GitHub・GitLab・Notion・VS Codeでの対応状況

主要なサービスはMermaidを標準で表示できます。 ただし使われている版は最新とは限らないため、新しい図種は表示先で info を描いてバージョンを確認してから使うのが確実です。

GitLabを自社サーバーで動かしている場合、Cross-Origin-Resource-Policy ヘッダーを same-site や same-origin にしていると図が表示されません。 公式ドキュメントでは cross-origin にする方法が案内されています。

ローカルでSVGやPNGを作るなら mermaid-cli（npx mmdc -i 入力.mmd -o 出力.svg）が便利です。 出力形式は拡張子（.svg / .png / .pdf）で決まります。

よくある質問

Q. flowchart と graph はどう違いますか？ A. どちらもフローチャートとして判定されます（12.0.0 のソースで確認）。公式ドキュメントは flowchart を前提に説明しているので、これから書くなら flowchart がおすすめです。

Q. GitHubで新しい図種が表示されません。 A. GitHubが使っているMermaidのバージョンに、その図種がまだ入っていない可能性があります。 ```mermaid の中に info とだけ書くとバージョンが表示されるので、早見表の図種がその版で使えるかを確認しましょう。

Q. 日本語のラベルは使えますか？ A. 多くの図種でそのまま使えます。 ただし、サンキー図とワードリーマップの要素名は英数字にする必要がありました。要求図・XYチャート・ベン図は、ダブルクォートで囲むか、英数字IDに表示名を付けると描画できます。

まとめ

• Mermaidの最新版は 12.0.0（2026-09-10公開）で、公式ドキュメントには31の図種が並んでいます。
• 図の種類は1行目のキーワードで決まります。 -beta がつく図種は仕様が変わる可能性があります。
• 全コードを mermaid-cli 12.0.0 で描画し、SVGのサイズ・要素数で成功を確認しました。
• フローチャートはかっこの組み合わせで形、--> の書き方で線の種類が決まります。
• ガントチャートは after・excludes・milestone で依存関係と休日、節目を表せます。
• 日本語は "..." で囲むのが基本です。 サンキー図とワードリーマップの要素名は英数字にします。
• 表示先のバージョンは info で確認してから新しい図種を使うと確実です。

株式会社RJCでは、Mermaidのような図をテキストで書く技術を仲間と学び合っています。こうした知識を共有しながら、日々技術を磨いています。

株式会社RJC ― SI事業・SES事業・AI駆動開発。RJCは一緒に成長を楽しめる会社です。