最近刷到一个挺有意思的 GitHub 项目：svg-diagram。
说实话，东哥以前看 AI 生成技术文档，最容易皱眉的地方之一就是架构图。
文字写得挺像回事，结果图一打开：连线穿框、箭头贴脸、字体溢出，放到 GitHub README 里更明显。尤其 Claude Code 这类 Agent，能画图不代表能画好图。
这个 svg-diagram 做的事情有点简单粗暴：直接给 Agent 定一套 SVG 画图规矩。
比如框多高，不是拍脑袋，而是按字号计算；连线拐弯不用乱七八糟折线，统一走曲线；箭头和目标框之间固定留 11 像素间距。
旁边还配了一个零依赖检查器，直接扫最终 SVG 文件。
它不是检查“你画得漂不漂亮”，而是查一些机器最容易犯的低级错误：XML 转义、留白、字体、元素重叠、颜色规范这些。
报错也不是一句“布局有问题”糊弄过去，而是直接告诉你：
“边距 11，应为 20 到 25。”
这种反馈对 Agent 特别重要，不然它改图的时候根本不知道往哪改。
安装也挺方便，一条命令就能塞进 Claude Code、Codex、Cursor、Gemini CLI 这些 Agent 工作流里。
里面还有个细节，我觉得挺开发者思维的。
中英文分别维护字符宽度表，中文标签不是拿英文那套硬套，而是按每个字对应字号计算宽度。也就是说，画框之前先判断文字会不会炸出去。
字体这里也比较死磕，固定带 Noto Sans CJK SC 字体栈；每张图默认带白底，丢到 GitHub 暗色主题里不用重新修。
目前覆盖架构图、流程图、时序图、数据流、状态机五类，仓库里还放了 10 张样图。
东哥看到这种工具，第一反应一般不是看功能列表，而是看它有没有考虑“失败之后怎么办”。SVG 这种东西，真正烦人的往往不是生成，而是最后那几个像素的问题：字体偏一点，线条歪一点，整个图就不像正式文档。
这个 Skill 连文字基线公式都写死了，较真程度确实比很多“让 AI 帮你画图”的项目高一截。
以后 Agent 写技术文档，可能不只是会生成 Markdown，还得学会把图画得像人做的。
GitHub 地址：bybit-exchange/svg-diagram | 
发表于 4 天前
|
查看: 0|
回复: 0
