简介
baoyu-diagram 是一个专门面向开发者的可视化技能，目标是生成专业级的 SVG 图表。它支持架构图、流程图、时序图、结构图、思维导图、时间线、状态机和数据流图等多种图形，并且要求每次输出都是单个独立完整的 .svg 文件，同时支持进一步导出为 PNG。
baoyu-diagram 技能生成的图表，内置了样式、字体和一整套视觉规范，这就免去了开发者手动调整图表样式的工作量。它尤其适合那些既要表达系统结构、流程关系，又希望结果能直接嵌入网页、文档或知识库的场景。
和很多只负责“画出节点”的图表提示不同，这个技能把颜色、字号、图层、留白、连接线和导出格式都提前写进了规则里，因此输出通常会更稳定，也更适合直接交付。
理念
把“结构正确”和“视觉可交付”一起纳入约束，用统一设计系统生成高质量 SVG 图，而不是只追求把关系画出来。先判断图种，再读取对应参考规则，最后按布局和导出规范落成单文件 SVG 与 PNG，尽量减少图表生成过程中的随机性和返工。
安装使用
有很多种方法可以安装 skill：
- 安装方法 1：在 OpenClaw 或 Hermes Agent 的聊天窗口，直接告诉 Agent：请帮我安装
baoyu-diagram技能。 - 安装方法 2：访问 skillhub 网站，先安装 skillhub 商店，再安装对应技能。
- 安装方法 3：访问 Skills.sh 网站，搜索
baoyu-diagram后使用页面提供的命令安装。 - 安装方法 4：访问 Clawhub 网站，搜索技能名后下载压缩包，并放入本地 skills 目录。
Skill 工作流程剖析
这个技能覆盖的图类型非常广：
- 架构图，用于展示系统组件、边界、区域和依赖关系
- 流程图，用于展示步骤、分支判断和执行路径
- 时序图，用于展示参与方之间按时间展开的交互
- 结构图，用于展示类图、ER 图、组织结构等静态关系
- 思维导图、时间线、状态机和数据流图，用于概念整理与过程表达
除此之外，它还内置了一套很细的设计约束：
- 统一的深色背景和语义色盘
- 面向标题、组件名、注释、箭头标签的字号规则
- 图层顺序、遮罩矩形和箭头 marker 的固定做法
- 组件尺寸、边界留白、标签避让和
viewBox规则
阶段 1：先判断图的类型
- 它会先根据用户描述识别要画的是架构图、流程图、时序图、结构图还是其他图种
- 不同图种对应不同的布局逻辑，而不是套同一个模板
阶段 2：读取对应参考规则
- 对架构图、流程图、时序图、结构图，它会先读
references/下的专用说明。例如：architecture.md - 这些参考文件会进一步约束流向、分层、消息间距、边框和连接方式
阶段 3：规划布局
- 它会先列出组件、参与者、区域边界和连接关系
- 然后决定主方向，比如从左到右、从上到下，或者按时间纵向展开
- 再根据间距规则给每个对象分配位置，避免节点和文字互相压住
阶段 4：生成 SVG 并导出 PNG
- 输出必须是单个自包含的
.svg文件 <style>、<defs>、字体、pattern 和 marker 都放在 SVG 顶部- 当标签包含中文字符时，使用 font-family: ‘JetBrains Mono’, ‘Noto Sans SC’, ‘PingFang SC’, sans-serif’ 并增加容器宽度
- 保存后还会调用脚本，把 SVG 再转成
@2x PNG
这种流程的好处在于，它把“理解问题”和“美化结果”中间补上了“布局规划”这一步，所以输出会比很多直接生成图形代码的提示更稳定。反过来说，如果你的需求只是随手草绘、完全不在乎视觉规范，或者当前环境不方便处理 SVG 与额外的 PNG 转换脚本，那它就不一定是最轻量的选择。