专业 SVG 多类型图表生成

要解决的问题

手写 SVG 画架构图，最常见的失败模式是“能看但没法维护”。从旧文件复制一段 <rect>，箭头从半透明填充下面露出来；改一次配色，全图的语义就乱了；节点间距全靠目测，图一复杂就重叠。这个技能针对的就是这类问题：它不试图理解业务，只把版式、配色、间距固化成可复用的规则，让每次产出的结构一致。

核心能力

支持九种图表类型：架构、流程图、时序、结构（类图 / ER / 组织架构）、思维导图、时间线、示意、状态机、数据流。每种类型有独立参考文件，绘制前先读取 references/{type}.md，里面是布局算法和示例，而不是笼统的“画得好看点”。

设计系统由两部分构成：

• 语义色板：8 个分类，每个分类定义填充色、描边色和适用场景，例如 Tertiary 固定用于数据库与存储，Alert 用于安全与告警。
• 字号规范：标题 16px、组件名 11–12px、副标签 9px、注释 8px、箭头上的微型标签 7–8px。

SVG 的绘制顺序是硬性要求，共 8 层：背景与网格 → 区域边界 → 连接线 → 不透明遮罩矩形 → 组件框 → 文字 → 图例 → 标题块。其中遮罩矩形这一步容易被忽略：组件框是半透明的，不先铺一层同位置的 #0f172a 矩形，底下的箭头就会透出来。

间距规则同样量化到数值：组件框高 50–70px，垂直间距不小于 40px、水平不小于 30px，箭头标签距框边 10px，区域边界内缩 20px，viewBox 四周留 30px。

输出端只生成单个自包含 .svg：内嵌样式与字体，根元素带 xmlns，不写固定 width / height，靠 viewBox 自适应缩放。标签含中文时切换 Noto Sans SC 等字体并放宽框宽。保存后通过 scripts/main.ts.md.md 转出 @2x PNG，运行时优先 bun，退化到 npx -y bun。

适用边界

产出是静态矢量文件，不含交互、动画或数据绑定，不适合做可点击的流程编辑器或实时协作白板。PNG 转换依赖 Bun 运行时，环境里没有就需要先装。它也不负责判断图表内容是否正确，语义关系仍需要自己核对。

安全边界方面，技能默认不安装依赖、不改系统权限、不建持久任务。涉及发送、发布、删除、部署等外部写入时，会先展示目标与影响，等你确认后才执行。