diagram-design skill 实测：图一样干净，风格统一了，费用是三倍
我们让 Haiku 上的 Claude Code 画六种图，装和不装 cathrynlavery 的 diagram-design skill 各画两遍，24 张图都在浏览器里量过。两组都放齐了要求的标签，没有标签重叠，也没有文字跑出画布。装 skill 后每张图都用上了它的编辑式配色、先读了它的参考文件，费用是 3.1 倍，而且 12 张全都加载了 Google 字体，尽管我们要求的是自包含文件。
概述
想让一组图共用一套风格，diagram-design skill 做得到。只是要一张正确的图，不装 skill 的 Claude Code 已经画得出来，更快，价格只有三分之一。
原因很简单：两边我们都量过了。我们让 Haiku 上的 Claude Code 画六种图：架构图、流程图、时序图、ER 图、状态机、时间线，装和不装 diagram-design 各画两遍，再把 24 张图都放进浏览器渲染、测量：
- 两组都很干净。 每张图都渲染成功，要求的标签一个不缺，没有标签互相重叠，也没有文字跑出画布。
- skill 定下了风格。 装 skill 的 12 张图全都用了它的默认配色（纸色
#f5f5f5、墨色#2d3142、珊瑚红强调色#bf4520），12 次都先读了它的部分参考文件。不装 skill 的没有一张用这套配色。 - 更贵，也更慢。 装 skill 的 12 张图花了 0.169 美元，不装的是 0.054 美元，3.1 倍；用时中位 62 秒对 28 秒。
- 它打破了”自包含”。 我们要的是一个自包含的 HTML 文件。装 skill 的 12 张图全都从 Google Fonts 加载字体；不装的一张都没有引用外部资源。离线时这些图会退回系统字体；联网打开时，会向 Google 发一次请求。
推荐
- 做一系列图时用它，单张图不必。 它的价值在于每张图都和上一张一个样：同样的配色、同样的字体，按它的规则，强调色只用在一两个重点节点上。PR 里配一张图，不装 skill 的 Claude Code 就够了。
- 先定一次你自己的风格。 这个 skill 第一次使用时会问，要不要把默认参数换成你的品牌风格。回答它，或者存成一个配置，图就会和你的文档一致，而不是 skill 的默认样子。
- 文件必须离线可用的话，删掉或自托管字体链接。 去掉 Google Fonts 的
<link>，或者把字体和文件放在一起。删掉之后图照样能渲染，只是换成备用字体。 - 为读参考资料留出预算。 这个 skill 带了 63 份参考文件和 220 个素材；每次运行 Haiku 都会读其中几份，多出来的 token 和那一分钟的等待就花在这里。
- 按下一步要用的格式挑 skill。 图之后还要在别的工具里改，就选 Excalidraw、draw.io 或 Mermaid 类的 skill，它们给你一份源文件；diagram-design 给你的是 HTML 和 SVG。
你的图给谁看：今天要确认它正确的评审者，还是一整套文档的读者、希望它们看起来像同一个产品？后一种才是这个 skill 的用武之地。
怎么测的
- skill。 cathrynlavery/diagram-design（MIT 许可，65,575 星）提交 e57eda6 时的整个
skills/diagram-design文件夹，共 290 个文件，复制进项目，参考资料和素材都在，可以读。 - 内容固定的六种图。 每条提示词都写明了节点，比如架构图要有 Browser、CDN、API Gateway、Auth Service、Orders Service、Postgres、Redis Cache 和一个消息队列。每条都要求一个用内嵌 SVG 的自包含 HTML 文件、默认风格、不要提问，因为这个 skill 第一次使用时会停下来问品牌风格。
- 运行。 每种图每组两遍，每遍都是全新的
claude -p会话：Claude Code 2.1.314，--model haiku，只允许读文件工具，skill 的脚本没法运行。 - 测量。 在浏览器里打开每个文件，量最大的那个 SVG：每个文字元素在屏幕上的框；两个标签重叠超过较小者 20% 的对数；超出画布 2 像素以上的标签；页面文字里找到的必需标签。我们先用一张手工做的图校准过：一对重叠、一个越界、少一个标签，它正好找出了这三处。
- 风格。 在每个 HTML 文件里找外部网址，以及 skill 的三个默认颜色参数。
测试结果
每组 12 张图
| 不装 skill | diagram-design | |
|---|---|---|
| 渲染成功 | 12 | 12 |
| 必需标签齐全 | 12 | 12 |
| 重叠的标签，合计 | 0 | 0 |
| 跑出画布的标签，合计 | 0 | 0 |
| 用 skill 的默认配色 | 0 | 12 |
| 加载 Google 字体 | 0 | 12 |
| 回答前读了文件 | 1 | 12 |
| 文字元素中位 | 18 | 24.5 |
| HTML 大小中位 | 4.2 KB | 8.7 KB |
| 输出 token 中位 | 6,016 | 14,019 |
| 用时中位 | 28 秒 | 62 秒 |
| 12 次费用 | 0.054 美元 | 0.169 美元 |
装 skill 的图文字更多，中位 24.5 个元素对 18 个：多出来的是编辑式风格里的说明、图例和注释。用的颜色数量差不多，中位 6.5 种对 5.5 种；区别在于用哪些颜色，而不是用多少。
正式测试之前试跑过一次，那次 skill 只用了一轮，一份参考文件都没打开，还在回答里照实说了。正式测试里，每次都先打开了文件。在小模型上，这个 skill 每次的表现可能不一样。
目录里其他的画图 skill，按输出格式
| skill | 输出 | 仓库星数，11 月 6 日 | 8 天涨星 |
|---|---|---|---|
| archify | 带校验的独立 HTML | 94,277 | 2,733 |
| gstack diagram | Excalidraw、SVG、PNG | 140,531 | 2,317 |
| beautiful-mermaid | Mermaid 转 SVG、PNG | 77,866 | 4,788 |
| baoyu-diagram | 深色主题 SVG | 27,364 | 294 |
| drawio-skill | 可编辑的 draw.io | 10,626 | 166 |
| excalidraw-diagram | Excalidraw JSON | 5,206 | 72 |
| html-diagram | 自包含 HTML | 4,040 | 243 |
| mermaid-visualizer | Mermaid | 3,678 | 9 |
| c4-architecture | Mermaid C4 | 2,639 | 37 |
星数是整个仓的，其中好几个仓除了画图之外还有很多别的 skill。
该忽略什么
- 把我们的满分当上限。 六张八个节点以内的图很好排版。密集的图才会出现重叠，也是设计规范可能更有用的地方。
- 把文字元素多少当质量。 多写说明是风格选择。这个 skill 自己的建议是：最好的一步通常是删减。
- 颜色数量。 两组都用了五六种颜色。skill 改变的是多张图之间的一致性。
局限
- 我们量的是排版，不是审美。 编辑式风格是否更好看，我们没有下判断；数据里有每一个文件，可以自己看。
- 只测了 Haiku，没有运行脚本。 这个 skill 带有导出 PNG 和 SVG 的脚本和一个自检脚本；我们只允许读文件，所以这些都没用上。
- 一个浏览器、一种窗口大小。 测量来自浏览器默认尺寸下的一次渲染。
自己复现
脚本是 diagram-design-skill-2026-11.py，负责生成和判分；以及 diagram-design-skill-2026-11-measure.mjs，在浏览器里测量。数据 diagram-design-skill-2026-11.json 里有每一次运行的测量结果、外部网址、token 和费用，校准结果，以及其他画图 skill。它们都在我们的 skills 目录里。
来源
- cathrynlavery/diagram-design · official
- tt-a1i/archify · official
- Claude Code 文档：Agent Skills · official
- AgentCraft：Claude Code skills 目录 · blog