diagram-generator by oimiragieo/agent-studio
npx skills add https://github.com/oimiragieo/agent-studio --skill diagram-generator| 类型 | 关键词 | 最佳适用场景 |
|---|---|---|
| 流程图 | flowchart TB/LR | 决策流程、处理过程 |
| 序列图 | sequenceDiagram | API 交互、协议 |
| 类图 | classDiagram | 面向对象结构、接口 |
| 状态图 | stateDiagram-v2 | 生命周期、状态机 |
| 实体关系图 | erDiagram |
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
| 数据库模式 |
| 甘特图 | gantt | 项目时间线 |
| 饼图 | pie | 分布、构成 |
| 思维导图 | mindmap | 层次化思维导图 |
| 时间线图 | timeline | 按时间顺序的事件 |
| Git 图 | gitGraph | 分支可视化 |
| 看板图 | kanban | 任务板 |
| 象限图 | quadrantChart | 2x2 矩阵 |
触发短语: "导出为 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
.claude/context/artifacts/diagrams/{subject}-{type}-{YYYY-MM-DD}.mmd.claude/context/artifacts/diagrams/{subject}-{YYYY-MM-DD}.html.claude/context/artifacts/diagrams/ 目录外编写图表。使用 Claude Code 插件模式(参考:agentic-coding-school/mermaid-diagram-plugin)从代码分析生成图表:
# Identify components to diagram
pnpm search:code "class|interface|module|service|component" | head -50
使用 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/"
对于独立的可共享图表,使用完整的 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>`;
# 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 可视化图、看板图和象限图。
每周安装量
94
仓库
GitHub 星标数
19
首次出现
2026 年 1 月 27 日
安全审计
安装于
github-copilot91
codex91
gemini-cli90
opencode90
kimi-cli89
amp89
| 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 |
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
.claude/context/artifacts/diagrams/{subject}-{type}-{YYYY-MM-DD}.mmd.claude/context/artifacts/diagrams/{subject}-{YYYY-MM-DD}.html.claude/context/artifacts/diagrams/.Generate diagrams from code analysis using the Claude Code plugin pattern (ref: agentic-coding-school/mermaid-diagram-plugin):
# Identify components to diagram
pnpm search:code "class|interface|module|service|component" | head -50
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/"
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>`;
# Save interactive HTML to standard location
# .claude/context/artifacts/diagrams/{subject}-{YYYY-MM-DD}.html
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"
Skill({ skill: 'diagram-generator' }) for architecture diagrams, HTML exports, mindmaps, timelines, git visualizations, kanban boards, and quadrant charts.
Weekly Installs
94
Repository
GitHub Stars
19
First Seen
Jan 27, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykPass
Installed on
github-copilot91
codex91
gemini-cli90
opencode90
kimi-cli89
amp89
Claude技能创建器指南:构建模块化AI技能包,优化工作流与工具集成
5,700 周安装
WebSocket 安全最佳实践:预防 CSWSH 攻击与连接管理指南
126 周安装
macOS原生开发技能 - 提升Claude在macOS平台的集成与自动化能力
134 周安装
小说结局诊断指南:如何写出既必然又惊喜的完美结局 | 写作技巧与问题解决方案
93 周安装
GitHub自动化工具:通过Rube MCP与Composio自动化管理仓库、问题、PR和CI/CD
156 周安装
Hyperliquid 机会扫描器 v5:AI 驱动的量化交易工具,低代币消耗筛选永续合约机会
128 周安装
scenario-analyzer:基于AI的新闻头条中长期投资情景分析工具 | 金融科技与投资分析
170 周安装