AI画图终于能看了,5万Star技能拯救配图

我最近在整理我们数据仓库的链路说明，ODS 到 DWD 再到 ADS，四层东西串在一起。按老习惯，我让 AI 顺手给我画一张架构图。

结果你们也能猜到。

一个通用圆角框，几根粗细一样的箭头，配色是那种说不清道不明的蓝紫渐变，跟我文章里其它所有配图完全不搭。要么我打开 Figma 跟它纠缠半小时，要么干脆放弃，这一段就不配图了。

然后我刷到一个仓库，作者在 README 第一段就把这事说透了，原话大意是，每次需要一个架构草图、一张流程图、一个重要性的金字塔，问 Claude 拿回来都是一个通用圆角框，跟网站的其它部分毫无关系，最后要么跟 Figma 死磕半小时，要么直接跳过不放图。

她把这个东西做成了技能，叫 diagram-design，已经 47040 个 star 了。

我看到这段的时候笑了一下，这不就是我刚才干的事。

先说它是干嘛的。

这个技能是给 AI 编程助手用的，Claude Code、Codex、GitHub Copilot、Factory Droid、Pi 都能接。装完之后你不用说「帮我画个图」，你说「把我的应用画成一张架构图，前端、后端、数据库、Redis 缓存」，它直接给你一个自包含的 HTML 文件，里面是手写的 SVG。

不是 Mermaid 那种渲染出来方方正正的东西。作者在自述里专门写了一句 No Mermaid slop，翻过来就是「不要 Mermaid 那种糊弄玩意儿」。

它现在支持 44 种视觉类型。架构图、流程图、时序图、状态机、ER 图、四象限、雷达图、维恩图、热力图、瀑布图、甘特图、散点图这些都有，冷门一点的连桑基图、鱼骨图、Wardley 地图、UML 类图、故事地图、数据库 schema 也能画。

这 44 种不是一次堆出来的。2.0 加了 Loop，就是带共享记忆中枢的飞轮，虚线表示回写。2.5.10 一口气补了十种布局语法，桑基图、鱼骨图、Wardley 地图、看板、部署图、依赖图、UML 类图、故事地图、数据库 schema 都是那一版进来的。仓库现在推到 2.6。

我得说，这个技能的设计哲学比它的功能更让我意外。

SKILL.md 里有一句原话，The highest-quality move is usually deletion，最高质量的动作通常是删除。

还有一句，图纸不是在所有东西都加上去的时候完成的，是在什么都删不掉的时候完成的。

它给了一套很硬的规矩。强调色每张图最多用一到两个焦点节点，你要在五个节点上都涂强调色，那等于没有信号了。它还给图纸的目标密度打 4 分，满分 10 分，够技术完整就行，不能密到需要配一份阅读指南。超过 9 个节点，它认为这大概是两张图。

连线规则更细。不是水平或垂直的连接，必须用圆角直角折线，两点之间直接拉斜线是 hard fail，硬失败。两条线必须交叉时，要在次要的那条上画个小圆弧跳过去，不能两条都跳，也不能都不跳。分区矩形最多三个，再多它就说你这是泳道图了，请换类型。画序也是定死的，背景、分区、箭头、节点，箭头画在节点下面。

它还有一句自我约束，不该用的时候会直接告诉你别用。罗列清单去用表格，只有属性前后对比也去用表格，一个形状的「图」就老老实实写句话。动手之前先问一句，读者看这张图，会比看一段写得好的文字收获更多吗。答不上来，就别画。

回到最实际的问题，怎么把它装上。三条路，看你用什么。

用 Claude Code 的，走插件市场。

装完还有一步，跑一次 /plugin，进 Marketplaces，选 diagram-design，打开 Enable auto-update。Claude Code 对第三方市场默认是关着自动更新的，不打开这一步它不会自己升级。

嫌上面麻烦的，一条命令。

它会自己找到 skills/diagram-design/SKILL.md，把 references、assets、scripts 整包装进你选的宿主根目录。如果你选的超过一个，它会停下来问你要哪种装法，推荐 Symlink，一份正本各目录软链过去，以后更新一次到位。想每个宿主各存一份独立的，加 --copy。Windows 上没开开发者模式的话，软链用不了，它会退回复制并告诉你哪几个根是复制的。

还有嫌麻烦的，让claude自己装吧。

装完之后怎么验它生效了，很简单，直接问一句「做个应用架构图，前端、后端、数据库、Redis 缓存」，看它给不给你那个自包含的 HTML。

顺带说一个我挺喜欢的细节。它有一道「风格门槛」，你在一个新项目里画第一张图之前，它会检查 style guide 是不是被改过。如果还是出厂默认那套配色，它会停下来问你要不要现在定制，给你几个选项，丢个网址让它自己抓、指一个本地设计系统的文件夹、直接粘 token、或者保持默认。

我觉得这个设计挺体贴的，因为它知道一件事，一套图好不好看，八成取决于你开头有没有定规矩。开头糊过去，后面二十张图质量堪忧。

这个仓库是 Cathryn Lavery 做的。她写 littlemight.com（个人博客），副业还做着 BestSelf.co，就是做那种自我管理笔记本的公司。她不是专职搞开源的人，是做设计的。

过去这两年大家都在卷模型能力，谁的推理强、谁的上下文长、谁便宜。但真正让我这种天天用工具的人觉得「卧槽这个我要用」的，常常不是模型本身，是某个懂行的人把自己那点专业判断，认认真真写成了机器能读懂的东西。

她做的事情，就是把自己的设计品味翻译成了一套 AI 能执行、还能自己检查的约束。强调色最多两个、连接线不许拉斜线、超过九个节点就拆图。这些东西模型自己想不出来，得有人告诉它。

而她的起点特别小，就是受不了自己反复踩同一个坑。但往往就是这种坑，最后变成了几万个人一起在用的东西。