Code-to-Diagram Skill

分析指定目录或文件的源代码，提取控制流 / 数据流逻辑，输出两个文件：

Markdown 文档（.md）：包含图表源码
渲染后的 PNG 图片（高清）

支持两种渲染引擎：

引擎	输入	渲染方式	适用场景
------	------	----------	----------
Mermaid（默认）	`.mmd`	beautiful-mermaid → SVG → rsvg-convert → PNG	流程图、时序图、类图、状态图、ER 图、XY 图
SVG	`.svg`	rsvg-convert → PNG	架构图、AI 系统图、需要品牌图标或定制风格的图表

> Mermaid 引擎默认使用 beautiful-mermaid 渲染，提供 15 种精美主题。

> 不支持的图表类型（gantt、mindmap、pie、journey、gitgraph）自动回退到 mmdc。

第一步 —— 读取并分析代码

使用 Read、Glob、Grep 工具理解代码结构，识别主要逻辑模式。

第二步 —— 选择引擎

使用 Mermaid 引擎

标准流程图、时序图、类图、状态图、ER 图、XY 图表
用户未要求特定视觉风格
快速、美观的主题化图表

使用 SVG 引擎

架构图需要产品图标（OpenAI、AWS、PostgreSQL 等）
AI/Agent 系统图需要语义图形（六边形 Agent、圆柱向量库等）
用户要求特定风格（dark-terminal、blueprint、glassmorphism 等）
需要精细布局控制

第三步 A —— Mermaid 路径

生成 Mermaid 源码

根据分析结果编写 Mermaid 图表源码。

代码模式	推荐 Mermaid 图表类型
---------	----------------------
状态机 / 工作流	`flowchart TD` 或 `stateDiagram-v2`
类继承关系	`classDiagram`
接口 / 消息传递	`sequenceDiagram`
实体关系	`erDiagram`
简单流程	`flowchart LR`
系统架构 / 分层架构	`flowchart TB` + `subgraph`
微服务架构	`flowchart TB` + `subgraph` 或 `C4Container`
数据趋势 / 图表	`xychart-beta`

语言规则：节点标签、连线说明必须使用中文。代码标识符保留原文。

换行规则：节点文本中使用而非 \n。

选择主题

15 个内置主题，根据场景推荐：

主题	类型	推荐场景
------	------	----------
`github-dark`（默认）	暗色	GitHub README、技术文档
`github-light`	亮色	明亮文档、演示文稿
`tokyo-night`	暗色	优雅暗色、博客
`tokyo-night-storm`	暗色	Tokyo Night 变体
`tokyo-night-light`	亮色	Tokyo Night 亮色
`catppuccin-mocha`	暗色	温暖暗色
`catppuccin-latte`	亮色	温暖亮色
`nord`	暗色	冷色调、北欧风
`nord-light`	亮色	冷色调亮色
`dracula`	暗色	经典暗色
`one-dark`	暗色	VS Code 风格
`solarized-dark`	暗色	经典 Solarized
`solarized-light`	亮色	经典 Solarized 亮色
`zinc-dark`	暗色	极简暗色
`zinc-light`	亮色	极简亮色

主题快速判断：

用户说"暗色/dark/GitHub" → github-dark
用户说"亮色/light/明亮" → github-light
用户说"优雅/elegant" → tokyo-night
用户说"温暖/warm/mocha" → catppuccin-mocha
用户说"冷色/cold/北欧" → nord
用户说"紫色/dracula" → dracula
用户说"简约/minimal" → zinc-dark 或 zinc-light
默认 → github-dark

写入 .mmd 文件并渲染

先用 Write 工具将 Mermaid 源码写入 .mmd 文件，然后调用：

node ~/.claude/skills/code-to-diagram/scripts/code_to_diagram.js render \
  --file <路径/diagram.mmd> \
  --theme <主题名> \
  --name <输出文件基础名> \
  --output-dir <保存目录>

第三步 B —— SVG 路径

1. 选择风格

读取 references/style-diagram-matrix.md 快速选择风格，然后读取对应的风格参考文件：

风格	参考文件	适用场景
------	----------	----------
Flat Icon（默认）	`references/style-1-flat-icon.md`	文档、博客、演示
Dark Terminal	`references/style-2-dark-terminal.md`	GitHub README、技术博客
Blueprint	`references/style-3-blueprint.md`	架构文档、RFC
Notion Clean	`references/style-4-notion-clean.md`	Notion 嵌入、Wiki
Glassmorphism	`references/style-5-glassmorphism.md`	营销页、发布会

风格快速判断：

用户说"暗色/dark/terminal/GitHub" → Dark Terminal
用户说"蓝图/blueprint/工程" → Blueprint
用户说"简洁/clean/Notion" → Notion Clean
用户说"毛玻璃/glass/现代" → Glassmorphism
默认或"文档/博客" → Flat Icon

2. 生成 SVG

读取选定的风格参考文件和 references/icons.md，按照以下步骤生成 SVG：

以风格参考文件中的 SVG 模板 为起点
根据内容规划布局（节点位置、连线路径）
使用 references/icons.md 中的 语义图形 表示不同类型的组件
使用 产品图标 标识具体产品/服务
使用 箭头语义 区分不同类型的数据流
当使用 2+ 种箭头类型时，添加图例
所有文字标签使用中文

关键约束：

禁止 @import url()——rsvg-convert 无法获取外部资源
字体通过内联

code-to-diagram

概述