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”、“独立图表”、“交互式图表”

生成一个自包含的 HTML 文件，其中嵌入 Mermaid.js CDN、深色/浅色切换按钮，以及响应式 CSS（max-width: 1200px）：

<!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. 每个图表的节点数不得超过 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

从 Agent 调用插件

当 Agent 需要在工作流中生成图表时：

// 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' })。