Mermaid 图表生成器 - 支持12种图表类型，代码转可视化图表工具

diagram-generator by oimiragieo/agent-studio

94 周安装量

19 GitHub Stars

GitHub

安装命令

npx skills add https://github.com/oimiragieo/agent-studio --skill diagram-generator

数据可视化代码生成技术文档

🇨🇳中文介绍

图表类型

类型	关键词	最佳适用场景
流程图	`flowchart TB/LR`	决策流程、处理过程
序列图	`sequenceDiagram`	API 交互、协议
类图	`classDiagram`	面向对象结构、接口
状态图	`stateDiagram-v2`	生命周期、状态机
实体关系图	`erDiagram`

广告位招租

在这里展示您的产品或服务

触达数万 AI 开发者，精准高效

联系我们

独立 HTML 输出模式

触发短语： "导出为 HTML"、"独立图表"、"交互式图表"

生成一个包含嵌入式 Mermaid.js CDN、明暗主题切换按钮和响应式 CSS（最大宽度：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

仅使用 Mermaid 语法 — 不使用 ASCII 艺术或 PlantUML。
每个图表节点数绝不超过 200 个。
绝不在 .claude/context/artifacts/diagrams/ 目录外编写图表。
为所有非显而易见的连接添加标签。
强制执行 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"

Skill({ skill: 'diagram-generator' }) 适用于架构图、HTML 导出、思维导图、时间线图、Git 可视化图、看板图和象限图。

2026 年 1 月 27 日

🇺🇸English

Diagram Types

Type	Keyword	Best For
Flowchart	`flowchart TB/LR`	Decision flows, processes
Sequence	`sequenceDiagram`	API interactions, protocols
Class	`classDiagram`	OOP structure, interfaces
State	`stateDiagram-v2`	Lifecycle, state machines
ER	`erDiagram`	Database schemas
Gantt	`gantt`	Project timelines
Pie	`pie`	Distribution, composition
Mindmap	`mindmap`	Hierarchical mind maps
Timeline	`timeline`	Chronological events
Git Graph	`gitGraph`	Branch visualization
Kanban	`kanban`	Task boards
Quadrant	`quadrantChart`	2x2 matrix

Processing Limits

File chunk limit: 1000 files per diagram (HARD LIMIT)
Visual limit: ~200 nodes max per diagram
Large codebases: split by subsystem/layer; generate overview first then details

Standalone HTML Output Mode

Trigger phrases: "export as HTML", "standalone diagram", "interactive diagram"

Generate a self-contained HTML file with embedded Mermaid.js CDN, dark/light toggle button, and responsive 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>

Default: dark mode (background: #1e1e2e, color: #cdd6f4) Output: .claude/context/artifacts/diagrams/{subject}-{YYYY-MM-DD}.html

Output Location

Mermaid files: .claude/context/artifacts/diagrams/{subject}-{type}-{YYYY-MM-DD}.mmd
HTML files: .claude/context/artifacts/diagrams/{subject}-{YYYY-MM-DD}.html

Iron Laws

Mermaid syntax only — no ASCII art or PlantUML.
Never exceed 200 nodes per diagram.
Never write diagrams outside .claude/context/artifacts/diagrams/.
Label all non-obvious connections.
Enforce 1000-file hard limit — chunk large codebases.

Mermaid Plugin Generation Pattern

Generate diagrams from code analysis using the Claude Code plugin pattern (ref: agentic-coding-school/mermaid-diagram-plugin):

Step 1: Analyze Codebase Structure

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

Step 2: Generate Mermaid Source

Use Claude to transform code analysis into diagram syntax. Always request a specific diagram type and scope:

"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/"

Step 3: Render Interactive HTML

For standalone shareable diagrams, use the full HTML template:

// 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>`;

Step 4: Save Output

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

Plugin Invocation from Agent

When an agent needs a diagram as part of a workflow:

// 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"

When to invoke

Skill({ skill: 'diagram-generator' }) for architecture diagrams, HTML exports, mindmaps, timelines, git visualizations, kanban boards, and quadrant charts.

Weekly Installs

Repository

oimiragieo/agent-studio

GitHub Stars

First Seen

Jan 27, 2026

Security Audits

Gen Agent Trust HubPass SocketPass SnykPass

Installed on

github-copilot91

codex91

gemini-cli90

opencode90

kimi-cli89

amp89

Claude技能创建器指南：构建模块化AI技能包，优化工作流与工具集成

5,700 周安装