---

name: generate-diagram description: | 解説用の図解を生成するスキル（Mermaid記法またはnanobanana経由）。 「図解を生成」「フローチャートを作成」「シーケンス図」「アーキテクチャ図」などのリクエストで使用。

図解生成スキル

解説用の図解を生成します（Mermaid記法またはnanobanana経由）。

タスク

ユーザーのリクエストに基づいて、適切な形式の図解を生成してください。

実行方法

以下のスクリプトを使用して図解を生成します：

Copy./scripts/generate-diagram.sh "<説明>" [オプション]

パラメータ

利用可能な形式

• mermaid: Mermaid記法（編集可能なテキスト形式）
• nanobanana: nanobanana /diagram（画像出力）
• drawio: draw.io互換形式（nanobanana経由）
• svg: SVG形式（nanobanana経由）

図解タイプ

Mermaid形式

• flowchart: フローチャート（プロセスフロー）
• sequence: シーケンス図（コンポーネント間の相互作用）
• class: クラス図（オブジェクト指向構造）
• state: ステート図（状態遷移）
• er: ER図（データベース構造）
• gantt: ガントチャート（プロジェクトタイムライン）

nanobanana形式

• flowchart: フローチャート
• architecture: アーキテクチャ図
• network: ネットワーク図
• sequence: シーケンス図
• wireframe: ワイヤーフレーム

出力形式

Mermaid形式

Copy```mermaid
flowchart TD
    A[開始] --> B[処理]
    B --> C[終了]
```

Copy
### nanobanana形式
```markdown
![<説明>](./assets/diagrams/<ファイル名>_001.png)

使用例

基本的な使用（Mermaid）

Copy./scripts/generate-diagram.sh "ユーザー認証フローを示すシーケンス図"

Mermaid形式でタイプ指定

Copy./scripts/generate-diagram.sh -f mermaid -t sequence "API呼び出しの流れ"

nanobanana形式でアーキテクチャ図

Copy./scripts/generate-diagram.sh -f nanobanana -t architecture "マイクロサービスアーキテクチャ"

draw.io形式

Copy./scripts/generate-diagram.sh -f drawio "データベース設計"

Mermaid記法の例

フローチャート

Copyflowchart TD
    A[ユーザー] --> B{認証済み?}
    B -->|Yes| C[ダッシュボード]
    B -->|No| D[ログインページ]

シーケンス図

CopysequenceDiagram
    participant U as ユーザー
    participant A as API
    participant D as DB
    U->>A: リクエスト
    A->>D: クエリ
    D-->>A: 結果
    A-->>U: レスポンス

ER図

CopyerDiagram
    USER ||--o{ POST : writes
    USER {
        int id PK
        string name
        string email
    }
    POST {
        int id PK
        string title
        text content
        int user_id FK
    }

前提条件

Mermaid形式

• 特になし（テキストベース）

nanobanana形式

• nanobanana 拡張がインストールされていること
• Google Account で認証済みであること

セットアップ: ./scripts/setup-nanobanana.sh