你有没有过这种经历？
让 Claude 或 ChatGPT 画一张架构图，结果出来的全是圆角矩形 + 阴影 + 默认蓝紫配色的"AI 味"示意图。发进 PPT 里显得廉价，贴到技术文档里像是从某个模板网站随手下载的。
Mermaid 确实方便，但好看真的算不上。
昨天，一个名叫 diagram-design 的开源项目横空出世，单日狂揽 2,951 Star，直接登顶 GitHub 趋势榜。它的口号非常直白："No shadows, no Mermaid-slop."
它的目标是编辑级品质的图表——那种你可以直接放进投资人 PPT、技术白皮书、或者公众号文章的图。
一、痛点：为什么大多AI画的图总显得"廉价"？
在技术传播领域，一张好图胜过千言万语。但现实中，我们面临三大困境：
1. AI 生成图表的"千篇一律"
无论是 Mermaid、PlantUML 还是各类 AI 画图工具，默认输出都逃不开几个特征：大圆角、重阴影、渐变色、默认字体。这种"AI 美学"在大模型普及后迅速泛滥，读者一眼就能辨认出"这是 AI 画的"——专业感瞬间清零。
2. 品牌一致性难以保障
公司技术博客要发架构图，PPT 要做给投资人看的流程图，公众号要插入时序图——每一张图的配色、字体、风格都可能不同。没有设计背景的开发者和产品经理，很难手动统一这些视觉元素。
3. 从草稿到成品的"最后一公里"
Mermaid 画草稿很快，但要把它变成能放进正式文档的图，往往需要导入 Figma、手动调整排版、替换字体、统一配色……原本 5 分钟的需求，变成了 30 分钟的设计工作。
Cathryn Lavery 在自述中写道："每次我需要一张图，都要和 Figma 搏斗 30 分钟。所以我造了这个工具，让 Claude Code 一键生成编辑级图表。"
二、动机：为什么是现在？
2026 年的开发者工具生态正在经历一场静默革命：AI 编码代理（Agent）不再只是帮你写代码，它们开始接管整个工作流——从架构设计到文档撰写，从代码审查到演示准备。
但在这个链条中，可视化输出始终是短板。代理可以生成完美的 JSON、写出优雅的函数，但画出来的图却像是 2005 年的 PowerPoint 模板。
diagram-design 的诞生正是为了填补这个缺口。它的核心假设是：
AI 代理生成的图表，应该和《经济学人》的配图一样精美
三、29 种图表类型全景图
diagram-design 提供 29 种编辑级图表类型，每种都有三种视觉变体：极简浅色、极简深色、完整编辑风格。
四、核心亮点拆解
亮点 1：60 秒品牌定制，告别"默认蓝紫"
这是 diagram-design 最惊艳的功能。你只需要给 Agent 一个指令：
onboard diagram-design to https://yoursite.com
Agent 会立即抓取你的网站首页，自动提取主色调、字体栈、背景色，并映射到设计系统的语义 Token：
更妙的是，它还会自动做 WCAG AA 对比度检查。如果你的品牌色在图表字号（9-12px）下对比度不达标，它会提出调整建议并解释原因。
亮点 2：从 Mermaid / draw.io "重绘"而非简单转换
很多人手里有一堆现成的 Mermaid 或 draw.io 图表。diagram-design 不是做格式转换——它是"重绘"。
你传入一个 .drawio 或 .mmd 文件，Agent 会：
- 丢弃源坐标、源配色、源字体（这些正是"丑"的根源）
- 输出一份"保真度账本"，告诉你哪些节点被合并、折叠或丢弃
四个调节旋钮让你精细控制输出：
| | |
|---|
| html / svg / png / html+png | |
| doc-inline / slide-16x9 / social-og 等 8 种 | |
| faithful / balanced / simplified | 保留多少源内容（≤24 / ≤12 / ≤7 节点） |
| engineer / mixed / executive | |
亮点 3：设计系统的"反 AI 美学"规则
diagram-design 有一整套刻意对抗"AI 默认风格"的设计规范：
- 1px 发丝边框，拒绝粗重描边
- 无阴影，拒绝悬浮卡片感
- 最大圆角 10px，拒绝大圆角泛滥
- 所有坐标、宽度、间距必须能被 4 整除——这是防止图表看起来"AI 生成"的关键规则
- 一个强调色，每张图仅 1-2 个焦点元素突出
- 三种字体族分工明确：Instrument Serif（标题）、Geist Sans（节点名）、Geist Mono（技术标签）
亮点 4：渐进式加载，不占上下文窗口
作为 Agent Skill，它采用了渐进式披露架构：
▲ 渐进式加载设计：37 个引用文件按需读取，避免一次性塞满 Agent 上下文窗口
整套系统包含 37 个引用文件，但 Agent 每次只加载当前任务需要的几个，极大地节省了上下文空间。
亮点 5：可访问性内置，不是事后补丁
每个生成的 SVG 都自带：
- 首子元素包含
role="img" 和 aria-labelledby
五、三分钟上手
diagram-design 支持四大 AI 编码平台，安装都很简单：
Claude Code
/plugin marketplace add cathrynlavery/diagram-design/plugin install diagram-design@diagram-design
Pi
pi install https://github.com/cathrynlavery/diagram-design
Codex
npx skills add https://github.com/cathrynlavery/diagram-design --skill diagram-design
Claude Cowork
Customize → Directory → Plugins → + → 粘贴 cathrynlavery/diagram-design → Sync
可编辑安装（推荐用于自定义风格）
git clone git@github.com:cathrynlavery/diagram-design.git ~/code/diagram-design# Claude Code 符号链接ln -s ~/code/diagram-design/skills/diagram-design ~/.claude/skills/diagram-design# Pipi install ~/code/diagram-design
六、写在最后
当大模型让代码、文案、甚至视频都变得触手可及时，审美和品味反而成了最稀缺的资源。Cathryn Lavery 作为一位有设计背景的创业者，把她对"编辑级品质"的执念编码成了 Agent Skill，让普通开发者也能一键输出媲美《经济学人》配图的图表。
项目的核心判断标准也很值得记住：
读者从这张图中能学到的，比从一段写好的文字中学到的更多吗？如果不能，就不要画。
这是对可视化本质的回归。图不是为了"有个图"，而是为了传递文字无法高效传递的信息。
🚀 项目信息
仓库：github.com/cathrynlavery/diagram-design协议：MIT（可商用）版本：v2.0.0 · 84 commits支持：Claude Code / Pi / Codex / Claude Cowork
