生成AIでMermaid図を作るプロンプト集｜図の種類別とエラーの直し方

生成AIに Mermaid の図を頼むときは、「図の種類」「向き」「ノード数の上限」「ラベルは二重引用符で囲む」の4点を指定すると、崩れにくいコードが返ってきます。 Mermaid は文字で図を書く記法なので、AI が出した文字をそのまま貼れば図になり、直したいところは文字を直すだけで済みます。

この記事では、6種類の図について「頼み方のテンプレート」と「期待する形のコード」を対で載せ、エラーになる書き方を実際に描画してエラー文ごと再現しました。記法そのものの一覧ではなく、AI への頼み方と直し方に絞っています。

確認環境：@mermaid-js/mermaid-cli 12.0.0（同梱の mermaid 12.1.0）、Node.js 22.22.2、Chromium（Playwright 用ビルド 1194）。掲載したコードとエラー文は、この環境で SVG に描画して確かめたものです。確認日 2026-10-05。

この記事の結論

• 指定するのは4点です。図の種類（例：flowchart）、向き（TD か LR）、ノード数の上限（例：12個まで）、ラベルは二重引用符で囲むこと。
• ID は半角英数字、表示名は日本語と分けるよう頼みます。エラーの多くは、ラベルの中の括弧や記号、全角の記号が原因でした。
• エラーが出たら、エラー文とコードの両方を貼って直してもらいます。 エラー文には行番号と位置の印が入っているので、そのまま渡すのが近道です。
• エラーにならずに図だけが変わる書き方もあります。 描画できたあとも、ノード名と矢印の数を元の依頼と見比べます。

Mermaid を AI に頼むときの早見表

すべての図に付ける共通ルール

どの図を頼むときも、次の枠をプロンプトの最後に付けます。以降のテンプレートでは「共通ルール」と書いた位置にこの枠を貼ってください。

# 共通ルール
- 出力は mermaid のコードブロック1つだけにする。前後に説明文を付けない。
- 1行目に図の種類を宣言する。
- ID は半角英数字とアンダースコアだけにする。日本語は表示名（ラベル）にだけ使う。
- 表示する文字はすべて半角の二重引用符で囲む。
- 記号（括弧、矢印、コロン、引用符）は半角にする。全角の記号を記法の部分に使わない。
- end という小文字だけの ID は使わない。
- コメントが必要なら行頭に %% を付ける。
- 書かれていない情報は足さない。不明な点はコードの後ではなく、コードの前に質問として1行で書く。

図の種類別プロンプトと期待するコード

題材は架空の「備品予約システム」です。角かっこの部分を自分の内容に置き換えて使います。プロンプトは筆者が用意したテンプレートで、その下のコードは「この形で返ってくれば合格」という見本です。見本はすべて描画できることを確かめています。

フローチャート

次の手順を Mermaid のフローチャートにしてください。

# 図の指定
- 種類と向き：flowchart TD
- ノードは12個まで。分岐はひし形にし、分岐の矢印には「ある」「ない」のように条件を書く。
- 開始と完了を1つずつ置く。

# 手順
[例：利用者が予約を申請する。同じ時間帯に予約があれば別の時間帯を選び直す。なければ予約を登録し、確認メールを送って完了する。]

# 共通ルール
（共通ルールの枠を貼る）

flowchart TD
    A["予約を申請する"] --> B{"同じ時間帯に予約があるか"}
    B -- "ある" --> C["別の時間帯を選ぶ"]
    C --> A
    B -- "ない" --> D["予約を登録する"]
    D --> E["確認メールを送る"]
    E --> F(["完了"])

シーケンス図

次のやり取りを Mermaid のシーケンス図にしてください。

# 図の指定
- 種類：sequenceDiagram
- 登場するのは [利用者、予約画面、予約API、データベース] の4つ。participant で短い ID と表示名を分ける。
- 依頼は実線の矢印（->>）、応答は点線の矢印（-->>）にする。
- 条件で分かれるところは alt と else で書く。メッセージは15個まで。

# やり取り
[例：利用者が備品と時間帯を入力する。予約画面が予約APIに登録を依頼する。APIは重なる予約を検索し、なければ保存して完了を返す。あれば重複を知らせる。]

# 共通ルール
（共通ルールの枠を貼る。シーケンス図ではメッセージの文は引用符で囲まず、コロンの後にそのまま書く）

sequenceDiagram
    autonumber
    actor U as 利用者
    participant W as 予約画面
    participant A as 予約API
    participant D as データベース
    U->>W: 備品と時間帯を入力する
    W->>A: 予約を登録する
    A->>D: 重なる予約を検索する
    D-->>A: 検索結果
    alt 重なる予約がない
        A->>D: 予約を保存する
        A-->>W: 登録完了
    else 重なる予約がある
        A-->>W: 重複のお知らせ
    end
    W-->>U: 結果を表示する

ER図

次のテーブルを Mermaid の ER図にしてください。

# 図の指定
- 種類：erDiagram
- エンティティ名とカラム名は半角英字。日本語名はカラムの後ろに二重引用符で付ける。
- カラムは「型 名前 キー 日本語名」の順。キーは PK、FK、UK を使う。
- リレーションには必ずラベルを付ける（例：USER ||--o{ RESERVATION : "予約する"）。
- エンティティは8個まで。

# テーブル
[例：利用者（ID、氏名、メール）、備品（ID、置き場所、備品名）、会議室（ID、会議室名）、予約（ID、利用者、備品、開始日時、終了日時）。利用者1人に予約は0件以上。]

# 共通ルール
（共通ルールの枠を貼る）

erDiagram
    USER ||--o{ RESERVATION : "予約する"
    EQUIPMENT ||--o{ RESERVATION : "予約される"
    ROOM ||--o{ EQUIPMENT : "置かれる"
    USER {
        int user_id PK "利用者ID"
        string name "氏名"
        string email UK "メールアドレス"
    }
    EQUIPMENT {
        int equipment_id PK "備品ID"
        int room_id FK "置き場所"
        string name "備品名"
    }
    ROOM {
        int room_id PK "会議室ID"
        string name "会議室名"
    }
    RESERVATION {
        int reservation_id PK "予約ID"
        int user_id FK "利用者"
        int equipment_id FK "備品"
        datetime start_at "開始日時"
        datetime end_at "終了日時"
    }

状態遷移図

次の状態の移り変わりを Mermaid の状態遷移図にしてください。

# 図の指定
- 種類：stateDiagram-v2、向きは direction LR
- 状態は state "表示名" as ID の形で先に定義する。ID は半角英字。
- 矢印には「何をしたら移るか」をコロンの後に書く。
- 開始と終了は [*] で表す。状態は10個まで。

# 状態と移り変わり
[例：予約は申請中から始まる。承認すると承認済み、利用を始めると利用中、返却すると返却済みで終わる。申請中と承認済みからは取り消しができる。]

# 共通ルール
（共通ルールの枠を貼る）

stateDiagram-v2
    direction LR
    state "申請中" as requested
    state "承認済み" as approved
    state "利用中" as in_use
    state "返却済み" as returned
    state "取り消し" as cancelled
    [*] --> requested : 申請する
    requested --> approved : 承認する
    requested --> cancelled : 取り消す
    approved --> in_use : 利用を開始する
    approved --> cancelled : 取り消す
    in_use --> returned : 返却する
    returned --> [*]
    cancelled --> [*]

ガントチャート

次の作業を Mermaid のガントチャートにしてください。

# 図の指定
- 種類：gantt
- dateFormat は YYYY-MM-DD、目盛りは axisFormat %m/%d、土日は excludes weekends で除く。
- 作業は「作業名 :ID, 開始日または after 前の作業ID, 日数」の形にする。ID は半角英数字。
- 作業名にコロンを入れない。section で工程を分ける。作業は15個まで。
- 節目は milestone として0日で置く。

# 作業
[例：2026-10-05 から画面設計5日、続けてテーブル設計3日。その後に予約登録の改修6日と一覧画面の改修4日を並行。予約登録の改修の後に結合テスト5日、その後リリース。]

# 共通ルール
（共通ルールの枠を貼る。ガントでは作業名を引用符で囲まない）

gantt
    title 備品予約システム 改修スケジュール
    dateFormat YYYY-MM-DD
    axisFormat %m/%d
    excludes weekends
    section 設計
    画面設計        :des1, 2026-10-05, 5d
    テーブル設計    :des2, after des1, 3d
    section 開発
    予約登録の改修  :dev1, after des2, 6d
    一覧画面の改修  :dev2, after des2, 4d
    section テスト
    結合テスト      :test1, after dev1, 5d
    リリース        :milestone, rel, after test1, 0d

クラス図

次のクラスを Mermaid のクラス図にしてください。

# 図の指定
- 種類：classDiagram、向きは direction LR
- クラス名・属性・メソッドは半角英字。関連のラベルだけ日本語にする。
- 属性は「+型 名前」、メソッドは「+名前(引数) 戻り値の型」の形にする。引数に型やコロンを書かない。
- 総称型は山かっこではなくチルダで書く（例：List~Reservation~）。
- 多重度は "1" や "0..*" のように二重引用符で書く。クラスは8個まで。

# クラス
[例：利用者は備品を期間を指定して予約する。予約は期間を1つ持ち、取り消せる。期間は他の期間と重なるかを判定できる。備品は期間を渡すと空いているかを返す。]

# 共通ルール
（共通ルールの枠を貼る）

classDiagram
    direction LR
    class User {
        +int id
        +String name
        +reserve(equipment, period) Reservation
    }
    class Equipment {
        +int id
        +String name
        +isAvailable(period) bool
    }
    class Reservation {
        +int id
        +Period period
        +cancel() void
    }
    class Period {
        +DateTime startAt
        +DateTime endAt
        +overlaps(other) bool
    }
    User "1" --> "0..*" Reservation : 予約する
    Equipment "1" --> "0..*" Reservation : 予約される
    Reservation *-- Period : 持つ

どの図を選ぶか：伝えたい内容から決める判断表

迷ったときは「主語が1つで状態が変わる話」なら状態遷移図、「主語が複数でやり取りする話」ならシーケンス図、「手順の分岐が中心の話」ならフローチャート、と分けると決まります。種類を AI に任せたい場合は、次のように先に選ばせます。

次の内容を図にしたいです。フローチャート、シーケンス図、ER図、状態遷移図、ガントチャート、クラス図のうち、どれが合うかを1つ選び、理由を1文で答えてください。コードはまだ書かないでください。

[図にしたい内容]

エラー早見表

実際に描画して、エラーになった書き方と直し方です。

ラベルの中の括弧や記号

壊れたコード

flowchart TD
    A[申請(下書き)] --> B[承認]

エラー文

Error: Parse error on line 2:
...lowchart TD    A[申請(下書き)] --> B[承認]
----------------------^
Expecting 'SQE', 'DOUBLECIRCLEEND', 'PE', '-)', …（省略）… 'TEXT', 'TAGSTART', got 'PS'

直したコード

flowchart TD
    A["申請(下書き)"] --> B["承認"]

丸かっこはノードの形を表す記号でもあるため、ラベルの中に裸で書くと記法として読まれます。ひし形の中に 数量 >= 1 (個) と書いた場合も同じエラーになり、二重引用符で囲むと描画できました。

ラベルの中に二重引用符そのものを入れたいときは、#quot; と書きます。

壊れたコード

flowchart TD
    A["備品"プロジェクター"を選ぶ"] --> B["予約"]

エラー文

Error: Parse error on line 2:
...D    A["備品"プロジェクター"を選ぶ"] --> B["予約"]
----------------------^
Expecting 'SQE', 'DOUBLECIRCLEEND', 'PE', '-)', …（省略）… 'TEXT', 'TAGSTART', got 'STR'

直したコード

flowchart TD
    A["備品#quot;プロジェクター#quot;を選ぶ"] --> B["予約"]

小文字の end というノード名

壊れたコード

flowchart TD
    start --> check
    check --> end

エラー文

Error: Parse error on line 3:
...check    check --> end
----------------------^
Expecting 'AMP', 'COLON', 'PIPE', 'TESTSTR', 'DOWN', 'DEFAULT', 'NUM', 'COMMA', 'NODE_STRING', 'BRKT', 'MINUS', 'MULT', 'UNICODE_TEXT', got 'end'

直したコード

flowchart TD
    start --> check
    check --> finish["end"]

end は subgraph を閉じる言葉として使われています。Mermaid の公式ドキュメントにも、フローチャートのノードに小文字だけの end を書くと図が壊れるので、End や END のように大文字を混ぜるよう注意書きがあります。ID を別の名前にして、表示名として end と書く形が確実です。

矢印の書き間違い

壊れたコード

flowchart TD
    A -> B

エラー文

Error: Parse error on line 2:
flowchart TD    A -> B
------------------^
Expecting 'SEMI', 'NEWLINE', 'EOF', 'AMP', 'START_LINK', 'LINK', 'LINK_ID', got 'MINUS'

直したコード

flowchart TD
    A --> B

図の種類によって矢印の形が違います。シーケンス図に A=>B: 送る と書いた場合も Parse error（got 'INVALID'）になり、A->>B: 送る に直すと描画できました。

種類宣言の抜け・コードブロックの記号ごと貼った場合

壊れたコード

A["申請"] --> B["承認"]

エラー文

UnknownDiagramError: No diagram type detected matching given configuration for text: A["申請"] --> B["承認"]

直したコード

flowchart TD
    A["申請"] --> B["承認"]

同じ UnknownDiagramError は、宣言のつづり違い（flowchat）でも、AI の回答をコードブロックの記号（バッククォート3つと mermaid の行）ごと Mermaid のファイルや専用エディタに貼った場合でも出ました。このエラーを見たら、まず1行目を確かめます。 反対に、GitHub の Markdown に貼るときは、mermaid と指定したコードブロックで囲む必要があります。貼る先に合わせて、囲みを付けるか外すかを決めてください。

全角記号の混入

壊れたコード

flowchart TD
    A［"申請"］ －－＞ B［"承認"］

エラー文

Error: Lexical error on line 2. Unrecognized text.
flowchart TD    A［"申請"］ －－＞ B［"承認"］
-----------------^

直したコード

flowchart TD
    A["申請"] --> B["承認"]

シーケンス図では、コロンが全角になっているだけでエラーになります。

壊れたコード

sequenceDiagram
    participant A as 予約画面
    participant B as 予約API
    A->>B： 予約を登録する

エラー文

Error: Parse error on line 4:
...I    A->>B： 予約を登録する
----------------------^
Expecting 'TXT', got 'NEWLINE'

直したコード

sequenceDiagram
    participant A as 予約画面
    participant B as 予約API
    A->>B: 予約を登録する

全角の記号は見た目で気づきにくいので、修正を頼むときに「記法の記号をすべて半角に直す」と書き添えます。

コメントとセミコロン

壊れたコード

flowchart TD
    A --> B // 承認へ進む

エラー文

Error: Parse error on line 2:
...hart TD    A --> B // 承認へ進む
----------------------^
Expecting 'SEMI', 'NEWLINE', 'EOF', 'AMP', 'START_LINK', 'LINK', 'LINK_ID', got 'NODE_STRING'

直したコード

flowchart TD
    %% 承認へ進む
    A --> B

シーケンス図のメッセージにセミコロンを書くと、そこで文が区切られてエラーになりました。#59; と書くと、図にはセミコロンとして表示されます。

壊れたコード

sequenceDiagram
    A->>B: 検索; 並べ替え
    B-->>A: 結果

エラー文

Error: Parse error on line 2:
...    A->>B: 検索; 並べ替え    B-->>A: 結果
----------------------^
Expecting '()', 'SOLID_OPEN_ARROW', 'DOTTED_OPEN_ARROW', …（省略）… 'DOTTED_POINT', got 'NEWLINE'

直したコード

sequenceDiagram
    A->>B: 検索#59; 並べ替え
    B-->>A: 結果

ER図のリレーションにラベルがない

壊れたコード

erDiagram
    USER ||--o{ RESERVATION

エラー文

Error: Parse error on line 2:
...R ||--o{ RESERVATION
-----------------------^
Expecting 'COLON', 'STYLE_SEPARATOR', got 'NEWLINE'

直したコード

erDiagram
    USER ||--o{ RESERVATION : "予約する"

エラーにならずに図が変わる書き方

描画はできるのに、意図と違う図になる書き方も見つかりました。エラー文が出ないので、目で見て確かめる必要があります。

1つ目は Mermaid の公式ドキュメントにも注意書きがあり、線の直後のノード名が o か x で始まるときは、空白を入れるか大文字にするよう案内されています。

エラー文を貼って直させる修正用プロンプト

次の Mermaid のコードを描画したらエラーになりました。エラー文を手がかりに直してください。

# エラー文
[エラー文をそのまま貼る。行番号と ^ の位置の行も含める]

# コード
[エラーになったコードをそのまま貼る]

# 直し方の決まり
- 図の内容（ノード、矢印、ラベルの文言）は変えない。記法だけを直す。
- 次の順に確かめる：1行目の種類宣言 → 全角の記号 → ラベルの二重引用符 → end という ID → 矢印の形 → コメントの書き方。
- 表示する文字は半角の二重引用符で囲む。ラベルの中の二重引用符は #quot; と書く。
- 出力は、直したコード（mermaid のコードブロック1つ）と、直した箇所の一覧（行番号、直す前、直した後）だけにする。

エラーは出ないが図が意図と違う場合は、次の形で頼みます。

次の Mermaid のコードは描画できますが、意図と違う図になります。

# 意図と違う点
[例：ノード名 ops が ps と表示される]

# コード
[コードをそのまま貼る]

記法の読まれ方が原因と考えられる箇所を挙げ、内容を変えずに直したコードを mermaid のコードブロック1つで出してください。

手元で描画して確かめる手順

AI が返したコードは、貼る前に描画して確かめると安心です。今回使ったコマンドです。

npm install @mermaid-js/mermaid-cli
npx mmdc -i flow.mmd -o flow.svg

flow.mmd にはコードブロックの記号を含めず、中身だけを保存します。エラーがあれば、この記事に載せたような Parse error がそのまま表示されます。インストール済みのブラウザを使う場合は、-p オプションに実行ファイルの場所を書いた JSON を渡します。

{ "executablePath": "/path/to/chrome", "args": ["--no-sandbox"] }

GitHub では、Issue、Discussion、プルリクエスト、Wiki、Markdown ファイルで、mermaid と指定したコードブロックが図として表示されます（GitHub Docs の記載）。

Mermaid・PlantUML・画像生成の使い分け

文字で書く方法は、AI に「この矢印を1本足して」と頼んだときに差分が小さく済み、変更の履歴も残せます。

確かめて分かったこと

• 日本語そのものはエラーの原因になりませんでした。 ER図のカラム名（利用者ID、氏名）、エンティティ名、クラス名、状態名を日本語で書いても描画できました。原因になったのは、括弧・引用符・全角の記号・空白です。それでも ID を半角英数字にそろえるよう頼むのは、空白や全角記号の混入をまとめて防げるためです。
• UnknownDiagramError は「1行目」の合図でした。 宣言の抜け、つづり違い、コードブロックの記号の混入のどれでも同じエラーになります。
• エラー文の ^ の位置は、原因の文字の近くを指していました。 全角記号の例では全角の角かっこ、矢印の例では書き間違えた矢印の位置です。エラー文ごと AI に渡す意味があります。
• エラーにならない崩れ方が5種類見つかりました。 ノード名の先頭が欠ける、状態名が分かれる、作業名が消える、メソッドの表示が乱れる、総称型が消える、の5つです。
• 行頭の全角空白、ラベル中の半角セミコロン（フローチャート）、向きを省いた flowchart は描画できました。 エラーの原因を探すときは、ここより先に早見表の項目を確かめるほうが早く済みます。

よくある質問

Q. ChatGPT や Claude で Mermaid の図は作れますか？ A. 作れます。Mermaid は文字で書く記法なので、文章を出力できる生成AIならコードを書けます。図として見るには、Mermaid に対応した表示先（GitHub の Markdown など）に貼るか、mermaid-cli で描画します。

Q. Mermaid でエラーが出て表示できないときは？ A. 1行目の種類宣言、全角の記号、ラベルの二重引用符の3つを順に確かめます。直らなければ、エラー文とコードを修正用プロンプトに貼って直してもらいます。

Q. フローチャートとシーケンス図の違いは？ A. フローチャートは手順と分岐を、シーケンス図は複数の登場者の間のやり取りと順番を表します。登場者が1つで分岐が中心ならフローチャート、登場者が複数ならシーケンス図が合います。

Q. Mermaid と PlantUML の違いは？ A. どちらも文字で図を書く記法で、Mermaid は Markdown に貼って表示できる場所が多く、PlantUML は UML の図の種類が広く Java で動かします。貼る先が Mermaid に対応しているかで決めると選びやすくなります。

Q. 図が大きくなりすぎるときは？ A. ノード数の上限を指定し、範囲ごとに図を分けて頼みます。「全体の流れを8ノードで」「そのうち承認の部分だけを詳しく」と2段階にすると、読みやすい大きさに収まります。

まとめ

• 図の種類・向き・ノード数の上限・ラベルの二重引用符の4点を指定して頼みます。
• ID は半角英数字、日本語は表示名だけにすると、全角記号や空白の混入を防げます。
• 6種類の図は、伝えたい内容（手順、やり取り、テーブル、状態、日程、クラス）で選びます。
• エラーは1行目、全角記号、引用符、end、矢印、コメントの順に確かめます。
• エラー文は行番号と位置の印ごと AI に渡し、内容を変えずに記法だけ直すよう頼みます。
• 描画できた後も、ノード名と矢印を元の依頼と見比べます。 エラーにならずに図が変わる書き方があるためです。

参考・出典

• Mermaid 公式ドキュメント「Flowcharts Syntax」 https://mermaid.js.org/syntax/flowchart.html
• GitHub Docs「Creating diagrams」 https://docs.github.com/en/get-started/writing-on-github/working-with-advanced-formatting/creating-diagrams
• PlantUML 公式サイト「Quick Start Guide」 https://plantuml.com/en/starting

（いずれも 2026-10-05 に確認）

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