Markdown × AI で図解を効率化！コピペで使えるMermaidプロンプト集

はじめに

ドキュメント作成していて、「図があったら分かりやすいかも...」って思うことがあるんですけど、作図って本当に面倒くさい ですよね。（私だけ？）

作図ツールを立ち上げて、枠を配置して、線を引いて、位置調整して...気づいたら 「図を作るだけで30分も経っとるわ！」 なんてことも😫

そんな面倒な作業は、誰かに任せて他のタスクに集中したい ですよね。

普段開発で使っている、GitHub Copilot、Cursor、ClaudeCode、Gemini CLI などの Chat AI に 「こんな図が欲しい」と伝えるだけで、Mermaidの図がパパッと生成 されます。自力でMermaid記法の図をかくのは結構大変ですが、AIに任せるとスグに図が完成します。

ドキュメント作成が苦手な私でも、最近は ドキュメント作成を楽しめるようになった ので、同じような悩みを持つ方の参考になればと思って記事にしました！✨

https://mermaid.js.org/

Mermaidとは？

Mermaid（マーメイド） は、テキストで図を描ける ツールです。

普通の作図ソフトだと、マウスでポチポチ図形を配置して線を引いて...という作業が必要ですが、Mermaidなら テキストを書くだけで図が完成 します！

例えば、こんな感じで書くと...

graph TD
    A[開始] --> B[処理] --> C[終了]

こんな図ができあがります！

Mermaidのいいところ

✨ コードで管理できる：Gitでバージョン管理できる
✨ 軽量：画像ファイル不要でMarkdownに直接埋め込める
✨ 修正が簡単：テキストを変更するだけで図が更新できる

どこで使える？

• GitHub：READMEやIssueで図を表示できる
• Zenn, Qiita：記事内で図を表示できる
• Notion, Obsidian：メモやドキュメントに埋め込める

Mermaidを書く環境を整える

Visual Studio Code、Cursorなどのエディタでしたら、拡張機能を入れることでプレビューができるようになります。拡張機能は、Markdown Preview Mermaid Support が一番シンプルで使いやすいと思います。

1. 拡張機能 「Markdown Preview Mermaid Support」 を検索してインストール
2. .md ファイルを開いて、Cmd + Shift + V（Mac）/ Ctrl + Shift + V（Win）
   または、右上にあるプレビューボタンをクリック
3. Mermaid図がプレビュー表示されます

.md ファイルを編集すると、プレビューが更新されます。

https://marketplace.visualstudio.com/items?itemName=bierner.markdown-mermaid

作成できる図の種類

1. フローチャート

完成イメージ

プロンプト例

Webアプリケーションの問題解決フローをMermaidのフローチャートで作成してください。
開始点：問題発生
判断点：原因分析（コード、環境、データの3つの分岐）
終了点：問題解決完了
失敗時は最初に戻るループも含めて

出力例

```mermaid
flowchart TD
    A[問題発生] --> B{原因分析}
    B -->|コード| C[デバッグ実行]
    B -->|環境| D[設定確認]
    B -->|データ| E[ログ確認]
    C --> F[修正実装]
    D --> F
    E --> F
    F --> G[テスト実行]
    G --> H{結果OK?}
    H -->|Yes| I[完了]
    H -->|No| A
```

2. シーケンス図

完成イメージ

プロンプト例

ユーザーログインシステムのシーケンス図をMermaidで作成してください。
登場人物：User, Frontend, API, Database
流れ：ログイン要求 → 認証 → DB確認 → トークン発行 → 成功レスポンス

出力例

```mermaid
sequenceDiagram
    participant U as User
    participant F as Frontend
    participant A as API
    participant D as Database
    
    U->>F: ログイン要求
    F->>A: 認証リクエスト
    A->>D: ユーザー情報取得
    D-->>A: ユーザーデータ
    A-->>F: JWTトークン
    F-->>U: ログイン成功
```

3. ガントチャート

完成イメージ

プロンプト例

3ヶ月のWebアプリ開発プロジェクトのガントチャートをMermaidで作成してください。
フェーズ：設計（要件定義、UI/UX）、開発（フロント、バック）、テスト（単体、結合）
期間：2025年7月〜9月
依存関係も含めて

出力例

```mermaid
gantt
    title Webアプリ開発スケジュール
    dateFormat  YYYY-MM-DD
    section 設計
    要件定義           :done, req, 2025-07-01, 2025-07-15
    UI/UX設計         :done, design, after req, 10d
    section 開発
    フロントエンド開発  :active, frontend, 2025-07-25, 25d
    バックエンド開発    :backend, 2025-07-30, 20d
    section テスト
    単体テスト         :testing, after frontend, 5d
    結合テスト         :integration, after backend, 5d
```

4. クラス図

完成イメージ

プロンプト例

ECサイトの商品クラス図をMermaidで作成してください。
親クラス：Product（商品）
子クラス：Book（書籍）, Electronics（電子機器）
継承関係で、各子クラスには固有のプロパティとメソッドを含めて

出力例

```mermaid
classDiagram
    Product <|-- Book
    Product <|-- Electronics

    class Product {
        +int id
        +string name
        +float price
        +getDetails()
    }

    class Book {
        +string author
        +string ISBN
        +getSummary()
    }

    class Electronics {
        +string brand
        +int warrantyMonths
        +getWarrantyInfo()
    }
```

5. 状態図

完成イメージ

プロンプト例

ユーザー認証システムの状態図をMermaidで作成してください。
状態：未ログイン、ログイン中、ログイン済み、セッション期限切れ
遷移：ログイン試行、認証成功/失敗、ログアウト、タイムアウト

出力例

```mermaid
stateDiagram-v2
    [*] --> 未ログイン
    未ログイン --> ログイン中 : ログイン試行
    ログイン中 --> ログイン済み : 認証成功
    ログイン中 --> 未ログイン : 認証失敗
    ログイン済み --> 未ログイン : ログアウト
    ログイン済み --> セッション期限切れ : タイムアウト
    セッション期限切れ --> 未ログイン : 自動ログアウト
```

6. ER図

完成イメージ

プロンプト例

ECサイトのデータベースER図をMermaidで作成してください。
テーブル：Customer（顧客）, Order（注文）, Product（商品）, OrderItem（注文明細）
関係：顧客は複数注文、注文は複数商品、多対多の関係も含めて

出力例

```mermaid
erDiagram
    CUSTOMER ||--o{ ORDER : places
    ORDER ||--|{ ORDER-ITEM : contains
    PRODUCT ||--o{ ORDER-ITEM : "ordered in"
    
    CUSTOMER {
        string customer_id
        string name
        string email
    }
    ORDER {
        string order_id
        string customer_id
        date order_date
    }
    PRODUCT {
        string product_id
        string name
        float price
    }
```

7. マインドマップ

完成イメージ

プロンプト例

Web開発に必要な技術スタックのマインドマップをMermaidで作成してください。
中心：Web開発
大分類：Frontend, Backend, Database
各分類の下に主要な技術とフレームワークを階層的に

出力例

```mermaid
mindmap
  root((Web開発))
    Frontend
      React
        コンポーネント
        フック
      Vue.js
        Composition API
        Vuex
    Backend
      Node.js
        Express
        NestJS
      PHP
        Laravel
        Symfony
    Database
      MySQL
      PostgreSQL
      MongoDB
```

8. 円グラフ

完成イメージ

プロンプト例

ソフトウェア開発プロジェクトの時間配分を円グラフで作成してください。
項目：コーディング（40%）、デバッグ（25%）、設計（20%）、テスト（10%）、ドキュメント（5%）

出力例

```mermaid
pie title 開発時間の割合
    "コーディング" : 40
    "デバッグ" : 25
    "設計" : 20
    "テスト" : 10
    "ドキュメント" : 5
```

作った図を修正する

図を作った後に「ここを変更したい！」というときも、AIに修正をお任せしましょう。

手順

1. mermaid … のコード範囲を選択
2. 修正内容をプロンプトで送信

選択方法

• GitHub Copilot (Visual Studio Code)：範囲選択 → Cmd + I（Mac）/ Ctrl + I（Win）
• Cursor：範囲選択 → Cmd + L（Mac）/ Ctrl + L（Win）
• ClaudeCode：範囲コピー → 通常ペースト
• Gemini CLI：範囲コピー → 通常ペースト

プロンプト例

認証失敗回数制限とアカウントロック機能を追加してください。
3回失敗したらアカウントロック状態になり、管理者による解除が必要な流れにして

修正前

修正後

変更点

stateDiagram-v2
    [*] --> 未ログイン
    未ログイン --> ログイン中 : ログイン試行
    ログイン中 --> ログイン済み : 認証成功
-   ログイン中 --> 未ログイン : 認証失敗
+   ログイン中 --> 認証失敗1回 : 1回目失敗
+   ログイン中 --> 認証失敗2回 : 2回目失敗
+   ログイン中 --> アカウントロック : 3回目失敗
+   認証失敗1回 --> ログイン中 : 再試行
+   認証失敗2回 --> ログイン中 : 再試行
+   認証失敗1回 --> ログイン済み : 認証成功
+   認証失敗2回 --> ログイン済み : 認証成功
+   アカウントロック --> 未ログイン : 管理者解除
    ログイン済み --> 未ログイン : ログアウト
    ログイン済み --> セッション期限切れ : タイムアウト
    セッション期限切れ --> 未ログイン : 自動ログアウト

このように、AIに修正内容を伝えると、図を簡単にアップデート できます。

まとめ

作図は時間がかかる作業でしたが、AIにプロンプトを投げるだけでMermaidの図がサクッと生成できる ようになったのは本当に便利ですね！

図を作るのに30分かけていた時間が、AIに任せれば数十秒で完了 します。浮いた時間で他の重要なタスクに集中できるのが最大のメリットですね！

さらに、修正も自然言語で対応できるので、ドキュメント作成の敷居がグッと下がった と感じています。

みなさんもぜひ、普段使っているAIツールで試してみてください。きっとドキュメント作成が楽しくなるはずです！✨