AI 画的架构图太丑?GitHub 开源 diagram-design,22K星让 Claude Co

你让 Claude Code 画个架构图，出来的东西是不是又是那套——一堆圆角框，配色土，线乱成一团，贴进文档里你都不好意思给同事看。

要么就是 Mermaid 。能用，但长着一张"模板脸"，看十张跟看一张似的——你就没怀疑过，凭什么 AI 写代码那么溜，画个图就这么糊弄？

这不是你一个人遇到的事。有个开发者也是被这玩意折磨到受不了，于是干脆自己写了个 skill ，让 AI 出图的审美直接拉到一个"设计师不会翻白眼"的水平。项目叫 diagram-design^[1]， GitHub 上 22.6K 星（截至写稿时），而且就这一周涨了 15.8K 星——这速度说明戳中的不是小众痛点，是无数人每天在骂的事。

它到底解决了什么

作者 Cathryn Lavery 自己写博客、做产品，每次要一张架构图、流程图，问 Claude 一句，回来一个"generic rounded-box thing"——跟网站其他地方完全不搭。要么跟 Figma 死磕 30 分钟调颜色，要么干脆不画了。

所以它做的是一个 Claude Code 的 skill （插件），内置 28 种图表类型：架构图、流程图、时序图、状态机、 ER 数据模型、时间线、泳道图、象限图、树、组织架构图、维恩图、层叠、金字塔、雷达图、甘特图、散点图、 treemap……基本把你写文档、做汇报、画架构时会用到的图全覆盖了。

关键在它输出的东西：自包含的 HTML + SVG ，没有构建步骤、没有 JavaScript 、没有外部图片依赖。双击就能在浏览器打开，离线也能看。 README 里那句话说得很直白——"No Figma. No generic rounded boxes. No 30-minute color-picking sessions."

它自己给了个词叫 "Mermaid-slop"，翻译过来就是"Mermaid 出品的批量难看"。这词挺损，但精准。

怎么装，一分钟

它不挑平台，你在用哪个 AI 编程工具就装哪个：

Claude Code ：

/plugin marketplace add cathrynlavery/diagram-design
/plugin install diagram-design@diagram-design

Codex ：

codex plugin marketplace add cathrynlavery/diagram-design
codex plugin add diagram-design@diagram-design

Pi 更省事，一行：

pi install https://github.com/cathrynlavery/diagram-design

装完，你直接说人话就行：

"帮我画一个 app 的架构图：前端、后端、数据库、 Redis 缓存。"
"我要一个象限图，按影响力和工作量排一下 Q2 的项目。"

Agent 自己选类型、生成 HTML 、存盘。你连模板都懒得选，直接 cp 它的 template 文件改也行。

它凭什么比 Mermaid 好看

这是核心问题，得拆清楚，不然就是又一个"好看"的空话。

Mermaid 的难看，根子上是它只有一种"图表皮肤"——布局是自动的、字体是默认的、颜色是写死的。你换不了风格，最多改个主题色，改完还是那副骨架。

diagram-design 干的是设计系统级别的活。它定死了一套规矩：

•一个强调色。整张图只用一个 accent 色，而且这个色只留给"读者第一眼该看的 1-2 个东西"。剩下全是灰阶。这跟大多数图"五颜六色全往上面堆"是反着来的。

•三套字体各司其职：标题用衬线体（ Instrument Serif ），节点名用无衬线（ Geist ），技术细节用等宽（ Geist Mono ）。该优雅的优雅，该严谨的严谨。

•1px 细边框、零阴影、圆角不超过 10px。

•所有坐标、宽度、间距都是 4 的倍数——这听起来像强迫症，但 README 原话说这是"让图不显 AI 味"的关键。

最狠的是 onboarding。你跟它说一句"onboard 到 https://yoursite.com"，它去抓你网站首页，提取你的主色、字体、背景色，然后把你网站的颜色变成图的背景、你 CTA 按钮的颜色变成图的强调色、你正文的字体变成节点字体。

60 秒，你的图跟你的网站长得一模一样。这是 Mermaid 给不了的东西——Mermaid 永远只能给你"Mermaid 的样子"。

把旧的 draw.io 和 Mermaid 图重绘一遍

这个功能我觉得比"新画"还实用。你那些压箱底的 draw.io 文件、 README 里的 Mermaid 块，不用重做，直接让它重绘：

/diagram-design:import-drawio platform.drawio
/diagram-design:import-mermaid architecture.mmd --size=slide-16x9 --detail=simplified

重绘不是简单转格式，它给你四个旋钮去控制成品：

旋钮	选项	管什么
格式	html / svg / png	交付物——网页用 HTML ， Figma 用 SVG ， PPT 用 PNG
尺寸	slide-16x9 / doc-wide / social-og…	viewBox 和字号档位
详略	faithful / balanced / simplified	保留多少节点（≤24 / ≤12 / ≤7 ）
受众	engineer / mixed / executive	措辞——"Auth Service / JWT · RS256"变成"Sign-in"

而且每次重绘完会给你一张"保真账本"：哪些节点合并了、哪些删了、为什么。删了你一眼能看出来，不怕它偷偷给你丢东西。

跟 Mermaid 、 Excalidraw 、 draw.io 比

这四个放一起比，定位其实分得很开：

工具	星数	定位	你的感受
Mermaid^[2]	89.8K	文本转图表，行业标准	快，但丑，改不了风格
Excalidraw^[3]	130K	手绘风白板	自由，适合草图，正式文档不够"编辑级"
draw.io / diagrams.net	—	老牌图形编辑器	功能全，但要手动拖，慢
diagram-design	22.6K	AI 生成编辑级图表	交给 AI 出图，审美在线，能品牌化

我的判断很直接：如果你要的是"AI 直接给你一张能放进去用的图"， diagram-design 目前是最优解。 Mermaid 是给机器读的， diagram-design 是给人看的； Excalidraw 是画草图的，它是出成品的； draw.io 是手动抠的，它是让 AI 自动抠的。

这意味着你可以这么做：先在 Claude Code 里装好，下次要画架构图时直接让它出一张，贴进文档里看效果——不满意就让它 onboarding 你自己的网站重新出一遍，前后用不了五分钟。

它跟 Mermaid 甚至不算纯竞争——它能把 Mermaid 源重绘成编辑级，相当于给 Mermaid 换了个高级皮肤。你是可以两者都留着的。

我翻了 Issues ，新项目该有的毛病它都有

22.6K 星不代表它成熟。我翻了它的 Issues ，说实话，它还很"新"——大量 open 的 issue 都是求功能的，这说明核心功能对，但边角还没打磨完。

PNG 导出有点坑。#59 直接抱怨：导出 PNG 现在强制要求装 Chromium （pip install playwright && playwright install chromium）。你只想导张 PNG 去贴 PPT ，结果先得拉一个浏览器内核下来，就离谱。 SVG 倒是干净，直接抽出来就行。

图表类型还在补。一堆 feature 请求在排队： sankey 桑基图、鱼骨图、雷达轮、云架构专用的容器语法……#79 标题直接是"再加 10 种类型"。这说明它现在这 28 种够你用，但你心里得有个数——它不是"全类型覆盖"的完整品，是"主流类型做得精致"的精品。

它对中文内容不保证。 README 里还举了个例子，让它重绘时支持"この Mermaid をスライド用にきれいにして"这种日文指令，说明多语言是被验证过的。但字体这一层，你 onboarding 中文网站、用中文字体出图时，衬线体那套"编辑感"能不能完整还原，我没实测过，别抱太高期待。

这几个坑的共同点是——都不致命，但都提醒你它是个 2026 年 4 月才建仓的新项目。核心的出图质量是过硬的，周边（导出、类型覆盖、多语言字体）在追。

什么时候别用它

这个必须说清楚，否则你拿它乱用会翻车。

它自己在 README 末尾列了"什么时候不用"：推特上的 unicode 小图、列表、对比表格、一个框就完事的东西——这些场景，你写一句话比画一张图清楚。

反过来，它的最佳场景是：你要在正式文档、博客、汇报里放一张架构图或流程图，而且希望它好看、跟你的品牌一致、能直接交付。这种时候，它一张图的价值顶得上你在 Figma 里抠半小时。想省事的话，先拿它画一张你最常画的图——比如系统架构图——跟原来 Mermaid 的版本并排看，自己判断值不值。

一个有意思的信号是——它把"删"当成最高级的动作："最高质量的动作通常是删除，每个节点都得配得上它的位置，强调色只留给 1-2 个焦点，目标密度 4/10 。" 这思路放在"AI 出图"这个方向上是反潮流的。别人都在让 AI 往多了画，它在教 AI 往少了删。

至于"AI 出图"会不会变成写文档的默认动作、人人都会有一个自己的 diagram skill——这方向现在才刚起步。它 22.6K 星里，有多少是尝鲜、有多少会沉淀成工作流，还得再看几个月。

参考链接

[1] diagram-design: https://github.com/cathrynlavery/diagram-design

[2] Mermaid: https://github.com/mermaid-js/mermaid

[3] Excalidraw: https://github.com/excalidraw/excalidraw