AI 配图老是方框加箭头? 这个 4.5 万 star 的神器给 Agent 装了 44 种图

大多数人被 AI 配图折磨的瞬间都一样：你让它画一张架构图，它回你几个圆角方框加箭头，配色和字体跟你整篇文档不是一套东西。你不会觉得它错，但你会一眼看出它不是人画的。这个项目就是冲这一件事来的。

作者在 README 里写了自己最初的处境，几乎是你我共同的经历：每次需要一张图——一张架构草图、一张流程图、一个“什么最重要”的金字塔——问 Claude 要，得到的都是 a generic rounded-box thing，跟站点其它部分完全不是一套东西；然后要么花 30 分钟跟 Figma 缠斗，要么干脆不放图。

这段话点出了真正的病灶：AI 出图不是不会画，而是没有一套它可以遵守的规则。它不知道你的品牌色、你的字族、你的间距习惯，更没有“这张图里读者该先看哪一处”的判断力。于是它只能退回到训练数据里最常见的那种图形语言：圆角方框、均分布局、深色底上加一点辉光。

作者的解法是先做一个 Claude Code skill，让 Agent 读你的网站，60 秒内匹配品牌；后面才长成今天这个支持多宿主的插件。而这个项目最反直觉的地方在于，它的设计哲学第一条不是“多画”，而是删：

目标密度被写成 4/10；强调色的用法被限定为每张图 1–2 个焦点元素；连“完成”的判据都不是加法而是减法——图不是什么时候画完的，而是删到不能再删的时候才算完。

绝大多数 AI 画图项目的质量承诺是一堆形容词：优雅、专业、现代。这个项目的承诺是一串可以拿去核对、甚至直接交给 CI 的数字。

它把颜色、排版和 token 收进唯一的事实源 style-guide.md，并且要求所有类型文件用语义角色名引用（写 accent，不写 #f7591f）——因为一旦散落的十六进制值满天飞，规则就没法被检查。默认皮肤是一套冷暖适中的编辑配色：烟白纸色、墨黑、橘子色强调、蓝灰弱化，只映射五个品牌色，其余角色色全部从这五个派生。

真正决定“AI 感”的，是下面这些写死的约束：

其中 4px 栅格和密度预算是这套系统里最不像“审美”的两条，也最能解释它为什么不土：网格让每张图都落在一个统一的节奏上，而密度上限逼着作者做取舍——你没法把十件事塞进一张图里，因为门禁不让你超。每个图类型还有自己的预算行：时序图最多五条生命线，实体关系图最多八个实体，数据库模式图最多五张表，桑基图最多三个阶段。

边界也说得很清楚：你可以换成自己的品牌（onboarding 会读你的网站，采样颜色角色、字体族与字重，并给出取材回执），但换的是 token，不是结构规则——4px 栅格和复杂度预算不会因为你品牌特殊而放松。文档里唯一被允许的豁免是 import 的 faithful 细节档，而且写明连接器那六条规则“永不放松”（The connector rules never relax）。

仓库口号里有一句很冲的话，逐字是 No shadows. No Mermaid slop. 也正因为这句，它最容易被误读成“Mermaid 黑”。但把这个项目读完你会发现，它反的是 Mermaid 的输出，不是 Mermaid 的用户——它甚至专门提供了一个 import-mermaid 命令，把 Mermaid 当输入来用。

区别在于“重绘”和“渲染”这四个字。它的原则原文写得很直白：

也就是说：Mermaid 只提供内容和声明的方向，坐标、主题、类名、形状样式全部丢弃，由本项目的设计系统重新布局。项目在反模式表里把“复现 Mermaid 的渲染器布局”与“深色底加霓虹光”“拿 JetBrains Mono 当通用开发字体”并列，理由只有一句：那等于把自动间距和自动走线搬进来，而不是做一次编辑级的排版。

这条边界被守得很硬：

draw.io 与 Excalidraw 走的是同一套逻辑：Excalidraw 只接受场景文件，导出的 png、svg 会被提取器直接拒绝，因为它要的从来不是你的画布，而是你的结构。

先说个有意思的细节。仓库描述字段至今写着 42 diagram types，但它已经滞后了：类型参考文件实际有 44 个，SKILL.md 写的是 Forty-four visual types，宿主清单里也写着 44 diagram types。按 ADR 0002 的计数修订记录，这个数字从 27 一路走到 44，最近一次是 2026-10-04 加入的斜投影平面图——第 44 个类型。一个能把 78 条门禁命令写进策略文件的项目，偏偏忘了改描述字段，这本身就是它迭代速度的注脚。

更值得注意的是它的分类制度：语义模式和视觉类型是两个轴。语义模式回答“这个系统在做什么”，共 9 个（比如扇入排队与瓶颈、安全铺装路、可追溯的模块拆解）；视觉类型回答“信息怎么排布”，共 44 个。加一个语义模式只需要一个参考文件，因为它必须路由到“最近的既有类型”，绝不新增布局文法。

而类型数不是随便动的。44 和 9 都被硬编码成校验脚本里的常量，ADR 0002 里有句很狠的话：改了这两个计数却不改测试文件，等于悄悄把自己变成了权威。新增类型的唯一门槛是“出现真正新的布局语法”——瀑布图之所以必须是新类型而不是柱状图的变体，是因为它锚定的是一个守恒的累计值，而不是几根互相独立的柱子。

44 种类型大致可以这样分：

这 44 种并不是每个都同等常用，深度也不一致：折线图底下还挂着斜率图、脊线图、流图、名次图四个子变体，象限图有一个咨询顾问专用的 2×2 版，柱状图有哑铃图变体，树状图有马里梅科变体，而这些变体各自都有独立的校验脚本。

一个 45k star 的开源项目，最容易被忽略的部分是它把力气花在了哪里。这个项目的答案很明确：门禁。

先看规模。仓库里有 80 个 Python 脚本，其中 29 个是校验器、27 个是给校验器写的对抗测试；14 份架构决策记录；策略文件里逐条列出 78 条本地门禁命令。CI 主矩阵跑 3 个系统 × 2 个 Python 版本，另有插件打包与 Python 3.9 兼容两个独立作业。

再看门禁的刁钻程度：

里面最值得单独讲的是标签几何。这个项目曾经有两个类型的九个示例带着缺陷发布，而当时所有既有门禁全部通过——因为没有任何一道门禁去读坐标：皮肤检查器看颜色、字体和无障碍，自检脚本看 DOM 结构与动效契约，两边都不碰坐标。于是他们把这件“只能靠眼睛”的事改成了几何规则：因为绘制顺序被固定为背景、区带、箭头、标签、节点，一个标签遮罩如果落在文档中更晚声明的节点上，就会被那个节点的填充盖住，读者看到的是一段断在边框上的文字碎片。校验器因此按文档序判定，完全没有落在节点内部的徽章则依然合法。

这道检查的阈值也被写得明明白白：节点判定为不小于 60×40 的矩形，标签遮罩判定为宽 20–200、高 8–14 的矩形。宽度上限最初是 120，后来发现长等宽标签牌（以及中日韩文字产生的更宽带）整个落在窗口之外、根本没被检查过，才放宽到 200——而放宽的代价被写进了决策记录正文，因为它会让约八十个已发布矩形有被误判的风险。

还有一层纪律是“门禁失败时怎么办”。文档里的原则是：去修事实源，不要为了让失败消失而放宽测试。同一个思路贯穿到发布流程：PR 不允许改动版本号，合并之后由主分支上的流水线补版本号；动效默认静态且无脚本，需要动效时整个文件只允许存在一个控制器脚本，而且它必须与仓库里审核过的控制器逐字节一致——哈希校验一次、字符串相等再查一次、随包自检第三次查。

安装面铺得很宽。五个原生 marketplace 各有一条命令：Claude Code 用 /plugin marketplace add cathrynlavery/diagram-design 加 /plugin install diagram-design@diagram-design，Codex 用 codex plugin marketplace add，GitHub Copilot 用 copilot plugin marketplace add 加 copilot skill list 验证，Factory Droid 用 droid plugin marketplace add 加 --scope user 安装，Pi 用 pi install。没有 marketplace 的宿主（Cursor、Cline、Amp、Gemini CLI 这一类）统一走 npx skills add cathrynlavery/diagram-design；不过要留意，独立安装既不跟随 marketplace 更新，也不带命令面。

有一处容易卡住的细节：Claude Code 对第三方 marketplace 默认关闭自动更新，要手动在插件面板里开一次，之后它才会在启动后自动刷新。

第一次在新项目里出图时，它会拦住你问品牌，给六个选项：给网站 URL、用已安装的 skill、指一个本地设计系统目录、直接粘 token、先用默认、或载入已存档案。匹配完成后会给你一张取材回执，列明采样了哪些 URL、每个颜色的角色、字体族与字重、字体来源地址，以及任何回退。它还会顺手做一次对比度校验：如果品牌色在小字号下过不了 WCAG AA，会提出一个调整值并解释原因。

出图之后的自检很简单，随包分发的脚本跑一下，打印 OK 就算过：python3 skills/diagram-design/scripts/self_check.py my-diagram.html。

日常最实用的三件事：

它明确不适用的情况，项目自己写死在文档里：想要快速画个字符草图，去用纯文本工具；一串并列的东西，用表格或列表；只有属性级的改动前后对比，用表格；只想表达单个方框的“图”，请直接写一句话。它还给了个判断门槛：画之前先问自己——读者从这张图里学到的，会不会比读一段写好的文字更多？答案是不会，就别画。

几个会踩到的坑：

你可以这样验证它值不值：

事实边界：本文所有数字与引文取自 2026-10-08 的仓库快照（版本 2.6.68，约 4.5 万 star，MIT 许可，作者 Cathryn Lavery），仓库迭代很快，类型数、门禁数与命令参数都可能已经变化，安装前请以仓库当前文档为准。需要说清楚的是：我没有在真实宿主上完成安装实测——安装命令、命令面与门禁行为都来自仓库文档与代码，不是我的运行结果；我核实到的确定事实是 44 个类型参考文件与测试脚本里的计数常量一致，而仓库描述字段仍停留在 42。