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

ztl1981

用 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 更像“可交付的制图规范”。