Mermaid記法完全ガイド｜Mermaid 12対応・AIで図を自動生成【プロンプト12本】

1. 結論——3分で使い始める最短ルート

2. Mermaidとは何か・どこに貼れるか

Mermaid（マーメイド）は、テキストを書くだけで図が描けるオープンソースの記法だ。Markdownの中にそのまま埋め込める。本記事の内容はMermaid 12.1.0（2026年10月2日公開）時点の仕様に基づいている（バージョンは頻繁に更新されるため、新しい図種を使う際は公式ドキュメントで最新の対応状況を確認してほしい）。

なぜテキストで図を書くのか

貼り先の対応状況

表のとおり、実務でMermaidが効くのはドキュメントをMarkdownで管理している環境だ。ObsidianやNotionを情報の置き場にしているなら、図もそのまま同じ場所に置ける。各ツールの運用設計はObsidian × AIエージェント——AIに「記憶」を持たせる仕組みと設計方法、AIに社内資料を読ませる構成はNotebookLM×Notion連携ガイド｜4つの接続方法とNotion AIとの使い分けやNotebookLM（Gemini Notebook）×Obsidian連携完全ガイドで扱っている。

3. 最低限の構文（これだけ覚えれば足りる）

AIに書かせるとしても、出力を読めないと修正できない。覚えるのはこの3つだけでいい。

① 1行目で図の種類を宣言する

flowchart TD      ← フローチャート（TD=上から下、LR=左から右）
sequenceDiagram   ← シーケンス図
gantt             ← ガントチャート
erDiagram         ← ER図
stateDiagram-v2   ← 状態遷移図
classDiagram      ← クラス図
mindmap           ← マインドマップ

② ノードは「ID[表示名]」で書く

flowchart TD
    A[申請]           ← 四角
    B{承認？}         ← ひし形（条件分岐）
    C([完了])         ← 角丸
    D[(データベース)]  ← 円柱

③ 矢印でつなぐ

flowchart TD
    A[申請] --> B{承認？}
    B -->|OK| C([完了])
    B -->|NG| D[差し戻し]
    D --> A
    A -.-> E[通知]        ← 点線矢印
    A ==> F[重要な流れ]    ← 太線矢印

4. AIに書かせるプロンプト12本

そのまま貼って使えるプロンプトを用途別に用意した。〈 〉部分を自分の内容に置き換えるだけでいい。

基本形（まずこれを使う）

以下の内容をMermaid記法のフローチャートにしてください。

条件：
- コードブロックのみを出力し、説明文は不要
- ノードIDは半角英数（A、B、C...）にする
- 日本語ラベルは必ずダブルクォートで囲む
- 「end」を単独のノードIDに使わない

【内容】
〈ここに業務フローや処理内容〉

図の種類を指定する

【プロンプト2】業務フロー → フローチャート
以下の業務手順をMermaidのフローチャート（flowchart TD）にしてください。
判断が必要な箇所はひし形の条件分岐にし、分岐ラベルに条件を書いてください。
コードブロックのみ出力してください。
【内容】〈業務手順〉

【プロンプト3】システム間のやりとり → シーケンス図
以下のやりとりをMermaidのシーケンス図（sequenceDiagram）にしてください。
登場人物・システムをparticipantで定義し、時系列順に矢印で表現してください。
【内容】〈処理の流れ〉

【プロンプト4】プロジェクト計画 → ガントチャート
以下のタスクをMermaidのガントチャート（gantt）にしてください。
dateFormat は YYYY-MM-DD、タスクはsectionでグループ化してください。
【内容】〈タスクと期間〉

【プロンプト5】DB設計 → ER図
以下のテーブル定義をMermaidのER図（erDiagram）にしてください。
主キー・外部キーを明示し、リレーションのカーディナリティを正しく表現してください。
【内容】〈テーブル定義〉

【プロンプト6】状態の遷移 → 状態遷移図
以下の状態遷移をMermaidの状態遷移図（stateDiagram-v2）にしてください。
開始状態と終了状態を明示してください。
【内容】〈ステータスと遷移条件〉

既存の資料から図を起こす

【プロンプト7】議事録から図解する
以下の議事録から、決定した業務フローを抽出してMermaidのフローチャートにしてください。
議事録に書かれていない工程は推測で追加せず、不明な箇所は「要確認」ノードにしてください。
【議事録】〈本文を貼る〉

【プロンプト8】コードから処理フローを起こす
以下のコードの処理の流れをMermaidのフローチャートにしてください。
関数呼び出しの階層ではなく、処理の順序と分岐が分かる粒度でお願いします。
【コード】〈コードを貼る〉

【プロンプト9】仕様書からシーケンス図を起こす
以下のAPI仕様から、リクエストからレスポンスまでの流れをMermaidのシーケンス図にしてください。
エラー時の分岐もaltブロックで表現してください。
【仕様】〈仕様を貼る〉

この3本は「すでにある資料を図に変換する」使い方だ。とくにプロンプト7は効果が大きい。会議の文字起こしから決定事項を抽出し、そのまま業務フロー図にできる。文字起こし〜要約の自動化まで含めた構成はClaude × Notion × NottaでMCP連携！議事録作業を90%削減する完全ガイドにまとめている。プロンプト8のようにコードを読ませる用途では、チャット画面に貼るよりリポジトリ全体を見られるClaude Codeのほうが精度が出る。

修正・改善に使う

【プロンプト10】エラーを直させる
以下のMermaidコードが描画されません。構文エラーを修正してください。
修正した箇所と理由も併せて説明してください。
【コード】〈エラーになるコードを貼る〉

【プロンプト11】図を簡略化する
以下のMermaid図が複雑すぎて読みにくいです。
主要な流れだけを残して簡略化し、詳細はsubgraphでまとめてください。
【コード】〈既存のコードを貼る〉

【プロンプト12】図から抜けを指摘させる
以下のMermaidフローチャートを見て、業務フローとして抜けている可能性がある工程や、
考慮されていない例外パターンを指摘してください。図の修正は不要です。
【コード】〈既存のコードを貼る〉

5. 【最重要】AI出力が壊れる7パターンと直し方

AIが生成したMermaidは、そのまま貼ると描画されないことがある。原因はほぼこの7つに集約される。ここを押さえておけば、エラーが出ても数十秒で直せる。

① 日本語ラベルに括弧が入っている

最頻出のエラー。ラベル内の丸括弧・角括弧が構文として解釈されてしまう。

✗ 描画されない

flowchart TD
    A[承認（部長）] --> B[完了]

✓ ダブルクォートで囲む

flowchart TD
    A["承認（部長）"] --> B[完了]

全角括弧でも起きることがある。日本語ラベルは常にダブルクォートで囲む習慣にしておけば、この問題は起きない。

② ノードIDに日本語や記号を使っている

✗ 不安定

flowchart TD
    申請 --> 承認
    ユーザーA --> 処理-1

✓ IDは半角英数、表示名はラベルで

flowchart TD
    A[申請] --> B[承認]
    U1[ユーザーA] --> P1[処理1]

環境によっては日本語IDでも動くが、ハイフンやスペースが混ざると壊れる。IDと表示名を分けるのが安全策だ。

③ 「end」を単独で使っている

✗ フローチャートが壊れる

flowchart TD
    start --> end

✓ 予約語を避ける

flowchart TD
    S[開始] --> E[終了]

end はsubgraphの終端を示す予約語のため、ノードIDとして使うと構文が破綻する。AIは英語の思考で「start → end」と書きがちなので、頻繁に踏む地雷だ。

④ 改行を普通の改行で書いている

✗ 反映されない

flowchart TD
    A[1行目
    2行目]

✓ <br/> を使う

flowchart TD
    A["1行目<br/>2行目"]

⑤ subgraph内でノードIDが重複している

✗ 意図しない結線になる

flowchart TD
    subgraph 開発
        A[テスト]
    end
    subgraph 本番
        A[テスト]
    end

✓ IDに接頭辞をつける

flowchart TD
    subgraph 開発
        DEV_A[テスト]
    end
    subgraph 本番
        PRD_A[テスト]
    end

同じIDは同じノードと解釈されるため、別グループに同名のノードを置くと1つに統合されてしまう。エラーにはならず「なぜか線がおかしい」という症状になるので気づきにくい。

⑥ シーケンス図でコロンの位置が違う

✗

sequenceDiagram
    ユーザー -->> サーバー : リクエスト送信

✓ participantで定義し、コロンの前に空白を入れない

sequenceDiagram
    participant U as ユーザー
    participant S as サーバー
    U-->>S: リクエスト送信
    S-->>U: レスポンス返却

⑦ 最新の図種が貼り先で未対応

6. コピペで動く業務テンプレート13種（ベン図・特性要因図・ユースケース図つき）

そのまま貼れば動くテンプレートを用意した。中身を自分の業務に書き換えて使ってほしい。

① 業務承認フロー

flowchart TD
    A["申請書を作成"] --> B["上長に提出"]
    B --> C{"上長承認"}
    C -->|承認| D{"金額が10万円以上"}
    C -->|差し戻し| A
    D -->|Yes| E["部長承認"]
    D -->|No| F["経理処理へ"]
    E --> F
    F --> G(["完了"])

② API通信のシーケンス図

sequenceDiagram
    participant U as ユーザー
    participant F as フロントエンド
    participant A as APIサーバー
    participant D as データベース

    U-->>F: 検索ボタンを押す
    F-->>A: GET /api/search
    A-->>D: SELECT クエリ実行
    D-->>A: 結果を返却
    alt データあり
        A-->>F: 200 OK
        F-->>U: 検索結果を表示
    else データなし
        A-->>F: 404 Not Found
        F-->>U: 該当なしと表示
    end

③ プロジェクト計画のガントチャート

gantt
    title サイトリニューアル計画
    dateFormat YYYY-MM-DD

    section 要件定義
    ヒアリング       :a1, 2026-09-01, 7d
    要件まとめ       :a2, after a1, 5d

    section 設計・制作
    デザイン         :b1, after a2, 14d
    実装             :b2, after b1, 21d

    section 公開
    テスト           :c1, after b2, 7d
    本番リリース     :milestone, after c1, 0d

④ データベースのER図

erDiagram
    USERS ||--o{ ORDERS : "注文する"
    ORDERS ||--|{ ORDER_ITEMS : "含む"
    PRODUCTS ||--o{ ORDER_ITEMS : "選ばれる"

    USERS {
        int id PK
        string name
        string email
    }
    ORDERS {
        int id PK
        int user_id FK
        datetime ordered_at
    }
    ORDER_ITEMS {
        int id PK
        int order_id FK
        int product_id FK
        int quantity
    }

⑤ 案件ステータスの状態遷移図

stateDiagram-v2
    [*] --> 問い合わせ
    問い合わせ --> 商談中 : 初回打ち合わせ
    商談中 --> 見積提出 : 要件確定
    見積提出 --> 受注 : 承認
    見積提出 --> 失注 : 見送り
    商談中 --> 失注 : 中断
    受注 --> [*]
    失注 --> [*]

⑥ サブグラフで領域を分けた構成図

flowchart LR
    subgraph クライアント
        B["ブラウザ"]
    end
    subgraph サーバー
        W["Webサーバー"]
        AP["アプリサーバー"]
    end
    subgraph データ層
        DB[("データベース")]
        C[("キャッシュ")]
    end

    B --> W
    W --> AP
    AP --> DB
    AP --> C

💡 補足：AIエージェントのワークフローを図にする用途も増えている。分岐・ループ・人間の承認を含む処理は文章で説明するより図のほうが早く伝わる。設計そのものの考え方はLangGraphとは？StateGraphの書き方・人間承認・永続化を参照してほしい。LangGraphは処理をグラフ構造で表現するため、Mermaidのフローチャートとそのまま対応づけられる。

⑦ 企画整理のマインドマップ

mindmap
  root(("新サービス企画"))
    ターゲット
      中小企業
      個人事業主
    提供価値
      工数削減
      コスト削減
    課題
      認知獲得
      価格設定
    競合
      A社
      B社

⑧ 円グラフ

pie title 流入チャネル構成比
    "オーガニック検索" : 45
    "SNS" : 25
    "広告" : 20
    "その他" : 10

⑨ Gitのブランチ運用図

gitGraph
    commit id: "初期実装"
    branch develop
    commit id: "機能A追加"
    branch feature/login
    commit id: "ログイン実装"
    checkout develop
    merge feature/login
    checkout main
    merge develop tag: "v1.0"

⑩ 施策のタイムライン

timeline
    title 2026年 施策ロードマップ
    Q1 : サイトリニューアル
       : SEO記事の量産開始
    Q2 : 広告運用の内製化
    Q3 : MA導入
       : ウェビナー開始
    Q4 : 効果測定と改善

⑪ ベン図（venn-beta）

3つの条件の重なりを見せたいときに。set で円を、union で重なりを書く。IDは半角英字にして、日本語の表示名は ["…"] の中に入れるのがコツだ。Mermaid v11.12.3以降で使える。

venn-beta
  title 新サービスの狙いどころ
  set Need["顧客が欲しい"]
  set Can["自社が作れる"]
  set Pay["お金になる"]
  union Need,Can["作れて喜ばれる"]
  union Can,Pay["作れて儲かる"]
  union Need,Pay["喜ばれて儲かる"]
  union Need,Can,Pay["ここを狙う"]

⑫ 特性要因図（ishikawa-beta）

いわゆる「フィッシュボーン図」。1行目に問題（結果）を書き、その下にインデントで原因を枝分かれさせる。品質管理の「人・方法・道具・環境」で整理すると、AIにも書かせやすい。Mermaid v11.12.3以降で使える。

ishikawa-beta
    問い合わせの返信が遅い
    人
        担当者が1人だけ
        新人が回答テンプレートを知らない
    方法
        一次対応のルールがない
        社内確認に時間がかかる
    道具
        メールとチャットが分かれている
    環境
        繁忙期に問い合わせが集中する

⑬ ユースケース図（usecase-beta）

「誰が、システムで何をするか」を示すUMLの図。Mermaid 12.0.0で追加された。actor で利用者、systemBoundary 〜 end でシステムの範囲を書き、--> でつなぐ。

usecase-beta
direction LR
actor Customer("お客さま")
actor Staff("店舗スタッフ")
systemBoundary "予約システム"
  Book("来店を予約する")
  Cancel("予約を取り消す")
  Check("予約を確認する")
end
Customer --> Book
Customer --> Cancel
Staff --> Check

※ ⑪〜⑬を含む本章のテンプレートは、すべてMermaid 12.1.0で描画できることを確認した（2026年10月11日）。⑪〜⑬は名前に「-beta」が付く新しい図で、貼り先のMermaidが古いと表示されない。

7. Mermaid 12（2026年9月）で変わったこと・2026年に増えた図

2026年9月10日にMermaid 12.0.0が公開された（最新は10月2日公開の12.1.0。2026年10月11日にGitHubのリリース一覧で確認）。v11からの大型アップデートで、何も設定していない図の見た目と配置が変わる。「昨日まで普通だった図の色や並びが急に変わった」という場合は、まずこれを疑ってほしい。

前の見た目に戻したいとき

図の先頭（front matter）で、レイアウト・テーマ・lookの3つを指定すれば、v11までと同じ見た目で描かれる。図に書いた指定は、サイト全体の設定より優先される。

---
config:
  layout: dagre
  theme: default
  look: classic
---
flowchart TD
    A[申請] --> B{承認？}
    B -->|OK| C([完了])
    B -->|NG| D[差し戻し]

自分のサイトにMermaidを埋め込んでいる場合は、mermaid.initialize({ layout: 'dagre', theme: 'default', look: 'classic' }) でページ内のすべての図をまとめて元に戻せる。

2026年に追加された主な図・機能

このほか、Architecture（クラウド構成図）、Kanban、Radar、Treemap、Packet、Blockといった図は2025年までのv11系で追加済みだ。フローチャートには @{shape:...} で形を指定する記法や、手描き風などに切り替えるLook機能もある。

8. Mermaidが向かないケース

9. よくある質問