capability:diagram:generate

目的

Mermaid、Graphviz、D2、PlantUML、または Python diagrams ソースコードからローカルレンダラーを使用してダイアグラムを PNG ファイルにレンダリングします。インターネットアクセスは不要です。

レンダラー

タイプ	CLI ツール	自動検出条件	最適な用途	使用時期
mermaid	mmdc (npm)	graph、sequenceDiagram、C4Context など	シーケンス図、フローチャート、シンプルな C4 図	Markdown/ドキュメント内のクイックインラインダイアグラム、シーケンスフロー、既に Markdown 形式の場合
graphviz	dot (graphviz)	digraph、graph {、strict digraph	一般的なグラフ、依存関係ツリー	splines=ortho エッジルーティングまたは正確な DOT 制御が必要な場合
d2	d2 CLI	明示的な --type d2 のみ	アーキテクチャダイアグラム — 最もクリーンなレイアウト	サービス/コンテナアーキテクチャダイアグラムのデフォルトの選択肢
plantuml	plantuml CLI	@startuml	Person/System アイコン付きの完全な C4 モデル	公式な C4 表記法とアイコンが必要な場合 (C4Context、C4Container)
diagrams	python3 + diagrams pkg	from diagrams import、from diagrams.	AWS/Azure/GCP アイコン付きのクラウドインフラ	AWS、Azure、GCP、Kubernetes インフラストラクチャの可視化

実行

1. レンダラーを検出: --type を使用するか、コード構文から自動検出します
2. PNG を生成: ./scripts/generate-diagram.py <code> <output> [type] を実行します
3. パスを返す: PNG が --output に書き込まれたことを確認します

D2 に関する注釈: デフォルトで --layout=elk を使用してエッジ交差を最小化します。

委譲

必須: このコマンドのフロントマターで定義されたエージェントを必ず呼び出してください。

• zzaia-document-specialist — ダイアグラム生成ワークフローを実行します

ワークフロー

sequenceDiagram
    participant U as User
    participant C as Command
    participant P as Python Script
    participant F as File System

    U->>C: /capability:diagram:generate --code <code> --output <path> [--type]
    C->>P: Execute generate-diagram.py
    P->>P: Auto-detect or use explicit renderer
    P->>F: Write PNG to output path
    P-->>C: PNG path + size
    C-->>U: Diagram ready

例

# Mermaid — クイックインラインシーケンス/フローチャート (自動検出)
/capability:diagram:generate --code "graph TD\n A --> B --> C" --output ./diagrams/flow.png

# Graphviz — 依存関係ツリー、グラフ分析、splines=ortho ルーティング
/capability:diagram:generate --type graphviz --code "digraph { rankdir=TB; splines=ortho; A -> B -> C }" --output ./diagrams/arch.png

# D2 + ELK — サービス/コンテナアーキテクチャダイアグラムのデフォルトの選択肢
/capability:diagram:generate --type d2 --code "direction: down\nwasm -> bff: GraphQL\nbff -> order: HTTP/Dapr\nbff -> identity: HTTP/Dapr" --output ./diagrams/arch.png

# PlantUML — Person/System/Container アイコン付きの公式な C4 モデル
/capability:diagram:generate --type plantuml --code "@startuml\n!include C4Container.puml\nPerson(u, \"User\")\nSystem(s, \"System\")\nRel(u, s, \"Uses\")\n@enduml" --output ./diagrams/c4.png

# Diagrams (Python) — AWS/Azure/GCP/Kubernetes クラウドインフラストラクチャ (プロバイダーアイコン付き)
/capability:diagram:generate --type diagrams --code "from diagrams import Diagram, Cluster\nfrom diagrams.azure.compute import AppService\nfrom diagrams.azure.database import SQLDatabase\nwith Diagram('CoffeeShop'):\n    with Cluster('Services'):\n        svc = AppService('Order')\n    db = SQLDatabase('PostgreSQL')\n    svc >> db" --output ./diagrams/infra.png

出力

• --output パスの PNG ファイル
• 使用されたレンダラーとファイルサイズを記載した確認メッセージ