本文介绍一个给 Claude Code / Codex 等 AI 编程工具装的开源 Skill：diagram-design。装上之后，AI 画出来的不再是"通用圆角框"，而是品牌一致、编辑级、能直接导出的图。全文含安装命令、使用示例和选型对比，读完 5 分钟，装完 1 分钟。

文章目录

一、AI 画图为什么总带"AI 味"

做技术内容、做架构设计、做方案汇报的人，估计都干过这事：让 AI 画个架构图、流程图，吐回来的基本是"通用圆角框"——字体随机、配色随机、间距随机，往 PPT 里一贴、往官网上一放，一眼 AI 味。

然后你只有两条路：

  • 花 30 分钟在 Figma 里硬调，调到怀疑人生；
  • 或者算了，不画了，用文字描述。

今天介绍的 diagram-design 就是来终结这个循环的。先甩数据：

项目 数据
GitHub cathrynlavery/diagram-design
Star 21,000+（2026-04-16 创建，4 个月）
协议 MIT
当前版本 2.3.1（作者持续在提交）

一句话：它是装给 Claude Code、Codex、Pi 这类 AI 编程工具的"图表设计系统"，内置 27 种编辑级图型，读一下你的网站，60 秒匹配你的品牌色，输出自包含文件，浏览器直接打开。

二、diagram-design 是什么

一句话定义：它是一个 agent skill（技能插件），不是独立软件，也不是网页工具。 它装进你的 AI 编程环境里，AI 画图的"审美"就换了。

几个关键点：

  • 内置 27 种"编辑级"图表类型：架构图、流程图、时序图、状态机、ER 图、时间线、泳道图、四象限、树状图、组织架构图、韦恩图、金字塔/漏斗、2×2 矩阵、雷达图、甘特图、柱状/折线/散点图……技术场景要画的图基本都覆盖；
  • 输出自包含 HTML + SVG：无构建步骤、无外部依赖、没有 JavaScript，浏览器直接打开就能看；
  • 作者是 Cathryn Lavery（BestSelf.co 创始人，在 littlemight.com 写 AI 和设计），她的出发点特别"产品人"：自己每次要画架构草图，问 AI 拿回来的都是通用圆角框，跟网站风格完全不搭，干脆自己写了这个 skill。

README 里有两句话，把项目态度说得很直白：

“Editorial diagrams your designer won’t hate.” —— 你的设计师不会讨厌的编辑级图表。

No Figma. No generic rounded boxes. No 30-minute color-picking sessions.
不用 Figma，没有通用圆角框，没有 30 分钟配色环节。

先放一张它真实的输出（作者个人网站的内容架构，也是 README 头图）：
在这里插入图片描述
↑ 注意看：单强调色、发丝线边框、4 倍数网格对齐——这就是它说的"编辑级"。

三、五个核心能力（重点）

3.1 27 种图型，每种 3 个变体

每种图型都带 3 个静态变体：

变体 用途
minimal light 浅色文档、技术博客
minimal dark 深色站点、终端风
full editorial 官网、产品发布、PPT

全部静态、无脚本、无外部图片依赖。抽两张仓库里的真实输出看看水平：

在这里插入图片描述

↑ 流程图：决策逻辑

在这里插入图片描述

↑ 时序图：随时间推移的消息

3.2 60 秒"品牌 onboarding"：图自动长成你网站的样子

这是我认为最惊艳的功能。 把你的网站 URL 丢给它，它自动做四件事：

1. 抓你的首页
2. 提取主色板 + 字体栈
3. 映射到 5 个语义角色：paper(背景) / ink(正文) / muted(次级文字) / accent(强调) / link(链接)
4. 给你看一份 diff，确认后写进样式指南

之后每画一张新图自动用你的品牌色和字体：网站背景色变成图的纸色，CTA 按钮色变成焦点强调色，正文字体变成节点标签字体。

更狠的两个细节：

  • 写入前自动做 WCAG AA 对比度检查。如果你的配色在图表 9~12px 小字号下看不清，它会主动给一个调整值并解释为什么——这个细节，很多正经设计工具都不做；
  • 支持多客户 profile：一次 onboarding 存成命名 profile，以后每个客户项目里放个 marker 文件就自动套用对应品牌。做外包、服务多客户的，这是刚需。

3.3 把已有的 draw.io / Mermaid 图重画一遍

这可能是最实用的一块。 手上已经有 draw.io 或 Mermaid 的图？直接指着源文件，它会"重画"——内容不变，换成这套设计系统。

输出前给你 4 个控制旋钮：

旋钮 选项 说明
format html / svg / png SVG 进 Figma，PNG 进 PPT，HTML 上网页
size 9 种预设 文档内嵌、16:9 幻灯片、A4 横版……字号会跟着放大，投屏用 16px 节点名而不是 12px
detail faithful(≤24节点) / balanced(≤12) / simplified(≤7) 按固定梯度降级：先删装饰 → 再删重复 → 再并叶子 → 最后删基础设施
audience engineer / mixed / executive 改的是措辞，不是数量

audience 这个旋钮举个例子：一个节点原来叫 Auth Service / JWT · RS256 · :8443，给混合观众看变成 Auth Service / token check，给高管看直接是 Sign-in。

每次导入结束还会生成一份 fidelity ledger（保真度台账）：哪些节点被合并了、哪些被丢掉了，白纸黑字列出来。

仓库里这张就是从一份 .drawio 文件重画出来的：

在这里插入图片描述

↑ 源文件是 draw.io 导出的 .drawio，重画后风格直接对齐设计系统，节点内容不变。

3.4 语义模式 + 可选动效

2.3 版引入了"语义模式"：当你要表达的是行为（队列瓶颈、策略审计轨迹、信任边界、补偿性安全层……）时，先选语义模式，再挑最接近的视觉类型。好处是新行为不用新增类型，图型数量不会无限膨胀。

动效是可选的：none / reveal / step / loop 四种模式。默认静态无脚本；开了动效也走无障碍契约，prefers-reduced-motion 的用户看到的是完整静态帧。

2.0 新加的 Loop 图型（带共享记忆中枢的飞轮）长这样，虚线是 write-back：

在这里插入图片描述

↑ Loop：飞轮 + 站点对，虚线是回写（write-back）

3.5 导出，外加 3 个"彩蛋级"原语

  • SVG 导出：提取图节点、注入 Google Fonts，浏览器、Figma、Illustrator 里都能独立渲染；
  • PNG 导出：Playwright 栅格化，默认 2 倍分辨率，一次性装一下就行；
  • 3 个彩蛋原语：
    • annotation：编辑风斜体批注 + 虚线贝塞尔引线，适合文章旁白；
    • sketchy：SVG turbulence 滤镜一键"手绘风"（适合 essay，不适合技术文档）;
    • icons：55 个单色 IT/云图标（server、database、Docker、K8s、AWS、Azure、Postgres……），全用 currentColor，自动继承你的品牌色。

四、安装与上手（3 步）

Step 1：安装

Claude Code：

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

⚠️ 注意：第三方 marketplace 默认关闭自动更新，需要去 /plugin → Marketplaces 手动打开 auto-update。

Codex：

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

Pi：

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

Step 2：（可选）绑定你的品牌

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

Step 3：直接说人话

装完不用学语法，自然语言就行：

  • “帮我画个架构图：前端、后端、数据库、Redis 缓存”
  • “画个四象限：Q2 项目按影响力 vs 工作量分布”
  • “把这份 drawio 重画一版给我做 deck 用”
  • “onboard diagram-design 到 https://yoursite.com”

一句话：从安装到第一张图，熟练的话不超过 1 分钟。

五、设计哲学：高质量靠"删"

这块值得单独说，也是整个项目的灵魂。作者把设计约束写成了硬规则：

  • 全图只有一种强调色，焦点元素只有 1~2 个——读者第一眼该看什么，就只强调什么；
  • 1px 发丝线边框，无阴影，最大圆角 10px；
  • 所有坐标、宽度、间距必须是 4 的倍数——“non-negotiable”（不可协商），这是图不显 AI 味的关键；
  • 目标视觉密度：4/10；
  • 三套字体各司其职：Instrument Serif（标题）、Geist Sans（节点名）、Geist Mono（端口、URL、字段类型）。

原话是：

“The highest-quality move is usually deletion. Every node earns its place.”
最好的操作通常是删减。每个节点都得有存在的理由。

更难得的是，README 里专门写了"什么时候不该用这个 skill"：

  • 想在推特里随手丢个 unicode 小图 → 别用它；
  • 列表、前后对比 → 直接用表格；
  • 就一个框加一个标签的"图" → 直接写句话。

判断标准是：读者从这张图里，能不能比从一个写得好段落里学到更多？不能，就别画。

这种自我约束，在 AI 工具项目里挺少见的。

六、和 Mermaid / draw.io / Excalidraw 怎么选

维度 diagram-design Mermaid draw.io Excalidraw
生成方式 AI 自然语言生成 写 DSL 代码生成 纯手绘 手绘风白板
风格 编辑级、品牌一致 固定默认样式，难改 取决于你自己 手绘风
品牌适配 60 秒 onboarding 需手写 theme 手动配 手动配
适合谁 要直接产出成品的 图当代码管理进 Git 的 复杂图、精细控制 头脑风暴、草图
学习成本 零（会说话就行） 学 DSL 语法 低但耗时 零

一句话：Mermaid 适合"图即代码"进仓库的场景；draw.io 适合需要精细控制的复杂图；要"AI 直接出成品、品牌还一致"，用 diagram-design。它们不互斥，diagram-design 还能反过来重画你的 Mermaid/draw.io 图。

七、总结

最值钱的三块：品牌 onboarding、draw.io/Mermaid 重画、4 个控制旋钮。它们补的是实打实的痛点——“图和品牌色不搭”、“老图太丑要重做”、“同一张图要出 PPT 版和高管版”。27 种图型、动效、手绘风属于锦上添花，不喜欢可以当不存在。

让我意外的两点：

  1. 工程严谨度：skin lint、标签遮挡节点的几何校验、文档同步检查，甚至专门有"对抗性测试"。README 里列了 6 条"成功标准"，原话是：这 6 条里任何一条不满足，都是一个值得提的 bug。
  2. 诚实：README 明明白白写了"什么时候别用它"，这在 AI 工具里很少见。

限制也说清楚：

  • 它是 agent skill，得装在 Claude Code / Codex / Pi 这类环境里用，不是独立网页工具；
  • PNG 导出需要一次性安装 Playwright。

项目地址：

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

在线画廊（建议先点开看看 27 种图型再回来装）：https://cathrynlavery.github.io/diagram-design/

如果这篇文章帮你省下了跟 Figma 较劲的 30 分钟，点赞、收藏、关注三连支持一下，更新不迷路。

评论区聊一个：你见过最"AI 味"的图是什么样的？装过之后画了什么图？欢迎来聊。

# 人工智能 # 开源工具
Logo
MCP技术社区

欢迎加入 MCP 技术社区！与志同道合者携手前行，一同解锁 MCP 技术的无限可能！

更多推荐

企业AI基础设施架构的路径选择：共享底座与联邦互通的长期权衡

本文系统分析了企业AI基础设施的两条演进路线——联邦互通与共享运行时底座。联邦互通通过MCP等协议实现Agent间标准化连接，适合中小规模、快速试错场景；共享底座则通过统一执行层实现全流程可观测、可审计、可管控，适用于大规模、强合规的企业级部署。文章深入探讨了两者的核心分歧、共享底座的六层架构设计、关键设计取舍、成本收益分析，并提供了渐进式落地路径和决策框架，指出两种模式将长期共存、互补演进，企业

avatar MCP技术社区
cover

API网关的作用？MAI Gateway带你快速理解AI网关核心概念

avatar MCP技术社区
cover

使用ChatGPT登录到Codex卡住？2026年6种排查与解决方法

avatar MCP技术社区