diagram-generator

図表ジェネレーター — アーキテクチャ、スキーマ、フロー、およびサポートされているすべての種類の図表について、Mermaid 図表とスタンドアロン HTML エクスポートを作成します。

図表の種類

種類	キーワード	最適な用途
フローチャート	flowchart TB/LR	意思決定のフロー、プロセス
シーケンス	sequenceDiagram	API のやり取り、プロトコル
クラス	classDiagram	OOP の構造、インターフェース
状態	stateDiagram-v2	ライフサイクル、状態マシン
ER	erDiagram	データベーススキーマ
ガント	gantt	プロジェクトのタイムライン
円グラフ	pie	分布、構成
マインドマップ	mindmap	階層型マインドマップ
タイムライン	timeline	時系列イベント
Git グラフ	gitGraph	ブランチの可視化
カンバン	kanban	タスクボード
クアドラント	quadrantChart	2x2 マトリクス

処理の制限

• ファイルのチャンク上限：図表あたり 1000 ファイル（厳守）
• 視覚的な上限：図表あたり最大約 200 ノード
• 大規模なコードベース：サブシステム／レイヤーごとに分割し、まず概要を生成してから詳細を作成します

スタンドアロン HTML 出力モード

トリガーフレーズ：「HTML としてエクスポート」「スタンドアロン図表」「インタラクティブな図表」

Mermaid.js CDN を埋め込み、ダーク／ライト切り替えボタンとレスポンシブ CSS（max-width: 1200px）を備えた自己完結型 HTML ファイルを生成します：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>TITLE</title>
    <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
    <script>
      mermaid.initialize({ startOnLoad: true, theme: 'dark' });
    </script>
    <style>
      body {
        font-family: system-ui;
        max-width: 1200px;
        margin: 2rem auto;
        background: #1e1e2e;
        color: #cdd6f4;
      }
    </style>
  </head>
  <body>
    <h1>TITLE</h1>
    <button
      onclick="let d=!d;mermaid.initialize({startOnLoad:false,theme:d?'dark':'default'});document.querySelector('.mermaid').removeAttribute('data-processed');mermaid.run()"
    >
      Toggle Theme
    </button>
    <div class="mermaid">MERMAID_CONTENT</div>
  </body>
</html>

デフォルト： ダークモード（background: #1e1e2e、color: #cdd6f4） 出力： .claude/context/artifacts/diagrams/{subject}-{YYYY-MM-DD}.html

出力先

• Mermaid ファイル：.claude/context/artifacts/diagrams/{subject}-{type}-{YYYY-MM-DD}.mmd
• HTML ファイル：.claude/context/artifacts/diagrams/{subject}-{YYYY-MM-DD}.html

絶対遵守事項

1. Mermaid 構文のみを使用します。ASCII アートや PlantUML は使用しません。
2. 1 つの図表につき 200 ノードを超えてはなりません。
3. .claude/context/artifacts/diagrams/ の外部に図表を作成してはなりません。
4. 自明でない接続にはすべてラベルを付けます。
5. 1000 ファイルの上限を厳守します。大規模なコードベースはチャンクに分割します。

Mermaid プラグインの生成パターン

Claude Code プラグインのパターンを使用して、コード分析から図表を生成します（参照：agentic-coding-school/mermaid-diagram-plugin）：

ステップ 1：コードベースの構造を分析する

# Identify components to diagram
pnpm search:code "class|interface|module|service|component" | head -50

ステップ 2：Mermaid ソースを生成する

Claude を使ってコード分析の結果を図表の構文に変換します。図表の種類と範囲を必ず指定して依頼します：

"Generate a Mermaid flowchart TB of the authentication flow in src/auth/"
"Create an ER diagram for the database tables in prisma/schema.prisma"
"Make a sequence diagram for the API request lifecycle in src/api/"

ステップ 3：インタラクティブ HTML をレンダリングする

共有可能なスタンドアロン図表には、完全な HTML テンプレートを使用します：

// Plugin invocation pattern (from mermaid-diagram-plugin)
const mermaidContent = `
flowchart TB
  A[User Request] --> B{Auth Check}
  B -- Valid --> C[Route Handler]
  B -- Invalid --> D[401 Response]
  C --> E[Database Query]
  E --> F[Response]
`;

// Render to interactive HTML
const html = `<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>${title}</title>
    <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
    <script>mermaid.initialize({ startOnLoad: true, theme: 'dark' });</script>
    <style>
      body { font-family: system-ui; max-width: 1200px; margin: 2rem auto;
             background: #1e1e2e; color: #cdd6f4; }
      .controls { margin-bottom: 1rem; }
      button { padding: 0.5rem 1rem; margin-right: 0.5rem; cursor: pointer; }
    </style>
  </head>
  <body>
    <h1>${title}</h1>
    <div class="controls">
      <button onclick="toggleTheme()">Toggle Theme</button>
      <button onclick="downloadSVG()">Download SVG</button>
    </div>
    <div class="mermaid">${mermaidContent}</div>
    <script>
      let dark = true;
      function toggleTheme() {
        dark = !dark;
        mermaid.initialize({ startOnLoad: false, theme: dark ? 'dark' : 'default' });
        document.querySelector('.mermaid').removeAttribute('data-processed');
        mermaid.run();
      }
      function downloadSVG() {
        const svg = document.querySelector('.mermaid svg');
        if (!svg) return;
        const blob = new Blob([svg.outerHTML], { type: 'image/svg+xml' });
        const a = document.createElement('a'); a.href = URL.createObjectURL(blob);
        a.download = '${title.replace(/\s+/g, '-')}.svg'; a.click();
      }
    </script>
  </body>
</html>`;

ステップ 4：出力を保存する

# Save interactive HTML to standard location
# .claude/context/artifacts/diagrams/{subject}-{YYYY-MM-DD}.html

エージェントからプラグインを呼び出す

エージェントがワークフローの一環として図表を必要とする場合：

// Invoke diagram-generator skill, then request specific type
Skill({ skill: 'diagram-generator' });

// Then describe what to diagram with context
// "Create a class diagram for src/lib/routing/ — show all classes and their relationships"

呼び出すタイミング

アーキテクチャ図、HTML エクスポート、マインドマップ、タイムライン、Git の可視化、カンバンボード、クアドラントチャートには、Skill({ skill: 'diagram-generator' }) を使用します。