一句话生成 27 种专业图：Diagram Design 让 AI 画图不再“乱连线”
被“AI 味”图表支配的日常
如果你经常写技术文档、做方案评审，大概率经历过这样的循环：让 AI 画一张架构图，拿回来的是一排长得差不多的圆角框、几根随手一连的线，配色刺眼、间距随意——放进方案文档里，怎么看都像一张临时草图。要么花 30 分钟在 Figma 里硬调，要么干脆放弃配图。
Diagram Design 就是冲着这个问题来的。它是装进 Claude Code、Codex、Pi 等 AI 编程助手的一个开源 Skill（技能插件），不是独立软件。装上之后，你只要用一句话描述需求，它会自动选型、排版，生成一个可直接用浏览器打开的自包含 HTML 文件，内含内联 SVG 和 CSS，无构建步骤、无外部 JavaScript 依赖。项目口号是"Editorial diagrams your designer won’t hate"——设计师不会讨厌的编辑级图表。
它到底解决什么问题
传统路径下，AI 生成的图表通常是"Mermaid 通用款"：圆角矩形、满屏阴影、字体随机、与你的品牌风格完全割裂。而 Mermaid 这类"图即代码"工具适合把图当代码管理进 Git 的场景，draw.io 适合需要精细控制的复杂图，Excalidraw 适合头脑风暴——但“AI 直接出成品、品牌还一致”这一格，此前是空着的。
Diagram Design 的做法是：不重新造画图工具，而是给 AI 补一层“设计品位”，把编辑级审美翻译成一堆 AI 能照做的硬规则。
27 种图型，AI 自己选
项目内置 27 种编辑级图表类型：
- 结构类：架构图、流程图、时序图、状态机、ER 图/数据模型、泳道图、树状图、组织架构图、嵌套图等
- 分析类：象限图、雷达图、维恩图、金字塔/漏斗图、Loop 飞轮图
- 时间类：时间线、甘特图、过程图
- 数据类：柱状图、折线图、散点图、数据流图等
你不用记这些名字。只需要说“帮我画一张应用架构图：前端、后端、数据库、Redis 缓存”，它会先判断这张图该用架构图而不是随便套一个流程图，再控制节点数量、文字长度、留白和连线方向，把最重要的部分留下来。每种图型都有三种视觉变体：极简浅色（适合技术博客）、极简深色（适合深色站点和演示）、全编辑模式（适合官网和 PPT）。
“反 AI 味”的硬约束
作者把设计品味写成了不可协商的规则：
- 删除优先：“最高质量的操作通常是删除”，每个节点都得有存在的理由；两个总是一起出现的节点应该合并，能从布局看出关系就删掉连线
- 复杂度预算：单张图最大节点数 9 个、最大箭头数 12 个、强调色元素最多 2 个，超限就建议拆成“总览 + 详情”两张图
- 克制美学：目标信息密度 4/10；全图只有一种强调色，普通元素只用灰黑色，焦点只留给读者第一眼该看的一两处
- 像素级严谨：所有坐标、宽度、间距必须能被 4 整除；1px 细线边框、无阴影、最大圆角 10px
- 排版三件套：Instrument Serif（标题和斜体旁注）、Geist Sans（节点名）、Geist Mono（端口、URL、字段类型等标签），各司其职
60 秒品牌适配
把你的网站 URL 丢给它，它会抓取首页、提取主色板和字体栈、映射到 paper（背景）、ink（正文）、muted（次要文字）、accent（强调）、link（链接）五个语义角色，写入统一的 style-guide.md，改一处全局生效。之后每张新图自动继承你的品牌色——网站背景色变成图的纸色，CTA 按钮色变成焦点强调色。
另外有两点做得不错：写入前会自动做 WCAG AA 对比度校验，如果配色在图表 9-12px 小字号下看不清，会主动给出调整建议；还支持多客户 profile，做外包、服务多客户的团队可以给每个客户保存独立样式，不同项目里颜色和字体不会互相覆盖。
draw.io 和 Mermaid 旧图一键重绘
博客和文档里躺着大量旧图？不必重画。Diagram Design 支持直接导入 .drawio 文件或 Mermaid 源码，保留组件、关系和分组，抛弃旧坐标、旧配色和自动布局，统一换成你的设计系统。
重绘时有四个控制旋钮：
| 旋钮 | 选项 | 说明 |
|---|---|---|
| format | html / svg / png | SVG 进 Figma，PNG 进 PPT，HTML 上网页 |
| size | 9 种预设 | 文档内嵌、16:9 幻灯片、A4 横版等 |
| detail | faithful / balanced / simplified | 按梯度降级：先删装饰 → 再删重复 → 再并叶子 |
| audience | engineer / mixed / executive | 改措辞不改结构 |
audience 旋钮尤其实用：同一个 Auth Service 节点，给工程师看是完整的接口端口细节，给高管看直接变成 “Sign-in”。每次导入结束还会生成一份 fidelity ledger（保真度台账），列出哪些节点被合并、折叠或丢弃——建议每次都看一遍这份记录，确认关键关系没有被简化掉。
其他值得一说的特性
- 语义模式与可选动效：2.3 版引入语义模式，表达队列瓶颈、信任边界这类“行为”时先选语义再挑视觉类型；动效有 none / reveal / step / loop 四种，默认静态无脚本，开了动效也遵循无障碍契约，
prefers-reduced-motion的用户看到的是完整静态帧 - 导出：SVG 矢量无损可进 Figma/Illustrator 二次编辑，PNG 默认 2 倍清晰度透明背景，预设了 doc-inline（博客正文）、doc-wide（16:9 全宽）、social-og（社交卡片）等尺寸
- 彩蛋原语：编辑风斜体批注（虚线贝塞尔引线）、SVG 湍流滤镜一键手绘风、55 个用 currentColor 自动继承品牌色的单色 IT/云图标
使用前必须知道的边界
README 里专门写了“什么时候不该用它”。结合实际使用体验，有几点要注意：
- 它不是独立软件。没有 CLI、没有 package.json，安装只能通过 Claude Code 插件市场或克隆仓库做符号链接，离开这几款 AI 工具就没法运行。免费的是模板，每张图的生成消耗的是你的模型 token。
- 首次使用有门控。style-guide 还是默认值时，它会停下来问你要不要先做品牌匹配，所以“一句话出图”第一次是行不通的。
- 离线环境的坑。图库首页引用了 Google Fonts 外链，内网/离线环境打开会字体回退；导出 PNG 需要提前装好 Playwright 和 Chromium。
- 它管排版，不管事实。AI 不会自动知道你系统的真实结构——输入里写错的模块和关系，最后只是被画得更整齐的错误。先确认内容，再把排版交给它。
- 信息量有上限。一张图超过 9 个节点就该拆成两张，你不能把几十个模块全塞进去还要求它既完整又清楚。
- 该用表格的场景别硬画图。纯列表、前后对比、一个框就能说清的东西，直接用表格或写一句话。
