画图技能（Diagram Skill）用自然语言描述需求，自动生成专业的 PNG 图表，可直接嵌入 Markdown 文档。
一、用途与工作流程
该技能的核心流程分三步：先分析内容拓扑并选择合适的表达方式，再读取对应规范生成图表，最后按输出规范产出文件。
第一步：分析内容拓扑，选择表达方式。理念是内容的拓扑形态决定哪些图表能表达，读者和场景决定从中选哪个。技能先按内容结构形态归类（如线性序列、多源汇聚/DAG、分层堆叠、角色协作、实体关系、状态迁移、树形结构、矩阵/多维评估、数值比较、趋势变化、分布关系、阶段任务管理、根因分析、用户体验旅程等），同一拓扑可能映射到多个图表类型，再按读者（开发者、评审/管理层）、场景（投屏路演、嵌入文档）和强调点（动作顺序、容器化/边界、层叠关系、数据对比、维度数量、决策分支等）做最终选择。
技能还能识别 Markdown 中的 mermaid 或 dot 代码块，解读图结构（节点、边、标签、类型、分组等），映射到对应图表类型模板的数据结构，渲染为统一设计规范的 PNG，并替换原始文本块为图片引用。注意：这不是调用 Mermaid/Graphviz 工具渲染，而是理解标记语言描述的图结构后转成模板数据，用统一设计规范渲染，以保证所有图表风格一致。
第二步：读取规范，生成图表。规范体系包括公共规范（配色、字体、组件、间距）、公共工具（SVG 工具函数、文字测量、碰撞检测）以及每种图表的专属规范（数据结构、布局规则、渲染细节）。布局策略分两种：ELKjs 自动布局（ER 图、类图、状态图、流程图 DAG 模式）和手动布局（流程图、泳道图、架构图、时序图等，按领域规则计算坐标）。生成流程为：读取专属规范、定义数据、计算布局坐标、渲染 SVG、写入 HTML 文件、用 capture.py 截图生成 PNG。
第三步：输出规范。默认输出 PNG（白色背景、四周至少 24px padding、原生设备 DPI，Retina 设备自动输出 2x 清晰图），用于 Markdown 文档配图。可选输出自包含 HTML（所有 CSS/JS 内联、无外部依赖、单文件可直接浏览器打开、SVG 矢量无损缩放、文字可选中/搜索），适用于嵌入 HTML 报告、交互式架构文档、需要二次编辑的图表。还可选输出 Mermaid DSL 纯文本，适用于 MD 文档配图不想维护 PNG 文件、需要 preview-md 实时渲染、GitHub/GitLab 原生渲染等场景；结构图与部分统计图支持 DSL 输出，radar/heatmap/scatter/funnel/waterfall 等不支持 DSL，quadrant/gitGraph/block 暂不支持。
二、主要能力
覆盖 29 种图表，包括：流程图（线性/DAG）、泳道图、时序图、架构图、ER 图、类图、状态图、网络图、决策树、数据流图、C4 图、思维导图、甘特图、时间线、组织结构图、SWOT 图、鱼骨图、文氏图、旅程图、柱状图、折线图、饼图、雷达图、热力图、桑基图、散点图、矩形树图、柱线混合图、Kanban、Git Graph。
三、使用方式
截图必须使用固化脚本，禁止手动调用 Playwright MCP 工具截图。命令示例：
结构图：HTML → PNG
python ~/.claude/skills/diagram/scripts/capture.py <HTML文件> <输出路径>.png
结构图：HTML → 自包含 HTML
python ~/.claude/skills/diagram/scripts/capture.py <HTML文件> <输出路径>.html -f html
统计图：JSON → PNG（bridge.py 内部自动截图）
python ~/.claude/skills/diagram/scripts/bridge.py -c <配置>.json -o <输出路径>.png
统计图：JSON → 自包含 HTML
python ~/.claude/skills/diagram/scripts/bridge.py -c <配置>.json -o <输出路径>.html -f html
文件命名采用 <图表类型>-<描述>.png（英文小写 + 连字符）。默认存放于与调用方 Markdown 文件同级的 assets/ 或 images/ 目录；deep-research 调用时存放于 docs/research/assets/。
四、工具依赖
capture.py（scripts/capture.py）用于结构图 HTML → PNG/HTML，内部调用 Playwright；bridge.py（scripts/bridge.py）用于统计图 JSON → PNG/HTML，内部调用 Playwright；ELKjs（lib/elk.bundled.js，已内联）用于 ER 图/类图/状态图/流程图 DAG 的自动布局。Playwright 仅作为 capture.py / bridge.py 的内部实现，不要直接调用 Playwright MCP 工具截图。
五、适用场景与限制
适用场景包括：Markdown 文档配图、deep-research 报告配图、writing skill 嵌入文档或路演/评审 HTML 配图、用户直接请求画图等。标题默认行为随调用场景变化：用户直接请求画图时默认带标题+副标题；deep-research 报告配图与 writing skill 嵌入文档配图不带标题，由章节标题承担；writing skill 路演/评审 HTML 配图默认开大字标题+副标题，其他叠加组件按内容评估；用户明确说"画评审版/路演图"进入 review-grade 评估流程；用户明确说"不要标题"则跳过标题渲染。
限制与注意事项：ELKjs 仅用于自由图布局，流程图线性模式、泳道图、架构图、时序图不用 ELKjs，因为这些图表有明确的领域布局规则，自动优化会打破规则（如重排泳道顺序、改变分组位置）；流程图 DAG 模式使用 ELKjs。流程图 DAG 模式需忠实还原拓扑，不存在的连线绝不添加，多个独立入口不能强行归到同一根节点；节点类型忠实原图，highlight 仅用于原图明确标注为关键/核心的节点。ELKjs 是异步的，所有渲染代码需放在 .then() 回调里。部分图表类型不支持 DSL 输出。