1实现原理 · 为什么它能做到
九类图共用一套“设计系统”：语义色板（按组件类别而非技术栈分配颜色）、字号层级、深色底 + 网格背景、三种箭头 marker，先定系统再排布局。
skills/baoyu-diagram/SKILL.md
| Primary | `rgba(8, 51, 68, 0.4)` | `#22d3ee` (cyan) | Frontend, user-facing, inputs |
注：调色表按语义分组（Primary/Secondary/Tertiary/Accent/Alert/Connector/Neutral/Highlight），并注明流程图与序列图应按角色（actor/decision/process）而非技术栈上色。
排版靠“固定绘制顺序 + 不透明遮罩矩形”解决 SVG 半透明叠加问题：先画箭头，再用同位置的不透明填充矩形盖住箭头，最后叠半透明组件框。
skills/baoyu-diagram/SKILL.md
The opaque masking rect trick is essential — semi-transparent component fills will show arrows underneath without it:
注：绘制顺序明确为 8 层：背景 → 区域边界 → 箭头线 → 遮罩矩形 → 组件框 → 文字 → 图例 → 标题块；这是“为什么成品看着干净”的核心手法。
用一组可直接抄的间距/边界硬规则代替审美判断：组件高 50-70px、垂直间距 ≥40px、水平 ≥30px、箭头标签离边 10px、viewBox 四周留 30px。
skills/baoyu-diagram/SKILL.md
- **Minimum gap between components:** 40px vertical, 30px horizontal
注：这些数字让模型不必“感觉”间距，把重叠问题变成可检查清单（流程第 5 步要求逐条验证）。
每种图型另有一份布局算法参考，画前先读：分层、列/行分配、列间距、绕障 L 形路由、总线栏位等都有确定做法。
skills/baoyu-diagram/references/architecture.md
1. **Identify layers:** Group components by role (clients, gateways, services, data, infrastructure)
注：SKILL.md 对每类图给出“先读哪个文件 + 关键点”（architecture/flowchart/sequence/structural 四份文件在盘，另五类只给要点）。
输出是单文件自包含 SVG：不设固定宽高、只给 viewBox，样式与 defs 全部内联，便于缩放嵌入。
skills/baoyu-diagram/SKILL.md
2. Set `viewBox` to fit all content with 30px padding; do NOT set fixed `width`/`height` attributes (let the SVG scale responsively)
注：同时要求根元素带 xmlns、<style>/<defs>/marker 置顶、text-anchor 居中防溢出。
自带脚本把 SVG 转成 @2x PNG：解析 viewBox 算尺寸，用 sharp 以 density=72*scale 渲染并 resize 后落 PNG。
skills/baoyu-diagram/scripts/main.ts
await sharp(svg, { density: 72 * opts.scale })
注：脚本支持 -s/--scale（默认 2）、-o/--output、--json；无法从 viewBox 或 width/height 推断尺寸时直接抛错。
中文排版有专门处理：中文字符更宽，要求换字体族并加宽盒子，避免文字溢出。
skills/baoyu-diagram/SKILL.md
**Chinese text support:** When labels contain Chinese characters, use `font-family: 'JetBrains Mono', 'Noto Sans SC', 'PingFang SC', sans-serif'` and increase box widths — CJK characters are wider
注：这条与“用 text-anchor=middle 且保证文字不出框”配合，直接针对 CJK 场景的常见翻车点。
落盘位置有规则：输入是文件则存到 {inputFileDir}/diagram/，否则存 {projectDir}/diagram/{topic-slug}/，目录不存在就建。
skills/baoyu-diagram/SKILL.md
**Save location:** If the input is a file, save to `{inputFileDir}/diagram/`.
注：流程最后要求同时交付 SVG 与 @2x PNG 两个文件。
2核心能力
01九类图型覆盖（架构/流程/时序/结构/思维导图/时间线/示意/状态机/数据流）
02统一深色主题设计系统（8 类语义色 + 字号层级 + 网格背景 + 3 种箭头 marker）
03可复制组件模板（标准框/判定菱形/数据库圆柱/区域边界/安全组）
04按图型的布局算法参考（分层、列距、绕障路由、总线栏）
05间距/图例/viewBox 自检清单，避免重叠与裁切
06SVG → @2x PNG 转换脚本（sharp，可调 scale/输出路径/JSON）
07CJK 文本适配（字体族 + 加宽盒子）
08固定落盘约定（{inputFileDir}/diagram/ 或 {projectDir}/diagram/{topic-slug}/）
3外部依赖
| 类型 | 依赖 |
|---|---|
| package | sharp（scripts/main.ts 动态 import，用于 SVG→PNG 光栅化） |
| cli | bun / npx（${BUN_X} 运行时） |
| network | Google Fonts（写入产物 SVG 的 @import，由查看端加载；非脚本外发） |
4风险提醒 风险提醒：蓝色 · 知晓即可
风险提醒：蓝色 · 知晓即可
- 质量依赖模型写 SVG 的能力 — 复杂图（时序+激活条、嵌套区域、大量连线）容易出现坐标算错、文字溢出；skill 用间距清单与自检步骤缓解，但没有自动几何校验。
- 产物引用字体 CDN — 生成的 SVG 依赖 fonts.googleapis.com 的 JetBrains Mono；离线或内网环境打开时字体会回退，排版可能变化。这是产物侧行为（不判级），但交付给第三方时需知情。
- sharp 依赖需可解析 — 脚本动态 import sharp，skill 目录无 package.json；bare 环境需先装 sharp 或用仓库根依赖，否则 SVG→PNG 一步失败（SVG 本身仍可用）。[INFERENCE] 依赖运行环境解析。
- 复杂 SVG 进入本地解析器 — main.ts 把输入 SVG 交给 sharp/librsvg 解析；若 SVG 来自不可信来源，属于本地图像解析器攻击面（常规风险）。
- 九类图型的能力不均衡 — 只有四类有专门布局参考文件，思维导图/时间线/状态机/数据流靠 SKILL.md 的要点描述，复杂版式的一致性弱于架构图/流程图。
风险提醒：蓝色，知晓即可。(a) 行为仅本地：agent 直接写 SVG 文件，scripts/main.ts 用 sharp 把本地 SVG 光栅化成 PNG 并创建输出目录，无网络调用、无凭证读取、无 env 读取。(b) 产物侧唯一的外部引用是 SKILL.md 强制写入 SVG 的 Google Fonts @import（fonts.googleapis.com）——按批4 口径“产物的外链不判级”，它不构成脚本运行时的外发，仅在使用者打开/渲染 SVG 时由查看端拉取字体；本地 sharp/librsvg 渲染不会去取远端 CSS。(c) 需知情的本地影响：脚本会在输入文件旁写 <name>@2x.png 并按规则建 diagram/ 目录；SVG 作为外部文件进入 sharp 解析器，属常规图像解析面。对照先例：canvas-design / writing-fragments 等本地读写类为 blue。
5第二遍独立确认
- [ok] 脚本仅本地行为 — main.ts 全文无 fetch/http/spawn/process.env；readFileSync(SVG) → sharp(density) → resize → png → toFile，另 mkdirSync 建目录。
- [ok] Google Fonts 外链的性质 — 两处命中均为写入产物 SVG 的 @import 文本与 Output Rules 自述 'no external dependencies except the Google Fonts import'；脚本自身不请求该域名，按批4 口径不判级，已写入 risks。
- [ok] 绘制顺序与遮罩矩形确为强制 — SKILL.md 明写 'The opaque masking rect trick is essential'，并给出 8 层绘制顺序与组件片段（遮罩 rect + 样式 rect 成对）。
- [ok] 间距规则为可检查数字 — 组件高 50-70px、垂直 ≥40px/水平 ≥30px、箭头标签 10px、区域边界内缩 20px、图例距最低元素 ≥20px、viewBox 30px padding，最后一并在流程第 5 步自检。
- [ok] 参考文件覆盖范围（是否夸大） — 4 份布局参考对应 architecture/flowchart/sequence/structural；思维导图/时间线/状态机/数据流/示意在图型表中给出要点但无专门文件，SKILL.md 用 'Read the reference file if one exists for that type' 表述，不构成夸大。
- [ok] meta 元数据 — GitHub API：MIT、25926 stars、pushed_at 2026-09-10T15:13:43Z；本地 HEAD 与 pin 1567581c26ec… 一致。
6结论
适合：适合技术文档、架构评审、博客里要插入“可编辑、可缩放、风格统一”的示意图场景；也适合不愿意消耗图像模型额度、或需要把图交给工程师继续手改的团队。
不适合：不适合要照片级/手绘插画风的效果（应用 baoyu-article-illustrator/cover-image）；不适合需要自动布局引擎（如 Graphviz/Mermaid 的确定性布局）的超大拓扑图——这里仍由模型算坐标。
安装 agent 直装可复制
① 本站镜像 更新 2026-09-15
方式 A · 人下载镜像包下载 baoyu-diagram.tar.gz
sha256:
方式 B · JSON 格式安装指南，复制给 agente4806bf926545ede…agent 读 JSON 指南后会自动从本站下载安装，无需更多说明。
② 上游 GitHub · 原始来源
来源信息 GitHub 原始
作者 / 仓库JimLiu / JimLiu/baoyu-skills
原始 GitHubJimLiu/baoyu-skills ↗
Stars25926
最近推送2026-09-10
本 skill commit
1567581c26许可MIT（仓库根 LICENSE，Copyright (c) 2026 Jim Liu；GitHub API license.spdx_id=MIT）
本站信息
收录日期2026-09-06
分类设计
侦查报告AI 侦查 · 2 遍 · 2026-09-06
本站镜像与 GitHub 原始是不同来源：本站锁定 commit 快照经 /r2 分发；GitHub 为实时上游，内容可能已更新。