AIでシステム設計図・シーケンス図を自動生成する方法｜Mermaid記法でドキュメントを10倍速くする実践ガイド

2026年10月20日

「システム設計書を作らなければならないのに、図を描くだけで半日が消えてしまう」「Excelで手書きしたフローチャートが更新のたびに崩れる」——こうした悩みはエンジニア・非エンジニアを問わず多くの現場で共通しています。

AIとMermaid記法を組み合わせると、テキストで説明を書くだけでフローチャート・シーケンス図・クラス図・ER図のコードを自動生成できます。「図を描く」作業から「確認・修正する」作業へシフトすることで、設計ドキュメントの作成工数を大幅に削減できます。

この記事では、ChatGPT・ClaudeでMermaid記法のダイアグラムコードを生成し、実際の設計書に活用するまでの手順を解説します。フローチャート・シーケンス図・ER図の3種類について、コピペで使えるプロンプト例と出力例を併記しているため、プログラミング未経験でもそのまま試せます。

Mermaid記法とは？AIと組み合わせると何が変わるか

Mermaid（マーメイド）は、テキストで図の構造を記述するとブラウザ上でダイアグラムに変換してくれる記法です。Excelや専用ツールでマウスを使って図を描く代わりに、テキストファイルにコードを書くだけで図が完成します。

Mermaidのメリットは次の3つです。

・バージョン管理できる: テキストファイルなのでGitでの差分管理が可能
・無料で使える: Mermaid Live Editor（公式サイト）、VS Code拡張機能、GitHubのMarkdownなど多数の環境で無料利用可能
・更新が速い: コードを1行書き換えるだけで図が即座に更新される

ここにAIが加わることで、さらに大きく変わります。従来は「Mermaid記法の構文を覚える」学習コストがかかっていましたが、AIに「〇〇のフロー図をMermaid記法で書いて」と指示するだけで構文を自動生成してくれます。構文を知らなくてもすぐに使い始められるのがポイントです。

Mermaid記法の実行環境を準備する

1. Mermaid Live Editor（推奨・ブラウザだけで完結）

Mermaid公式のオンラインエディタを使うのが最も手軽です。左側にコードを貼り付けると、右側にリアルタイムで図が表示されます。インストール不要でブラウザだけで動作するため、初めて試す場合はここから始めるのが確実です。

操作手順: ブラウザで「Mermaid Live Editor」と検索 → 公式サイトを開く → 左側のコードエリアにAIが生成したコードを貼り付ける → 右側に図が表示される

2. VS Code拡張機能（開発中のプロジェクトに組み込む場合）

VS Codeを使っている場合、「Markdown Preview Mermaid Support」拡張機能をインストールするとMarkdownファイル内にMermaidコードを書くだけでプレビューが表示されます。インストール手順: VS Code左メニュー「拡張機能」アイコン → 検索欄に「Mermaid」と入力 → 「Markdown Preview Mermaid Support」をインストール

3. GitHub・GitLab・Notionでも使える

GitHubはMarkdownファイル内のMermaidコードブロックをそのまま図として表示します。


# GitHubのMarkdownでMermaidを使う例
```mermaid
flowchart TD
    A[開始] --> B{条件分岐}
    B -->|Yes| C[処理A]
    B -->|No| D[処理B]
```

Notionも2022年以降にMermaid記法をサポートしています。「/」コマンドから「コードブロック」を選択 → 言語を「Mermaid」に設定するとコードが図に変換されます。

ChatGPT・ClaudeでMermaidコードを生成する手順

1. プロンプトの基本パターン

AIへの指示で重要なのは「何を表す図か」「どの種類の図か」「必要な要素」の3点を明記することです。

# プロンプト基本パターン以下のシステムフローをMermaid記法のフローチャート（flowchart TD）で書いてください。【対象システム】：ユーザーがECサイトで商品を購入する流れ【含める要素】：ユーザー操作・在庫確認・決済処理・注文確定・メール送信【出力形式】：コードブロックのみ（説明文不要）

「コードブロックのみ（説明文不要）」と指定することで、コードだけを取り出しやすくなります。出力例は次のようなコードになります。


```mermaid
flowchart TD
    A([ユーザー: 商品選択]) --> B[カートに追加]
    B --> C[注文確定ボタン]
    C --> D{在庫確認}
    D -->|在庫あり| E[決済処理]
    D -->|在庫なし| F[在庫切れ通知]
    E --> G{決済成功?}
    G -->|成功| H[注文確定]
    G -->|失敗| I[決済エラー通知]
    H --> J[確認メール送信]
    J --> K([完了])
```

2. シーケンス図を生成する

シーケンス図は、複数のシステムやユーザー間のやり取りの順序を表すのに最適です。API連携の仕様確認や、システム間のデータフローを説明するドキュメントに使います。

# シーケンス図プロンプト例ユーザーログイン処理のシーケンス図をMermaid記法（sequenceDiagram）で書いてください。【登場人物/システム】：ユーザー・フロントエンド・認証API・データベース【処理の流れ】 1. ユーザーがメールとパスワードを入力 2. フロントエンドが認証APIにPOSTリクエスト送信 3. 認証APIがDBでユーザー情報を照合 4. 一致すればJWTトークンを返却 5. 不一致ならエラーを返却 6. フロントエンドがトークンをローカルストレージに保存【出力形式】：コードブロックのみ

出力例（AIが生成するMermaidコード）:


```mermaid
sequenceDiagram
    actor User as ユーザー
    participant FE as フロントエンド
    participant API as 認証API
    participant DB as データベース

    User->>FE: メール・パスワード入力
    FE->>API: POST /auth/login
    API->>DB: ユーザー情報照合
    alt 認証成功
        DB-->>API: ユーザー情報返却
        API-->>FE: JWTトークン返却
        FE->>FE: トークンをlocalStorageに保存
        FE-->>User: ログイン成功・ダッシュボード表示
    else 認証失敗
        DB-->>API: 該当なし
        API-->>FE: 401エラー返却
        FE-->>User: エラーメッセージ表示
    end
```

3. ER図（エンティティ関連図）を生成する

データベース設計の初期段階でテーブル構造を整理するのに、ER図は欠かせません。AIにシステムの概要を伝えるだけで、テーブル名・カラム・リレーションシップを含むER図コードを生成できます。

# ER図プロンプト例 ECサイトの受注管理システムのER図をMermaid記法（erDiagram）で書いてください。【必要なテーブル】：users（ユーザー）・products（商品）・orders（注文）・order_items（注文明細）【各テーブルの主要カラム】 - users: id, email, name, created_at - products: id, name, price, stock_quantity - orders: id, user_id, total_amount, status, ordered_at - order_items: id, order_id, product_id, quantity, unit_price 【リレーション】：usersは複数のordersを持つ、ordersは複数のorder_itemsを持つ、order_itemsはproductsに紐づく【出力形式】：コードブロックのみ

ER図コードをMermaid Live Editorに貼り付けると、テーブル間の関係が視覚的に確認できます。「このカラムが足りない」「リレーションが違う」といった修正もAIに自然言語で指示すれば即座に対応してくれます。

実務での活用例（想定例）

ここでは架空の事例として、Mermaidを活用したドキュメント整備の流れを紹介します。

想定例: 受発注システムの仕様書作成

社内の受発注システムをリニューアルする際、システム仕様書の作成が必要になったとします。従来の方法では、担当者がExcelやPowerPointで手作業でフロー図を描き、更新のたびに図を修正する作業が発生していました。

Mermaid記法を導入した想定例では、次のような流れになります。

・Before（従来）: Excelで手描きのフローチャートを作成 → 仕様変更のたびに図を手修正 → バージョンが複数存在して混乱
・After（Mermaid活用）: ChatGPT/Claudeにシステム概要を入力してMermaidコードを生成 → コードをGitで管理 → 仕様変更時はコードを1行修正するだけ

ドキュメント作成の工数削減効果は条件によって異なりますが、図を描く手作業がなくなるため、特にフロー確認・修正のサイクルが高速化しやすくなります。

また、AIへの指示に「〇〇のシステムフローをエンジニアでも非エンジニアでも理解できる粒度で」と追記することで、読み手に合わせた詳細レベルの調整も可能です。

うまくいかない時の対処法

【よくあるつまずき1】生成されたコードに構文エラーが出る

Mermaid記法はバージョンによって構文が異なります。エラーが出た場合は、AIに「Mermaid v10以降の構文で書き直してください」と指示するか、エラーメッセージをそのままAIに貼り付けて「このエラーを修正してください」と依頼します。一般的に、エラーメッセージを見せると1回で修正されることが多いです。

【よくあるつまずき2】図が複雑すぎて読めない

要素が多すぎると図が見づらくなります。「最大10ノードに抑えて」「重要な処理のみ抜き出して」など、制約をプロンプトに追記してください。また「サブグラフで分割して」と指示することで、大きなフローを複数のサブ図に分けて整理することもできます。

【よくあるつまずき3】表現が実際のシステムと合わない

AIは入力した情報だけを元に図を生成します。実際のシステムとズレが生じた場合は、「〇〇の部分を△△に変更して」と自然言語で修正指示を出すのが確実です。ゼロから作り直すより、生成したコードを土台に「差分修正」を繰り返すほうが効率的です。

【よくあるつまずき4】図の矢印の向きや線種を変えたい

Mermaidの主な線種と矢印の種類を覚えておくと修正がしやすくなります。ただし、覚えなくてもAIに「実線ではなく点線にして」「矢印なしの双方向線にして」と日本語で指示すれば書き換えてくれます。

AI×Mermaidを使い分けるダイアグラム選択ガイド

やりたいこと	Mermaid図の種類	キーワード（プロンプトに使う）
業務フローや処理の流れを表す	フローチャート	flowchart TD / flowchart LR
複数システム間のやり取りを表す	シーケンス図	sequenceDiagram
DBテーブルの構造と関係を表す	ER図	erDiagram
クラスの継承・関係を表す	クラス図	classDiagram
プロジェクトのスケジュールを表す	ガントチャート	gantt
ユーザーの行動・目標を表す	ユーザー旅程図	journey

本記事のまとめ

AIとMermaid記法を組み合わせることで、システム設計ドキュメントの作成が大きく変わります。ポイントをまとめます。

・Mermaid記法の学習は不要: AIにプロンプトを送るだけでコードが生成される
・対応図の種類が豊富: フローチャート・シーケンス図・ER図・クラス図・ガントチャートなど
・修正が簡単: コードを1行変えるだけで図が更新される。AIへの自然言語指示で修正も可能
・実行環境が無料: Mermaid Live Editor・GitHub・Notion・VS Code拡張機能で無料利用できる
・バージョン管理と相性が良い: テキストなのでGitで差分管理・履歴管理ができる

特に「設計ドキュメントを作りたいが、描く時間がない」「更新のたびに図が崩れる」という課題を抱えているチームに効果的な手法です。まずはMermaid Live Editorと ChatGPT/Claudeだけで試してみてください。

AIを使ったドキュメント整備をさらに広げるなら、AIで既存コードを解説・ドキュメント化する方法やAIでWebアプリの要件定義・画面設計書を自動生成する方法も参考にしてください。AIを活用した開発ワークフロー全体については、姉妹サイトDXマスターズ.TOKYOで詳しく解説しています。

Claude CodeによるAI駆動開発入門（平川知秀）

AIとの対話でコードを書き、ドキュメントを生成するAI駆動開発のワークフローを体系的に解説。Mermaid記法と組み合わせた設計書自動化にも応用できる実践的な一冊です。