【保存版】Claude CLIだけで図解を自動生成！Mermaid/PlantUML/D2/Graphviz徹底比較

    graph LR
    A[この記事] --> B[テキストベース図解の<br>考え方が分かる]
    A --> C[4つのツールの<br>使い分けが分かる]
    A --> D[Claude CLIで図を<br>生成するプロンプトが手に入る]
    A --> E[コピペで使える<br>テンプレート集]
  

    graph TB
    subgraph GUI["❌ GUIツールの課題"]
        G1[ブラウザを開く必要がある]
        G2[マウス操作が必要]
        G3[差分管理が困難]
        G4[共同編集時にコンフリクト]
    end

    subgraph Text["✅ テキストベース図解"]
        T1[ターミナルで完結]
        T2[Gitで差分管理]
        T3[コードレビュー可能]
        T4[AIによる自動生成]
    end

    GUI -.->|"移行"| Text
  

    # 図の変更もコードレビューの対象に
$ git diff docs/architecture.mmd

-    A --> B[旧サービス]
+    A --> B[新サービス]
+    A --> C[追加されたサービス]
  

    sequenceDiagram
    participant User as エンジニア
    participant Claude as Claude CLI
    participant File as ファイル
    participant Render as レンダラー

    User->>Claude: 仕様を伝える
    Claude->>File: 図のソースコード（DSL）を生成
    File->>Render: DSLを画像に変換
    Render->>User: 完成した図

    Note over User,Claude: AIが生成するのは<br>「画像」ではなく「ソースコード」
  

    ユーザー → フロントエンド → APIサーバー → データベース
1. ログインリクエスト
2. 認証処理
3. トークン発行
4. レスポンス
  

    sequenceDiagram
    autonumber
    participant U as User
    participant F as Frontend
    participant A as API Server
    participant D as Database

    U->>F: ログイン情報入力
    F->>A: POST /auth/login
    A->>D: ユーザー検索
    D-->>A: ユーザー情報
    A->>A: パスワード検証
    A-->>F: JWT Token
    F-->>U: ログイン成功
  

    [ユーザー] → [Webサーバー] → [APIサーバー] → [データベース]
              ↓
           [キャッシュ]
  

    graph LR
    subgraph Client
        U[User]
    end

    subgraph Web Layer
        W[Web Server]
    end

    subgraph App Layer
        A[API Server]
        C[(Cache)]
    end

    subgraph Data Layer
        D[(Database)]
    end

    U --> W
    W --> A
    A --> C
    A --> D
  

    graph TB
    subgraph "用途で分類"
        direction TB

        subgraph doc["📄 ドキュメント向け"]
            Mermaid[Mermaid<br>Markdown親和性◎]
        end

        subgraph uml["📐 本格UML"]
            PlantUML[PlantUML<br>UML標準準拠]
        end

        subgraph arch["🏗️ アーキテクチャ図"]
            D2[D2<br>モダンDSL]
        end

        subgraph graph["🔗 グラフ理論"]
            Graphviz[Graphviz<br>古典的基盤]
        end
    end

    Mermaid -.->|"内部で利用"| Graphviz
    D2 -.->|"レイアウトエンジン"| Graphviz
  

    # Node.jsが必要
npm install -g @mermaid-js/mermaid-cli

# 確認
mmdc --version

# 使い方
mmdc -i input.mmd -o output.png
mmdc -i input.mmd -o output.svg
  

    # Javaが必要
# macOS
brew install plantuml

# Ubuntu/Debian
sudo apt install plantuml

# 確認
plantuml -version

# 使い方
plantuml input.puml           # PNG生成
plantuml -tsvg input.puml     # SVG生成
  

    # macOS
brew install d2

# Linux（公式インストールスクリプト）
curl -fsSL https://d2lang.com/install.sh | sh

# 確認
d2 --version

# 使い方
d2 input.d2 output.png
d2 input.d2 output.svg
d2 --watch input.d2 output.svg  # ホットリロード
  

    # macOS
brew install graphviz

# Ubuntu/Debian
sudo apt install graphviz

# 確認
dot -V

# 使い方
dot -Tpng input.dot -o output.png
dot -Tsvg input.dot -o output.svg
  

    # Claude CLIのインストール（公式手順に従う）
# https://docs.anthropic.com/en/docs/claude-cli

# 基本的な使い方
claude "Mermaidでフローチャートを書いて"

# ファイル内容を渡す
cat spec.md | claude "この仕様からシーケンス図を生成して"

# 結果をファイルに保存
claude "認証フローのMermaid図を書いて" > auth-flow.mmd
  

    graph LR
    A[Mermaidの強み] --> B[Markdown親和性]
    A --> C[学習コスト低]
    A --> D[豊富な図の種類]
    A --> E[ブラウザでプレビュー可]
  

    flowchart TD
    Start([開始]) --> Input[ユーザー入力]
    Input --> Validate{入力検証}
    Validate -->|有効| Process[処理実行]
    Validate -->|無効| Error[エラー表示]
    Error --> Input
    Process --> Result[結果出力]
    Result --> End([終了])
  

    ```mermaid
flowchart TD
    Start([開始]) --> Input[ユーザー入力]
    Input --> Validate{入力検証}
    Validate -->|有効| Process[処理実行]
    Validate -->|無効| Error[エラー表示]
    Error --> Input
    Process --> Result[結果出力]
    Result --> End([終了])
```
  

    sequenceDiagram
    autonumber
    participant C as Client
    participant A as API Gateway
    participant S as Auth Service
    participant D as Database

    C->>A: POST /login
    A->>S: 認証リクエスト
    S->>D: ユーザー検索
    D-->>S: ユーザー情報
    S-->>A: JWTトークン
    A-->>C: 200 OK + Token
  

    erDiagram
    USER ||--o{ ORDER : places
    USER {
        int id PK
        string name
        string email
    }
    ORDER ||--|{ ORDER_ITEM : contains
    ORDER {
        int id PK
        int user_id FK
        date created_at
    }
    ORDER_ITEM {
        int id PK
        int order_id FK
        int product_id FK
        int quantity
    }
    PRODUCT ||--o{ ORDER_ITEM : "is in"
    PRODUCT {
        int id PK
        string name
        int price
    }
  

    cat << 'EOF' | claude "この仕様からMermaidのシーケンス図を生成してください。コードブロックのみ出力してください。"
## ログイン仕様
1. ユーザーがメールアドレスとパスワードを入力
2. フロントエンドがAPIサーバーにPOSTリクエスト
3. APIサーバーがDBでユーザーを検索
4. パスワードをbcryptで検証
5. 成功時：JWTトークンを発行してレスポンス
6. 失敗時：401エラーを返却
EOF
  

    claude "次の処理フローをMermaidのflowchartで図解してください：
1. ファイルをアップロード
2. ファイル形式をチェック（JPG/PNG/GIFのみ許可）
3. 不正なら「形式エラー」を表示して終了
4. ファイルサイズをチェック（5MB以下のみ）
5. 超過なら「サイズエラー」を表示して終了
6. S3にアップロード
7. URLをDBに保存
8. 成功レスポンスを返却"
  

    cat schema.sql | claude "このSQLスキーマからMermaidのER図を生成してください"
  

    graph LR
    A[PlantUMLの強み] --> B[UML標準準拠]
    A --> C[細かいスタイル制御]
    A --> D[長期保守向き]
    A --> E[豊富なドキュメント]
  

    @startuml
title 認証フロー

actor User
participant "Frontend" as FE
participant "API Server" as API
database "Database" as DB

User -> FE: ログインフォーム送信
FE -> API: POST /api/auth/login
API -> DB: SELECT user WHERE email = ?
DB --> API: User record
API -> API: bcrypt.compare(password)
alt 認証成功
    API -> API: JWT生成
    API --> FE: 200 OK + Token
    FE --> User: ダッシュボードへリダイレクト
else 認証失敗
    API --> FE: 401 Unauthorized
    FE --> User: エラーメッセージ表示
end

@enduml
  

    @startuml
title ドメインモデル

class User {
  - id: UUID
  - email: String
  - passwordHash: String
  --
  + login(password: String): Token
  + updateProfile(data: ProfileData): void
}

class Order {
  - id: UUID
  - userId: UUID
  - status: OrderStatus
  - createdAt: DateTime
  --
  + addItem(product: Product, qty: Int): void
  + cancel(): void
  + complete(): void
}

class Product {
  - id: UUID
  - name: String
  - price: Money
  - stock: Int
  --
  + decreaseStock(qty: Int): void
}

enum OrderStatus {
  PENDING
  CONFIRMED
  SHIPPED
  DELIVERED
  CANCELLED
}

User "1" --> "*" Order : places
Order "*" --> "*" Product : contains
Order --> OrderStatus

@enduml
  

    @startuml
title システムアーキテクチャ

package "Frontend" {
  [React App] as react
  [Next.js SSR] as next
}

package "Backend" {
  [API Gateway] as gateway
  [Auth Service] as auth
  [User Service] as user
  [Order Service] as order
}

package "Data Layer" {
  database "PostgreSQL" as pg
  database "Redis" as redis
  queue "RabbitMQ" as mq
}

package "External" {
  cloud "AWS S3" as s3
  cloud "Stripe" as stripe
}

react --> gateway : HTTPS
next --> gateway : HTTPS
gateway --> auth
gateway --> user
gateway --> order
auth --> redis : セッション
user --> pg
order --> pg
order --> mq : 非同期処理
order --> stripe : 決済
user --> s3 : 画像アップロード

@enduml
  

    cat << 'EOF' | claude "このクラス設計からPlantUMLのクラス図を生成してください。@startumlと@endumlで囲んでください。"
## Userクラス
- プロパティ: id, email, name, createdAt
- メソッド: updateProfile(), changePassword()

## Postクラス
- プロパティ: id, title, content, authorId, publishedAt
- メソッド: publish(), unpublish(), edit()

## Commentクラス
- プロパティ: id, postId, authorId, content, createdAt
- メソッド: edit(), delete()

## 関係
- UserはPostを複数持つ（1対多）
- PostはCommentを複数持つ（1対多）
- UserはCommentを複数持つ（1対多）
EOF
  

    cat openapi.yaml | claude "このOpenAPI仕様の主要なエンドポイントをPlantUMLのシーケンス図で表現してください"
  

    # 1. Claude CLIでPlantUMLコードを生成
claude "ユーザー登録フローをPlantUMLで" > register.puml

# 2. PlantUMLでレンダリング
plantuml register.puml           # PNG生成
plantuml -tsvg register.puml     # SVG生成

# 3. 確認
open register.png  # macOS
xdg-open register.png  # Linux
  

    graph LR
    A[D2の強み] --> B[モダンな構文]
    A --> C[美しいデフォルトスタイル]
    A --> D[アーキテクチャ図に特化]
    A --> E[ホットリロード対応]
  

    direction: right

users: Users {
  icon: https://icons.terrastruct.com/essentials/003-user.svg
}

load_balancer: Load Balancer {
  icon: https://icons.terrastruct.com/aws/Networking%20&%20Content%20Delivery/Elastic-Load-Balancing.svg
}

web: Web Servers {
  icon: https://icons.terrastruct.com/aws/Compute/Amazon-EC2.svg

  web1: Server 1
  web2: Server 2
  web3: Server 3
}

api: API Servers {
  icon: https://icons.terrastruct.com/aws/Compute/AWS-Lambda.svg

  api1: Lambda 1
  api2: Lambda 2
}

cache: Redis Cache {
  icon: https://icons.terrastruct.com/aws/Database/Amazon-ElastiCache.svg
}

db: PostgreSQL {
  icon: https://icons.terrastruct.com/aws/Database/Amazon-RDS.svg

  primary: Primary
  replica: Read Replica

  primary -> replica: Replication
}

storage: S3 Storage {
  icon: https://icons.terrastruct.com/aws/Storage/Amazon-Simple-Storage-Service-S3.svg
}

users -> load_balancer: HTTPS
load_balancer -> web.web1
load_balancer -> web.web2
load_balancer -> web.web3
web -> api
api -> cache: Read/Write
api -> db.primary: Write
api -> db.replica: Read
api -> storage: Upload/Download
  

    title: マイクロサービスアーキテクチャ {
  near: top-center
}

gateway: API Gateway {
  shape: hexagon
}

auth: Auth Service {
  jwt: JWT Handler
  oauth: OAuth Provider
}

user: User Service {
  crud: CRUD Operations
  profile: Profile Manager
}

order: Order Service {
  cart: Cart Manager
  checkout: Checkout
}

payment: Payment Service {
  stripe: Stripe Integration
  invoice: Invoice Generator
}

notification: Notification Service {
  email: Email Sender
  push: Push Notification
}

queue: Message Queue {
  shape: queue
}

db: Databases {
  user_db: Users DB {
    shape: cylinder
  }
  order_db: Orders DB {
    shape: cylinder
  }
}

gateway -> auth: Authenticate
gateway -> user: User API
gateway -> order: Order API

auth -> user: Validate User
order -> payment: Process Payment
payment -> notification: Send Receipt
order -> notification: Order Updates

order -> queue: Async Events
queue -> notification: Consume

user -> db.user_db
order -> db.order_db
  

    start: Start {
  shape: oval
}

input: Receive File Upload

validate_type: Check File Type {
  shape: diamond
}

validate_size: Check File Size {
  shape: diamond
}

type_error: Show Type Error {
  style: {
    fill: "#ffcccc"
  }
}

size_error: Show Size Error {
  style: {
    fill: "#ffcccc"
  }
}

upload: Upload to S3

save_db: Save URL to DB

success: Return Success {
  style: {
    fill: "#ccffcc"
  }
}

end: End {
  shape: oval
}

start -> input
input -> validate_type
validate_type -> type_error: Invalid
validate_type -> validate_size: Valid
type_error -> end
validate_size -> size_error: Too Large
validate_size -> upload: OK
size_error -> end
upload -> save_db
save_db -> success
success -> end
  

    cat << 'EOF' | claude "このインフラ構成をD2形式で図解してください。AWSアイコンは使わず、シンプルな形状で表現してください。"
## インフラ構成
- フロントエンド: CloudFront + S3で静的ホスティング
- バックエンド: ECS Fargate で3台のコンテナ
- DB: Aurora PostgreSQL（Writer 1台 + Reader 2台）
- キャッシュ: ElastiCache Redis
- キュー: SQS
- ストレージ: S3
EOF
  

    claude "ECサイトのマイクロサービス構成をD2で図解してください。
サービス: API Gateway, 認証, ユーザー管理, 商品管理, 注文管理, 決済, 通知
通信: 同期はHTTPS、非同期はメッセージキュー経由"
  

    graph TB
    Graphviz[Graphviz / DOT] --> Mermaid
    Graphviz --> D2
    Graphviz --> Other[その他のツール]

    style Graphviz fill:#f9f,stroke:#333,stroke-width:2px
  

    digraph G {
    // グラフの設定
    rankdir=LR;
    node [shape=box];

    // ノード定義
    A [label="開始"];
    B [label="処理1"];
    C [label="処理2"];
    D [label="終了"];

    // エッジ定義
    A -> B;
    B -> C;
    C -> D;
}
  

    digraph dependencies {
    rankdir=TB;
    node [shape=box, style=filled, fillcolor=lightblue];

    // パッケージ
    app [label="app", fillcolor=lightgreen];
    core [label="@myapp/core"];
    utils [label="@myapp/utils"];
    api [label="@myapp/api"];
    ui [label="@myapp/ui"];

    // 依存関係
    app -> core;
    app -> api;
    app -> ui;
    core -> utils;
    api -> core;
    api -> utils;
    ui -> core;
    ui -> utils;
}
  

    digraph state_machine {
    rankdir=LR;

    // 状態のスタイル
    node [shape=circle];

    // 初期・終了状態
    start [shape=point];
    end [shape=doublecircle, label=""];

    // 状態
    idle [label="待機中"];
    processing [label="処理中"];
    completed [label="完了"];
    error [label="エラー"];

    // 遷移
    start -> idle;
    idle -> processing [label="開始"];
    processing -> completed [label="成功"];
    processing -> error [label="失敗"];
    completed -> end;
    error -> idle [label="リトライ"];
    error -> end [label="中断"];
}
  

    cat package.json | claude "このpackage.jsonの依存関係をGraphviz DOT形式で図解してください。devDependenciesは別の色にしてください。"
  

    tree -d src/ | claude "このディレクトリ構造をGraphviz DOT形式で木構造として表現してください"
  

    flowchart LR
    A[仕様書<br>Markdown/テキスト] --> B[Claude CLI]
    B --> C[図のDSL<br>Mermaid/PlantUML/D2/DOT]
    C --> D[レンダリングツール<br>mmdc/plantuml/d2/dot]
    D --> E[画像/SVG]
  

    # 仕様書を渡してMermaid生成
cat spec.md | claude "この仕様からMermaidのシーケンス図を生成。コードブロックのみ出力。" > sequence.mmd

# Mermaid CLIでレンダリング
mmdc -i sequence.mmd -o sequence.png
  

    # 直接プロンプトを渡す
claude "3層アーキテクチャをMermaidで" > architecture.mmd && mmdc -i architecture.mmd -o architecture.png
  

    # Pythonクラスからクラス図を生成
cat models.py | claude "このPythonコードからPlantUMLのクラス図を生成" > class-diagram.puml
plantuml class-diagram.puml
  

    # 複数のAPIエンドポイントからシーケンス図を一括生成
for file in api/*.py; do
  name=$(basename "$file" .py)
  cat "$file" | claude "このAPIハンドラのフローをMermaidシーケンス図で" > "docs/diagrams/${name}.mmd"
done
  

    # Before
git show HEAD~1:src/architecture.ts | claude "このコードのアーキテクチャをD2で" > before.d2

# After
cat src/architecture.ts | claude "このコードのアーキテクチャをD2で" > after.d2

# 両方をレンダリングして比較
d2 before.d2 before.png
d2 after.d2 after.png
  

    claude "以下の処理フローをMermaidのシーケンス図で表現してください。

条件:
- 参加者は日本語で命名
- autonumberを付与
- エラーケースもaltで表現

処理フロー:
$FLOW_DESCRIPTION"
  

    claude "以下のテーブル定義からMermaidのER図を生成してください。

条件:
- リレーションは ||--o{ などの記法を正しく使用
- 主キーにはPK、外部キーにはFKを明記

テーブル:
$TABLE_DEFINITIONS"
  

    claude "以下のシステム構成をD2で図解してください。

条件:
- 外部サービスは雲の形で表現
- データベースは円柱形で表現
- 通信プロトコルをラベルに記載

構成:
$SYSTEM_ARCHITECTURE"
  

    claude "以下のビジネスロジックをMermaidのflowchartで表現してください。

条件:
- 開始・終了は楕円
- 条件分岐は菱形
- 処理は長方形
- Yes/Noを日本語で

ロジック:
$BUSINESS_LOGIC"
  

    sequenceDiagram
    participant Dev as 開発者
    participant Claude as Claude CLI
    participant Editor as エディタ/ブラウザ
    participant CLI as レンダリングCLI

    Dev->>Claude: プロンプト + 仕様
    Claude->>Dev: DSLコード
    Dev->>Editor: DSLをプレビュー

    alt 修正が必要
        Dev->>Dev: 手動で微調整
    end

    Dev->>CLI: レンダリング実行
    CLI->>Dev: PNG/SVG出力
  

    flowchart TD
    Start([図を作りたい]) --> Q1{Markdownに<br>直接埋め込む?}

    Q1 -->|はい| Mermaid[✅ Mermaid]
    Q1 -->|いいえ| Q2{UML標準に<br>準拠が必要?}

    Q2 -->|はい| PlantUML[✅ PlantUML]
    Q2 -->|いいえ| Q3{インフラ/アーキ図?}

    Q3 -->|はい| D2[✅ D2]
    Q3 -->|いいえ| Q4{複雑なグラフ?}

    Q4 -->|はい| Graphviz[✅ Graphviz]
    Q4 -->|いいえ| Simple[Mermaidで十分]

    Simple --> Mermaid
  

    graph TB
    subgraph "迷ったらMermaid"
        M1[学習コストを抑えたい]
        M2[Markdown/Hugoで使う]
        M3[GitHub/GitLabで見せたい]
        M4[とりあえず図を作りたい]
    end

    subgraph "PlantUMLを選ぶとき"
        P1[UML標準が求められる]
        P2[細かいスタイル制御したい]
        P3[既存のPlantUML資産がある]
    end

    subgraph "D2を選ぶとき"
        D1[インフラ/アーキ図メイン]
        D2[モダンな見た目が欲しい]
        D3[ホットリロードで編集したい]
    end

    subgraph "Graphvizを選ぶとき"
        G1[既存DOT資産がある]
        G2[複雑なグラフ理論的な図]
        G3[他ツールで無理だった]
    end
  

    graph LR
    A[問題] --> B[対策]

    B --> C[サブグラフで分割]
    B --> D[rankdirを変える]
    B --> E[図を複数に分ける]
  

    graph TB
    subgraph Frontend
        A[React] --> B[Next.js]
    end
    subgraph Backend
        C[API] --> D[DB]
    end
    Frontend --> Backend
  

    graph LR
    A["特殊文字は引用符で囲む"]
    B["コロン(:)は要注意"]
    C["改行は<br>で"]
  

    graph TB
    subgraph 従来["従来のワークフロー"]
        O1[GUIツールを開く] --> O2[マウスで描画]
        O2 --> O3[画像をエクスポート]
        O3 --> O4[ドキュメントに貼り付け]
    end

    subgraph 新時代["Claude CLI時代"]
        N1[仕様をテキストで記述] --> N2[Claude CLIで図DSL生成]
        N2 --> N3[必要に応じて微調整]
        N3 --> N4[CLIでレンダリング or Markdownに埋め込み]
    end

    従来 -.->|"パラダイムシフト"| 新時代
  

    graph LR
    subgraph 推奨["迷ったらこれ"]
        Mermaid[Mermaid]
    end

    subgraph 用途別["用途で選ぶ"]
        PlantUML[PlantUML<br>本格UML]
        D2[D2<br>アーキ図]
        Graphviz[Graphviz<br>複雑なグラフ]
    end

    Start([図を作りたい]) --> Mermaid
    Mermaid -.->|"足りなければ"| 用途別