让 AI 画架构图，结果常常是一堆圆角色块、阴影和「很 AI」的配色——能看懂，但丢不出手。Diagram Design 想解决的就是这件事：它是一个 Agent Skill，让 Claude Code、Cursor、Codex 等按一套编辑部审美，直接吐出单个自包含的 HTML + SVG 文件。
仓库：cathrynlavery/diagram-design，写这篇时约 5.4 万星，MIT 协议。官网：diagramdesign.dev。资料查阅于 2026 年 10 月 14 日。
它是什么
作者 Cathryn Lavery 把「品味」写成了可执行规范：一种强调色、1px 细线、不要阴影、坐标落在 4px 网格上、删比加更重要。模型负责内容结构，Skill 负责让它别画成「圆角盒子垃圾场」（作者原话里的 Mermaid slop）。
你用自然语言提需求，例如：
- 「画我的应用架构：前端、后端、数据库、Redis。」
- 「做一个影响 × 工作量的四象限。」
- 「把这个 bearer token 刷新的时序图画出来。」
- 「按 https://yoursite.com 的品牌色做 onboarding。」
代理会选图类型、说出计划，然后写出一个双击就能打开的 .html，离线也能看（默认可能拉 Google Fonts；可改成系统字体彻底断网）。
能画哪些图
官方写的是 44–45 种类型，常见的都有：架构、时序、状态机、ER、泳道、四象限、甘特、桑基、Wardley、看板、用户旅程，以及比较少见的爆炸轴测图、轴测平面图、架构变更对比（Before / Changes / After）等。
每种还有浅色极简、深色极简、完整编辑版等变体。在线画廊：cathrynlavery.github.io/diagram-design。
它还能：
- 品牌适配：给一个网址，抽取配色和字体，写进 style guide。
- 导入重画：把 draw.io / Mermaid / Excalidraw 源文件「重绘」成这套风格（不是简单格式转换）。
- 导出：SVG / PNG（PNG 需 Playwright），方便丢进幻灯片或 Figma。
怎么装
最通用（Cursor 等 Skills 宿主）：
npx skills add cathrynlavery/diagram-design
Claude Code：
/plugin marketplace add cathrynlavery/diagram-design
/plugin install diagram-design@diagram-design
Codex、Copilot、Pi、Factory Droid 等也有对应 marketplace / plugin 命令，见 README。装好后直接用中文或英文描述要画的图即可。
和 Mermaid、draw.io 比，差在哪
| Mermaid / PlantUML | draw.io / Excalidraw | Diagram Design | |
|---|---|---|---|
| 怎么做 | 写文本 | 手拖形状 | 跟代理说人话 |
| 观感 | 渲染器主题 | 你手动画成什么样 | 固定的编辑部风格 + 可套品牌 |
| 产物 | 文本（GitHub 可渲染） | 可继续拖的工程文件 | 单个 HTML（可再导出 SVG/PNG） |
| 以后改 | 改文本 | 打开画布 | 再问代理，或手改 SVG |
作者自己也写了什么时候别用它：
- 要进 Git、每星期都改的图 → 继续用 Mermaid，方便 diff。
- 只要推特/终端里的字符图 → 别用这个。
- 列表、前后对比一张表就够 → 别硬画。
另外：输出质量跟你用的模型有关，同一句话两次布局可能不一样；产物也不是「可 diff 的源码格式」。它适合要发出去的那一张图，不是仓库里天天改的那一张。
优点
- 审美明确，比默认「AI 架构图」耐看，适合博客、文档封面、演示文稿。
- 一种文件、双击即开，分享成本低。
- 覆盖图类型多，还支持品牌 onboarding 和旧图重绘。
- MIT，安装路径跟现在的 Agent Skills 生态对齐。
不足
- 不适合作为长期演进的「源文件」；协作改图、PR diff 仍是 Mermaid / draw.io 更强。
- 依赖代理和模型，结果不稳定时需要多轮重画。
- 技能本身体积和文档都很重，第一次理解「类型 / 语义模式 / 导出」有学习曲线。
- 默认字体可能访问 Google Fonts；内网环境要记得切 system fonts。
适合谁
- 经常写技术博客、做方案演示，受够了 AI 默认图审美的人。
- 已经在用 Claude Code / Cursor，想「说一句话出一张能发的图」的人。
- 有现成 Mermaid / draw.io，想快速出一版「好看但仍是同一套内容」的人。
若你的图要进代码仓库长期维护，留下 Mermaid；若你要的是今天晚上就要贴进文章的那张图，Diagram Design 很对症。
