baoyu-diagram · 把结构关系画成可编辑 SVG

作者提供的示例，实际效果取决于你的输入和使用工具。

输入

关系：提交 → 审核 → 公开；只有审核通过才进入公开；画布 600×140。

输出

编辑示例 · 未运行

<svg xmlns="http://www.w3.org/2000/svg" width="600" height="140" viewBox="0 0 600 140">
<rect width="600" height="140" fill="#111827"/>
<g fill="#1f2937" stroke="#818cf8"><rect x="20" y="40" width="140" height="60" rx="12"/><rect x="230" y="40" width="140" height="60" rx="12"/><rect x="440" y="40" width="140" height="60" rx="12"/></g>
<g fill="#fff" text-anchor="middle" font-size="18"><text x="90" y="77">提交</text><text x="300" y="77">审核</text><text x="510" y="77">公开</text><text x="195" y="77">→</text><text x="405" y="77">→</text></g>
<text x="405" y="35" fill="#cbd5e1" text-anchor="middle" font-size="12">通过</text></svg>

用固定的深色视觉规范绘制流程、架构、时序、时间线或概念图，交付独立 SVG 文件。

具体任务

把流程或架构画成可编辑矢量图：依据节点、连线与分组组织 SVG，让结构关系保持可修改。

检查图中文字和箭头的逻辑：按目标尺寸检查层级、间距、连接方向与导出。

必需材料

节点、连线、分组和核心问题

目标尺寸与阅读场景

可选材料

品牌配色

参考图与图标素材

使用门槛

能提供明确关系，宿主可写并查看 SVG。

这个 Skill 额外提供的方法

既能分享图，也能继续改节点文字和关系，无需重新生成整张位图。

编辑示例（未运行）

画一个从提交到审核的最小流程

任务：以三个节点说明资源提交流程。

输入：
关系：提交 → 审核 → 公开；只有审核通过才进入公开；画布 600×140。

结果片段：
```svg
<svg xmlns="http://www.w3.org/2000/svg" width="600" height="140" viewBox="0 0 600 140">
<rect width="600" height="140" fill="#111827"/>
<g fill="#1f2937" stroke="#818cf8"><rect x="20" y="40" width="140" height="60" rx="12"/><rect x="230" y="40" width="140" height="60" rx="12"/><rect x="440" y="40" width="140" height="60" rx="12"/></g>
<g fill="#fff" text-anchor="middle" font-size="18"><text x="90" y="77">提交</text><text x="300" y="77">审核</text><text x="510" y="77">公开</text><text x="195" y="77">→</text><text x="405" y="77">→</text></g>
<text x="405" y="35" fill="#cbd5e1" text-anchor="middle" font-size="12">通过</text></svg>
```

SVG 为编辑示例，保留真实流程条件；复杂拒绝路径可在完整任务里补充。 此为编辑示例，未安装或运行上游 Skill。

首次任务

将【节点/连线/分组/核心问题】画成【尺寸/场景】的 SVG；验收：文字可编辑、关系正确、实际渲染无重叠，提供源文件。
必需材料：节点、连线、分组和核心问题：【请填写或粘贴】；目标尺寸与阅读场景：【请填写或粘贴】

验收方法

箭头方向与条件是否对应原材料

文字在目标尺寸是否可读

SVG 是否保留可编辑文本和结构

依赖与准备

文件写入与 SVG 查看工具；可选 PNG 导出脚本需要已核对版本的 Bun 与相关渲染依赖。

使用边界

默认深色风格不等于适合所有品牌，必要时按用途调整。

复杂关系和长文字仍需实际渲染校对，不能只看 SVG 能解析。

排错

节点多导致箭头交叉看不懂：按层级或阶段分组，必要时拆分总览和局部图。

导出 PNG 字体或边缘出问题：先检查 SVG 渲染与字体，再按正确倍数导出并查看。

固定来源

https://github.com/JimLiu/baoyu-skills/blob/1567581c26ec29f4216c6e6835415bf30343b0e3/skills/baoyu-diagram/SKILL.md

先看看示例

输入

输出

方法说明