01 功能说明
一种深色主题的 SVG 图表创作工作流，包含语义化布局、连接线分层和 PNG 转换。
Baoyu Diagram 可编写独立的 SVG 图表，用于架构、流程图、时序图、时间线和其他结构化说明，而不是让图像模型绘制标签。来源提供了一套深色视觉系统，其中包含语义化颜色、等宽字体排印和针对不同图表类型的布局指导。
其实现中一个鲜明的细节是分层顺序：连接线绘制在不透明遮罩和半透明组件框后方，因此线条不会透过标签显示。间距、图例位置和 viewBox 内边距均被视为图表规范的一部分。随后，可使用随附脚本生成更高分辨率的 PNG，供不接受 SVG 的工具使用。
预期交付物
确定信息属于时序、决策流程、层级、架构，还是其他受支持的结构。
在分配位置和规划箭头走向之前，列出实体、分组边界和流程方向。
编写 SVG，检查重叠和标签周围的留白，然后导出 PNG，并验证两种格式是否都保持清晰可读。
02 适用场景
用于 SVG 的文本/代码环境；运行所提供的 PNG 转换脚本需要 Bun 或基于 npx 的 Bun。
03 关键决策
来源明确防止箭头透过半透明框显示。
时序消息、流程图决策和结构关系采用不同的约定，而非通用的相连卡片。
04 示例任务
以下示例简报尚未经过测试。使用前请检查该技能的设置。
保留图表类型参考资料和转换脚本。检查目标使用环境中的渲染和字体可用性。
https://github.com/JimLiu/baoyu-skills/blob/1567581c26ec29f4216c6e6835415bf30343b0e3/skills/baoyu-diagram/SKILL.md用于 SVG 的文本/代码环境；运行所提供的 PNG 转换脚本需要 Bun 或基于 npx 的 Bun。
运行该技能之前，请调整此简报的范围、源材料和约束。
使用 baoyu-diagram 创建一个 SVG，展示我们的上传管道：浏览器、API、队列、工作进程和对象存储。仅使用我指定的关系，将服务器端组件归为一组，单独标注重试行为，并将图例置于图形外部。验证箭头方向和文本周围的留白，然后提供 SVG 和 PNG 两种版本，不要添加臆造的服务。根据以下可观察的标准检查实际输出。
OpenDesign 为编码代理提供本地设计工作区。此条目并不表示该技能已内置，也不表示其中包含其外部工具、凭据和软件依赖项。
05 来源与许可证
本页面描述的是下方链接所指向的固定来源修订版本。上游行为和要求可能发生变化。
1567581c26ec一种深色主题的 SVG 图表创作工作流，包含语义化布局、连接线分层和 PNG 转换。
由 OpenDesign 根据链接来源撰写的原创摘要。仓库 Star 数是带日期的受欢迎程度指标，并不代表技能使用量或质量评分。
06 开始前的问题
https://github.com/JimLiu/baoyu-skills/blob/1567581c26ec29f4216c6e6835415bf30343b0e3/skills/baoyu-diagram/SKILL.md