我写东西的时候，经常遇到一个场景：文章写到一半，想插一张架构图或者流程图，让读者一眼看明白我在说什么。于是我去问 Claude，它吐出来的东西倒也不能说错，但就是丑。那种圆角矩形套圆角矩形的通用模板，灰扑扑的配色，跟我的网站放在一起，像是从别处随便扒来的。读者一看就知道，这是 AI 生成的，跟文章主体没什么关系。
要么就打开 Figma，拖拽半小时，调颜色、对齐、改字号，最后弄出一张还过得去的图。时间花了不少，文章的气也泄了。有时候干脆就跳过，不画了。但事后想想，那张图其实挺重要的，它能让一个复杂的概念变得直观，能让读者在文字的间隙里喘口气。
这个叫 diagram-design 的项目，解决的正是这件事。
它是一个给 Claude Code 用的技能，能生成 13 种图表——架构图、流程图、时序图、状态机、数据模型、时间线、泳道图、四象限、嵌套图、树形图、层叠图、韦恩图、金字塔。每种都有三个版本：浅色极简、深色极简、完整编辑风。打开就是一张 HTML 文件，直接在浏览器里看，不用装东西，不用跑命令，没有外部依赖。你让它画一个架构图，它生成一个 HTML 文件，你双击打开，截图，插进文章，完事。
真正有意思的地方在于它的品牌适配。你给它一个网址，它会抓取你网站的主色、辅色、强调色、字体，然后把这些值写进一个配置文件。此后生成的每一张图，都用你的颜色和字体。你的网站背景色变成图表的底色，你的 CTA 按钮色变成图表里的焦点色。六十秒，一套视觉语言就统一了。它还会自动做对比度检查，如果某个颜色在图表尺寸下不达标，它会建议调整值并解释原因。
这套机制背后是一个设计系统。作者说，“最高质量的操作通常是删除”。每个节点都要有存在的理由，强调色只留给读者应该第一眼看的一两个元素。目标密度是 4/10——不是塞满，而是留白。边框 1 像素，没有阴影，圆角最大 10 像素。所有坐标、宽度、间距都必须能被 4 整除。这套规矩让图表看起来不像 AI 生成的，倒像是一个设计师手工调过的。
字体也有讲究。标题和斜体注释用衬线体，节点名称用无衬线，技术标签用等宽字体。等宽字体只出现在该出现的地方——端口号、URL、字段类型——而不是一股脑地给所有东西套上"开发者风格"。
我总怀疑那些动不动就生成一堆花里胡哨图表的工具，其实是在用信息密度掩盖设计能力的不足。这个项目反其道而行，克制、干净、有呼吸感。它不试图用渐变和阴影告诉你"我很专业"，而是用精确的留白和一致的视觉语言，让你一眼就觉得"这图属于这里"。
当然，它也有自己的边界。作者明确说了，如果你只是想在推文里放一个简单的 ASCII 图，或者只是要一个列表、一个对比表格，那就不需要这个工具。画图之前先问一句：这张图能告诉读者的，会比一段写得好的文字更多吗？不会就别画。
这种克制的态度，让我更愿意信任它。知道什么不该做，比什么都想插一手，要靠谱得多。
经常写东西又不想在图表上耗时间的人，可以试试。反正免费，不好用删了便是。
https://github.com/cathrynlavery/diagram-design
