用 Claude Code 写技术文档时,顺手生成的架构图 SVG 经常翻车:连线乱拐、字号不齐、字体飘、间距靠猜。

用 Claude Code 写技术文档时,顺手生成的架构图 SVG 经常翻车:连线乱拐、字号不齐、字体飘、间距靠猜。

svg-diagram 这个 Agent Skill 直接把“怎么画”写成规矩:框高跟字号走,拐弯只用曲线,箭头到目标框固定留白 11px,不再看运气。

再配一个零依赖检查器,直接读取最终 SVG 成品做 12 项硬核校验:转义、留白、字体、重叠、配色全覆盖;报错不含糊,直接点名问题,比如「边距 11,应为 20 到 25」。

GitHub:http://github.com/bybit-exchange/svg-diagram

一条命令即可接入 Claude Code、Codex、Cursor、Gemini CLI 等几十个 Agent。中英文各自一张字符宽度表:中文按“每字一个字号”算宽,落笔前先判定是否会溢出。

字体栈强制带 Noto Sans CJK SC;五组语义配色;每张图自带白底底板,贴进 GitHub 暗色主题也清晰不脏。

架构图、流程图、时序图、数据流、状态机五类全覆盖,仓库内附 10 张样图。甚至连文字基线公式都写死了——这种较真程度,确实比一般 Skill 更像“可交付的制图规范”。




分类