SVG 图示制作规范（svgbuilder）
Overview
本 skill 让 Claude 产出“经得起像素级检查”的 SVG 图示，并能按同一套规范评审/修复已有图。完整规则（第一~八章、35 条规则、复核清单、案例协议）在 references/规范全文.md，是所有数值决策的唯一依据。用户问到本 skill 的使用方式、行为或限制类常见问题时，先查 references/FAQ.md 再回答。
When to use（何时使用）
满足任意一条即启用：
- 绘制 / 生成 SVG 流程图、架构图、闭环（循环 / PDCA）图、维恩图、对照表/参数表
- 修复或评审已有 SVG 的对齐、对称、连线走向、箭头、配色一致性或文字排版问题
- 要求“按规范检查 / 体检这张图”
When NOT to use（能力边界与替代方案）
以下类型手写 SVG 不擅长或不可靠。命中时先明确告知局限并给出替代方案（按 Error reporting 节的统一格式），用户坚持才降级绘制，并说明预期折损：
| 不擅长的类型 | 原因 | 替代建议 |
|---|---|---|
| 数据驱动图表（柱状/折线/饼/散点，要求数值比例精确） | 手写坐标比例易失真 | 用 matplotlib/plotly 代码生成，或 Chart.js 交互页面 |
| 大规模节点图（>12 节点的流程/网络图） | 手工布局质量急剧下降 | Mermaid/Graphviz 自动布局，或拆成多张子图 |
| 思维导图（多层分支） | 径向布局难以手算 | Mermaid mindmap 或 XMind |
| 甘特图/时间线（精确日期刻度） | 同数值比例问题 | Mermaid gantt |
| ≥4 个集合的维恩图 | 椭圆维恩可读性差，交叠区域无法保真 | 改用矩阵/表格表达重叠关系 |
| 写实插画、复杂图标、3D 透视、地图 | 手写路径不可靠 | 简化为几何图形，或用图像生成/ECharts 地图 |
Inputs（开工前确认）
信息不全时按下表一次性确认，缺什么问什么，不逐条追问：
| 字段 | 必填 | 说明 |
|---|---|---|
| 图类型 | 是 | 流程图 / 架构图 / 闭环图 / 维恩图 / 表格图 |
| 内容要点 | 是 | 节点、步骤、集合或行列清单 |
| 主题 | 是 | 深色 / 浅色，色值取自规范 1.1 主题表 |
| 用途与受众 | 否 | 影响详略与文字密度 |
| 尺寸比例 | 否 | 默认 16:9 |
| 特殊要求 | 否 | 配色、字号、语言等 |
Error reporting（错误与异常的统一提示）
任何异常都在发生时主动报告，不让用户自行排查哪里出了问题。统一格式：
[级别] 类别｜位置：问题描述 → 影响 → 处理/建议
级别三档：
- 🛑 阻断：无法产出可靠结果，停下等用户决定，并给出可选路径
- ⚠️ 降级：可以继续但有质量折损，先说明折损与取舍再动手
- ✅ 已修正：自检发现违规并已修复，交付时列出 Rule 编号与改动
| 类别 | 触发场景 | 级别与处理 |
|---|---|---|
| 类型不支持 | 命中 When NOT to use 表 | 🛑 告知局限 + 替代方案；用户坚持 → ⚠️ 降级绘制并说明预期折损 |
| 输入缺失/歧义 | Inputs 必填项缺失，或需求存在多种理解 | 🛑 一次性列出全部缺项与理解分歧，不逐条追问 |
| 容量超限 | 文字放不下、节点过密、viewBox 不够 | ⚠️ 列出取舍选项（缩字号/换行/加画布/拆图）并给推荐项 |
| 需求与规范冲突 | 用户要求违反规范条款（如指定色值破坏对比度） | ⚠️ 指出冲突的 Rule 编号 + 后果，按用户选择执行 |
| 自检违规 | 三轮复核任一项不过 | 能修 → ✅ 修复并记录；反复修不好 → ⚠️ 说明原因与残留问题 |
| 评审输入问题 | 用户提供的 SVG 无法解析、截断或引用缺失 | 🛑 指出具体失败位置（行/元素），请求补全 |
| 环境限制 | 渲染工具缺失或模型无法查看图像，渲染回看被跳过 | ⚠️ 在自检结论注明未做渲染回看及所用兜底方式 |
交付时若产生过 ⚠️/✅ 条目，在自检结论中按此格式汇总；全程无异常则不必提及本节。
Workflow（按序执行，不要跳步）
动笔前先完整读一遍 references/规范全文.md——规则会在生成和自检全程反复用到，凭记忆容易漏掉高频项。然后：
-
生成前规划（规范第一章）
- 按 Inputs 表确认缺失信息（含深色/浅色主题），从 1.1 主题表取对应色值。
- 确认图示类型，按 1.2 对应约定建立坐标系：先定 viewBox、主元素中心坐标、间距。
- 维恩图特别注意“先算标签宽再定圆心距”；表格图先定列宽与行高。 -
生成 SVG（规范第二~六章，共 35 条规则）
- 结构与空间（二）：不重叠、对称、均匀分布、画布中心线对齐、文本框留白最小化。
- 视觉表达（三）：颜色链一致、分割线可见、文字居中、标题层级递减、短句尽量单行。
- 连接线与箭头（四）：直角折线、最简弯折、平行线间距、决策分支共源 T 型、连线容纳文字、label 沿线居中且偏置到线一侧不压线、箭头不缺失/出发点对称、箭头尖端紧贴目标框边（终点取框边坐标，间隙 1~3 px；切勿为留箭头长度把到达端往回缩）。
- 代码（五）：开放路径 fill="none"、同类框 stroke-width 统一、带头部色块的面板描边最后绘制。
- 表格（六）：网格清晰、列等宽、单元格居中、表头/角单元格（如"对比维度"）字号高于数据单元格。 -
生成后三轮复核（规范第七章）——先判定走哪条路径：
- 主路径（渲染回看）：环境能渲染（rsvg-convert -o out.png in.svg或python3 -c "import cairosvg; cairosvg.svg2png(url='in.svg', write_to='out.png')"，任一可用）且当前模型能查看图像时，把 SVG 渲染成 PNG 查看真实渲染图，重点看重叠、错位、文字溢出、箭头悬空、label 压线；箭头衔接等细节可放大渲染（如--zoom 2）核对。发现问题按对应规则修正后重新渲染确认。此路径下三轮清单以看图结论为准，不要求逐项算坐标。
- 降级路径：任一条件不满足（无渲染工具，或模型无法查看图像）→ 跳过看图，回退到"三轮清单 + ⚠️ 项动手算坐标"：标 ⚠️ 的高频漏报项必须动手算坐标验证（多行行距、Venn 标签宽与区域标签居中、出发点对称、中心线对齐、连线容纳文字、箭头紧贴目标框、label 不压线、表头字号层级）。并按 Error reporting 格式在自检结论注明：⚠️ 环境限制｜自检：未做渲染回看 → 像素级问题可能漏检 → 已用坐标核算兜底。切勿在未真正看图的情况下声称"已渲染确认"。
- 任一项不过就回到对应规则修正，全部通过方可交付。
- 评审场景：直接用三轮清单逐条核对用户给的 SVG，列出违规项与对应 Rule 编号及修正建议。 -
案例积累与规则进化（规范第八章）
- 当用户纠正了视觉问题、要求重来、或自检中捕获并修正了违规时，按案例协议在 references/规范全文.md 第八章 CASE_LOG 区追加案例条目。
- 同一根因出现 ≥ 2 次且现有规则未覆盖时，按写回步骤提炼为新规则（用「章-序号」编号），追加到对应章节并在复核清单加一条。
Output（输出约定）
- 默认输出可直接渲染的完整 <svg>...</svg> 代码；除非用户另有要求，写成单文件、内联样式。
- 颜色、字号、间距等基准值一律取自规范第一章，不凭空另设；如需偏离，须全局一致并说明理由。
- 交付前在回复里简述自检结论（哪几轮、重点核算了哪些高频项）。
Rule index（速查，细节见 references/规范全文.md）
| 章 | 范围 | 规则号 |
|---|---|---|
| 二 结构与空间 | 不重叠/对称/分布/中心线/留白 | 2-1 ~ 2-7 |
| 三 视觉表达 | 颜色系统 + 文字排版 | 3.1-1 ~ 3.2-6 |
| 四 连接线与箭头 | 走线 + 箭头 | 4.1-1 ~ 4.2-7 |
| 五 SVG 代码规范 | fill/线宽/描边层序 | 5-1 ~ 5-3 |
| 六 表格图示 | 网格/列宽/居中 | 6-1 |
| 七 复核清单 | 三轮自检 | — |
| 八 案例协议 | 自动积累 + 规则进化 | — |
