SVG 图生成器（也能把已有 SVG 转成图片）
本技能有两种用法：
- 生成模式：生成 SVG 图 —— 按你的描述画出扁平、随主题切换的架构图、中心辐射图 / 流程图 / 时序图 / 思维导图 / 组织架构图 / 对比矩阵 / 时间线 / 循环图 / 鱼骨图，并保存为
.svg+ 一张白底.html预览图 + 一张 2× 的.png（用于插入公众号等文章）。 - 转换模式：把已有 SVG 转成图片 —— 你手里有一份
.svg文件（本技能生成的，还是别处来的都行），技能调用自带转换器把它栅格化成 2× 白底.png，同样方便插入公众号等场景。
绘图规范完全内置在本技能内（见 references/design-system.md）。
使用场景
- 用户想看某个结构、流程或对比，而不是读大段文字。
- 用户手里有一份现成的
.svg（本技能生成过，还是别处来的都行），想快速转成可插入公众号的 PNG 图片。 - 不要拿它去创作位图、照片或基于组件的 UI 线框图——那属于别的技能；但把 SVG（含你已有的）导出成 PNG 是本职能力。
前置 · 环境检查
本技能的最终产物是能插入公众号的 PNG，导出依赖两项本机工具。每次执行前先确认，任一项不满足就提示用户安装并结束任务，不再继续：
- Node.js 18+：运行
node --version。若命令不存在（或版本低于 18），提示用户「未检测到 Node.js 或版本过低，请安装 Node.js 18+（https://nodejs.org）后重试」，然后结束任务。 - Microsoft Edge：运行
node SKILL_DIR/scripts/check-edge.mjs（把SKILL_DIR替换为技能安装路径）。退出码 0 表示已安装，退出码 1 表示未找到，提示用户「未检测到 Microsoft Edge，请安装 Edge（https://www.microsoft.com/edge）后重试」，然后结束任务。
两项都满足，才进入下面的工作流。
工作流 A · 生成 SVG 图（生成模式）
-
读取内置设计规范 + 底层知识。 用 Read 工具打开
references/design-system.md（全部硬约束：调色板、字体、viewBox 规则、箭头标记）以及references/svg-drawing-knowledge.md（SVG 渲染机制、坐标几何计算、配色判断）。 -
按用户意图选择图的类型。选定后，除通用规范外，还需遵守该图专属的视觉规则（
references/rules-{type}.md）——各图型独有的形状语义、坐标模板、连线样式、常见反例都在其中：- 架构图——展示系统各组件及其关系的图。常见两类布局：① 自上而下分层架构（如接入层 / 服务层 / 数据层 / 基础设施），每层由若干节点组成、左侧放层级标签，层间用箭头表达依赖或数据流，可加底部反馈闭环；② 横向流水线，沿一条调用链串联多个组件（如 AI 客户端 → 中继服务器 → 手机）。坐标模板见
svg-drawing-knowledge.md§2.6。专属规则references/rules-architecture.md，示例references/example-architecture.svg。 - 中心辐射图——一个中心节点向外辐射连接多个外围节点（例如一台服务器向多个客户端转发，或星型网络拓扑）。外围节点围绕中心分布，连线从中心向四周发散。专属规则
references/rules-radial.md（本技能暂无专用示例文件，按规则绘制即可）。 - 流程图——表达过程、算法或工作流：用形状区分语义（矩形=处理/步骤，菱形=判断/分支，椭圆=起止，平行四边形=输入/输出），箭头表示流向，支持判断分支、回环与合流。专属规则
references/rules-flowchart.md，示例references/example-flowchart.svg。 - 时序图——顶部是参与者，消息用箭头向下流动。专属规则
references/rules-sequence.md，示例references/example-sequence.svg。 - 思维导图——中心主题置于画布正中，分支向四周放射状展开，分支用曲线
<path>连接；同一分支及其子节点使用同色系、子节点比父级浅；配色见 §3.2（一主分支一色，子节点用该色系更浅级）。专属规则references/rules-mindmap.md，示例references/example-mindmap.svg。 - 组织架构图 / 树形图——自上而下的层级结构，顶层为根节点，逐层向下展开，同级节点用同一色系，不同分支用不同色系。专属规则
references/rules-orgchart.md，示例references/example-orgchart.svg。 - 2×2 对比矩阵 / 四象限图——横纵两轴划分四个象限，将选项分布在四个区域中，每个区域附简洁评价标签。轴标签位于两端。专属规则
references/rules-matrix.md，示例references/example-matrix.svg。 - 时间线——水平时间轴贯穿左右，里程碑节点用圆点标注，事件卡片交替排布在轴的上方或下方，用虚线连接到对应圆点。专属规则
references/rules-timeline.md，示例references/example-timeline.svg。 - 循环图——4–5 个节点围绕中心呈环形排列，节点间用曲线箭头连接形成闭环。每个节点用不同色系区分阶段。专属规则
references/rules-cycle.md，示例references/example-cycle.svg。 - 鱼骨图（因果分析图）——中央水平主干线指向右侧"问题"鱼头，4–6 条斜肋从主干分叉出去，每条肋上挂 2–3 条虚线子原因。专属规则
references/rules-fishbone.md，示例references/example-fishbone.svg。
- 架构图——展示系统各组件及其关系的图。常见两类布局：① 自上而下分层架构（如接入层 / 服务层 / 数据层 / 基础设施），每层由若干节点组成、左侧放层级标签，层间用箭头表达依赖或数据流，可加底部反馈闭环；② 横向流水线，沿一条调用链串联多个组件（如 AI 客户端 → 中继服务器 → 手机）。坐标模板见
-
编写 SVG，遵循
references/design-system.md的硬性约束，套用references/svg-drawing-knowledge.md的坐标公式（§2）与配色规则（§3），并遵守第 2 步选定的references/rules-{type}.md专属视觉规则：viewBox="0 0 680 H"（宽度 100%）；H= 最底部元素的位置 + 20。- 外层背景透明；只使用纯色填充，不要渐变、阴影、模糊或发光。
- 仅两种字重：400（常规）和 500（中等）。正文 13px，标题 14px。字体不得小于 11px。
- 文字颜色跟随客户端主题：浅色主题用深色文字，深色主题用浅色文字。每个图形都要显式设置
fill（不要用 CSS 继承）。 - 每一水平层 ≤4 个框；色系数量 = 需区分的有意义类别数（如架构的分组、思维导图的各主分支、循环图的各阶段），只在类别有真实含义时加色，禁止为装饰加色；完整规则见 svg-drawing-knowledge.md §3.2。
- 每条连接线
<path>/<polyline>：fill="none"。箭头使用design-system.md里的标记。 - 框内每个
<text>：dominant-baseline="central"。 - 根
<svg>要加role="img"，并把<title>和<desc>作为前两个子元素。 - 不要有
<!-- 注释 -->、不要旋转文字、不要position: fixed。
-
展示图表。 把生成的
.html/.png文件交给用户打开。 -
保存三个产物到工作区，使用同一个有描述性的基础文件名（例如
phone-screenshot-arch）：.svg——原始矢量文件（用 Write 工具写）。.html——白底预览包装，方便手动用 Edge 截图。用自带脚本生成，不要手写 HTML（这是纯模板拼接，手写浪费 token）：
把node SKILL_DIR/scripts/svg-to-html.mjs --SvgPath SVG_PATHSKILL_DIR替换为技能安装路径，SVG_PATH 替换为 .svg 文件路径。省略--OutPath时与 SVG 同名同目录输出.html；页面标题自动取 SVG 内的<title>。.png——通过自带的 Node.js 转换器按 2× 栅格化。在 Bash 中运行（环境检查已确认 node 与 Edge 均可用）：
把 SKILL_DIR 替换为技能安装路径，SVG_PATH 替换为 .svg 文件路径。 退出码为 2 表示找不到 Edge（环境检查遗漏），提示用户安装 Edge；退出码 4 表示截图未生成，提示改用下方「方法 2」手动截图。其余退出码见脚本头部注释。 报告所有保存路径。node SKILL_DIR/scripts/svg-to-png.mjs --SvgPath SVG_PATH
-
用文字说明。 把所有描述、背景和后续步骤都写在 SVG 之外的对话消息里。SVG 只负责视觉。
-
输出要求。 生成图片之后，必须向用户返回以下三个绝对路径：
- SVG 代码的绝对路径（
.svg） - HTML 代码的绝对路径（
.html） - PNG 图片的绝对路径（
.png）
- SVG 代码的绝对路径（
工作流 B · 把已有 SVG 转成图片（转换模式）
当用户发来一份现成的 SVG（本技能生成过，或从别处得到），希望得到一张可插入公众号的 PNG 时使用。前置环境检查同上文「前置 · 环境检查」（Node 18+ 与 Edge 二者缺一不可）。
-
拿到 SVG。
- 方式一 · 本地文件：用户给出
.svg路径，直接用该路径。 - 方式二 · 直接粘贴代码：用户把 SVG 源码贴在对话里。用 Write 工具把它落盘成一个临时
.svg（如user-svg.svg），再用这个路径。 - 若用户既没给路径也没贴代码，提示「请把 .svg 文件拖进来，或把 SVG 代码贴给我」，结束任务。
- 方式一 · 本地文件：用户给出
-
环境检查：同上文「前置 · 环境检查」，任一项不满足就提示安装并结束。
-
调用转换器（与生成模式共用同一脚本）：
node SKILL_DIR/scripts/svg-to-png.mjs --SvgPath SVG_PATH [--OutPath OUT_PNG] [--Scale 2]把
SKILL_DIR换成技能安装路径，SVG_PATH换成上一步得到的.svg路径。可用--OutPath指定输出 PNG 位置，省略则与 SVG 同名同目录。 退出码 2 = 找不到 Edge；4 = 截图未生成（提示改用下方「方法 2」手动截图）。 -
交回结果：把生成的
.png路径告诉用户，说明它是 2× 白底 PNG，可直接拖进公众号。若用户贴的是代码，顺带说明已落盘的临时.svg路径，方便二次修改。 -
输出要求。 转换模式下，只需向用户返回一个绝对路径：
- PNG 图片的绝对路径（
.png）
- PNG 图片的绝对路径（
把图变成图片（公众号插入用）
公众号编辑器只接受 JPG / PNG，不接受 SVG 直接上传。无论是本技能刚生成的图，还是你已有的 SVG，导出 PNG 的方法都一样：技能默认会自动导出 PNG；若自动失败或你想手动控制，用以下方法：
方法 1 · 自动导出 PNG（推荐） 技能自带 Node.js 脚本（ES Module），用本机 Edge 浏览器无头截图，2 倍分辨率白底。在 Bash 里运行（需先通过环境检查）：
node <skill-dir>/scripts/svg-to-png.mjs --SvgPath <svg 路径>
输出与 SVG 同名、同目录的 .png，直接拖进公众号即可。若提示找不到 node，请先安装 Node.js 18+。
方法 2 · 手动用 Edge 截图（脚本不可用时的备选）
- 双击技能生成的
.html文件（白底预览），或在 Edge 里直接打开.svg。 - 按
Ctrl + Shift + S调出 Edge「网页捕获」工具。 - 拖框选中整张图，点「捕获」→ 保存为 PNG。
设计系统要点（速查）
- 调色板（9 个色系 × 7 级）：紫、蓝绿、珊瑚、粉、灰、蓝、绿、琥珀、红。浅色模式下用 50 级填充 + 600 级描边 + 800/600 级文字。
- 框宽公式：
rect_width = max(标题字符数 × 7, 副标题字符数 × 6) + 24。 - 间距：框之间 ≥60px，内边距 24px。
- 从
references/design-system.md复制标准的<defs>箭头标记。
自带资源
references/design-system.md——完整的硬约束、调色板、箭头标记模板、框尺寸公式（"不能做什么"）。references/svg-drawing-knowledge.md——SVG 渲染机制、坐标几何计算（含 4 层架构坐标模板）、配色判断的权威规则（"怎么画才漂亮"）。references/rules-architecture.md、rules-flowchart.md、rules-mindmap.md、rules-sequence.md、rules-orgchart.md、rules-matrix.md、rules-timeline.md、rules-cycle.md、rules-fishbone.md、rules-radial.md——10 种图各自的专属视觉规则（形状语义、坐标模板、连线样式、常见反例）。绘制某类图时必读对应的rules-{type}.md。references/example-architecture.svg、example-flowchart.svg、example-sequence.svg、example-mindmap.svg、example-orgchart.svg、example-matrix.svg、example-timeline.svg、example-cycle.svg、example-fishbone.svg——供风格和结构对齐的少样本示例。scripts/svg-to-png.mjs——Node.js（ESM）转换器：通过无头 Edge 把任意 SVG 文件（不限于本技能生成的）转成 2× PNG。自动检测 Program Files 里的 msedge；找不到时以退出码 2 结束并给出手动回退指引。用node运行（Node 18+）。scripts/svg-to-html.mjs——Node.js（ESM）辅助脚本：把一份 SVG 内联进白底 HTML 预览页（纯文件拼接，无需浏览器）。生成.html预览包装时用它替代手写 HTML，省 token。参数--SvgPath，可选--OutPath；页面标题自动取 SVG 内<title>，画布宽度自动取 viewBox。用node运行（Node 18+）。scripts/check-edge.mjs——Node.js（ESM）环境检测脚本：通过注册表 + 常见安装路径检测本机是否安装了 Microsoft Edge，退出码 0 表示已安装。