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

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

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

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

以下の内容を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ブロックで表現してください。
【仕様】〈仕様を貼る〉

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

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

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

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

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

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

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

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

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 : 効果測定と改善