狂揽 20K Star，Github连续霸榜，让Claude Code / Codex 生成专业的架构图，效果太棒了！

yfj-unicorn

284人浏览 · 2026-08-21 19:24:32

yfj-unicorn · 2026-08-21 19:24:32 发布

我最近装了一个 Claude Code 插件，然后删掉了存了两年的 draw.io 收藏夹。

不夸张。事情要从一个月前说起——写技术博客需要一张系统架构图，照例让 Claude 帮我生成，得到了一张圆角矩形堆砌的东西：每个框都是蓝色，每条线粗细相近，整体效果像 PPT 默认形状随手拼的。截图放进文章，怎么看都显得没认真做。

然后我发现了 diagram-design——一个开源的 Claude Code 插件，27 种图表类型，开箱就是编辑级品质，还能 60 秒匹配你自己的品牌色。

为什么 AI 生成的图表总有那股"味儿"

先说这个问题本身。AI 画图差，不是因为 AI 不聪明，而是默认行为就是"安全"——通用颜色、通用布局、通用字体，确保不出错，但也确保不好看。

认真观察过 AI 生成的架构图，会发现几个共性：

颜色混乱：每个节点一种颜色，最终看起来像彩虹
重点不突出：所有元素视觉权重相近，读者不知道该看哪里
字体凑合：系统默认字，没有设计感
间距随意：框的大小和位置没有规律，视觉上很"颠"

diagram-design 解决这些问题的方式很直接：给 AI 一套严格的设计系统约束，让它没有机会"自由发挥"。

架构图示例

↑ 默认调色盘：jet black + atomic tangerine，1px 发丝线边框，无阴影

这套设计系统有多"死板"（褒义）

我说"死板"是因为约束程度超出了预期：

强调色只能用于 1-2 个焦点元素，其余节点用中性色
所有坐标、宽度、间距必须是 4 的倍数，没有商量余地
最大圆角 10px，不能再多
字体锁死三种：Instrument Serif（标题和斜体标注）、Geist Sans（节点名称）、Geist Mono（技术子标签，比如端口号、URL）
无阴影，1px 边框

这些约束叠在一起，就是为什么它的输出不像"AI 画的"——所有视觉决策都已经被人工提前做好，AI 只负责填内容。

作者在 README 里有一句话我觉得很准：

The highest-quality move is usually deletion. Every node earns its place.

每个节点都要有存在的理由，目标信息密度是 4/10。

27 种图表类型，基本够用了

全列一遍：架构图、流程图、时序图、状态机、ER 图、时间线、泳道图、象限图、嵌套图、树形图、组织架构图、韦恩图、层级堆栈图、金字塔/漏斗图、顾问 2×2 矩阵、雷达/蜘蛛图、循环飞轮图、IT 现状图、高层级图、条形图、折线图、甘特图、散点图、Process 流程、Medallion 数据分层、数据流图、DP 集成图、DP 安全矩阵。

常见的和不常见的都有。后面几个数据平台相关的（Medallion、数据流、DP 安全矩阵），显然是作者在实际工作里用到过才加的。

三种静态变体开箱即用：最简亮色、最简暗色、全编辑级。生成的是标准 HTML 文件，双击浏览器就能打开，无构建步骤，无外部依赖，没有奇怪的 npm install。

流程图示例

↑ 流程图，全编辑级变体

还有一个比较有意思的是 2.0 新增的"Loop"类型——飞轮图，各站围绕中心 hub 分布，虚线是写回路径：

循环飞轮图

↑ 自我改进循环图，dashed lines 是写回路径

60 秒品牌适配，这个功能真的很实用

对独立开发者和博主来说，这可能是整个项目最有价值的部分。

你只需要说一句话：

onboard diagram-design to https://yoursite.com

Agent 会自动完成：

抓取你的首页
提取主色调和字体栈
把颜色映射到语义角色（paper / ink / muted / accent / link）
给你预览一个 diff
你确认后写入 style-guide.md

之后所有图表都用你网站的品牌色。你的 CTA 颜色变成图表焦点强调色，你的 body 字体变成节点标签字体。

它还会自动做 WCAG AA 对比度检验。如果某个颜色在 9-12px 字号下对比度不够，它会建议一个调整值并解释原因——不是悄悄改掉，而是告诉你为什么改。

从你网站提取的内容	映射为
`<body>` 背景色	`paper` token
主文字色	`ink` token
辅助/说明文字色	`muted` token
品牌色（CTA、链接、标题）	`accent` token
`<h1>` 字体	`title` 字族
`<body>` 字体	`node-name` 字族
`<code>` 字体	`sublabel` 字族

如果你管理多个客户项目，可以保存命名 Profile，在每个项目目录放一个 .diagram-design 标记文件（内容就是 profile: acme），切换品牌零成本，不同项目互不干扰。

draw.io / Mermaid 老图重绘

如果你已经有一堆 draw.io 或者 Mermaid 图表，这个功能能省不少时间：

# 重绘 draw.io 文件，简化细节，面向管理层受众
/diagram-design:import platform.drawio --size=slide-16x9 --detail=simplified --audience=executive

# 批量重绘 README 里所有 Mermaid 代码块
/diagram-design:import-mermaid README.md --diagram=all

核心逻辑是"重绘"而不是"格式转换"——同样的内容，换成这套设计系统，同时可以调节：

目标尺寸：文档内嵌、幻灯片 16:9、社交卡片等 8 种预设
细节密度：faithful（≤24 节点）/ balanced（≤12 节点）/ simplified（≤7 节点）
受众语言：engineer / mixed / executive，影响节点文字的描述方式

draw.io 导入重绘示例

↑ 12 节点的 draw.io 文件，重绘为 balanced 细节用于博客。原来的 6 种粉彩填充变成了一个强调色，手拖坐标变成了 4px 网格。

每次导入结束会输出一个"保真度清单"，列出哪些节点被合并、折叠或删除：

Detail: balanced · 12 source nodes → 8 drawn
Collapsed: "Token valid?" decision → edge label on Gateway → Auth
Dropped:   1 sticky note ("legacy path, to be retired") — unconnected in source
Kept in full: the request path (Web/Mobile → Gateway → Orders → Postgres)

知道哪些东西没进最终图，很有必要。

怎么安装

Claude Code 用户：

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

装完后打开 /plugin → Marketplaces → diagram-design → 开启 Enable auto-update，然后 /reload-plugins。

Codex：

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

Pi：

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

装好之后不需要记命令，直接自然语言就行：

"给我画一张架构图：前端、后端、数据库、Redis 缓存。"
"这个 draw.io 文件帮我重绘成适合演示的风格。"
"给我一个按影响力 vs 工作量排列 Q2 项目的象限图。"

用了两周，说几个直观感受

质量下限高了很多。 以前 AI 画图是"能用但不好看"，现在基本上是"我直接用这个截图"。

语义模式（Semantic Patterns）的设计很克制。 queue、policy trace、trust boundary 这些行为语义和视觉类型是解耦的——不用每加一个语义概念就新增一种图表类型，图表数量控制在 27 种没有继续膨胀。

有一个局限要说清楚：生成的是 HTML，适合放博客和内嵌页面。如果需要 PNG/SVG 用于 PPT 或 Figma，用 /diagram-design:export 导出，PNG 需要本地提前装好 Playwright。如果你的工作流是设计师主导、在 Figma 里多人协作修改，这个工具帮不上什么。

它的定位更像是"写作工具链里的图表能力"——博主、写技术文档的工程师、独立开发者，需要图表但不想在 Figma 上花时间的人。

作者 Cathryn Lavery 是 BestSelf.co 的创始人，她在 README 里坦白了为什么做这个：每次需要架构草图，让 Claude 生成的结果都是圆角矩形堆出来的东西，要么花 30 分钟在 Figma 里改，要么就直接跳过不放图了。于是自己做了个 skill。

这个出发点本身就说明了这个工具适合谁。

GitHub： https://github.com/cathrynlavery/diagram-design

在线图表画廊（先看效果再决定装不装）：https://cathrynlavery.github.io/diagram-design/

你目前用什么方案解决技术文档里的图表问题？draw.io、Mermaid、还是直接让 AI 随便画？欢迎评论区聊聊。

谢谢你阅读我的文章！

我是顾北，我们下去再见！