本文介绍一个给 Claude Code / Codex 等 AI 编程工具装的开源 Skilldiagram-design。装上之后AI 画出来的不再是通用圆角框而是品牌一致、编辑级、能直接导出的图。全文含安装命令、使用示例和选型对比读完 5 分钟装完 1 分钟。文章目录[toc]一、AI 画图为什么总带AI 味二、diagram-design 是什么三、五个核心能力重点3.1 27 种图型每种 3 个变体3.2 60 秒品牌 onboarding图自动长成你网站的样子3.3 把已有的 draw.io / Mermaid 图重画一遍3.4 语义模式 可选动效3.5 导出外加 3 个彩蛋级原语四、安装与上手3 步Step 1安装Step 2可选绑定你的品牌Step 3直接说人话五、设计哲学高质量靠删六、和 Mermaid / draw.io / Excalidraw 怎么选七、总结一、AI 画图为什么总带AI 味做技术内容、做架构设计、做方案汇报的人估计都干过这事让 AI 画个架构图、流程图吐回来的基本是通用圆角框——字体随机、配色随机、间距随机往 PPT 里一贴、往官网上一放一眼 AI 味。然后你只有两条路花 30 分钟在 Figma 里硬调调到怀疑人生或者算了不画了用文字描述。今天介绍的diagram-design就是来终结这个循环的。先甩数据项目数据GitHubcathrynlavery/diagram-designStar21,0002026-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 LaveryBestSelf.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 个控制旋钮旋钮选项说明formathtml / svg / pngSVG 进 FigmaPNG 进 PPTHTML 上网页size9 种预设文档内嵌、16:9 幻灯片、A4 横版……字号会跟着放大投屏用 16px 节点名而不是 12pxdetailfaithful(≤24节点) / balanced(≤12) / simplified(≤7)按固定梯度降级先删装饰 → 再删重复 → 再并叶子 → 最后删基础设施audienceengineer / 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-back3.5 导出外加 3 个彩蛋级原语SVG 导出提取图节点、注入 Google Fonts浏览器、Figma、Illustrator 里都能独立渲染PNG 导出Playwright 栅格化默认 2 倍分辨率一次性装一下就行3 个彩蛋原语annotation编辑风斜体批注 虚线贝塞尔引线适合文章旁白sketchySVG turbulence 滤镜一键手绘风适合 essay不适合技术文档;icons55 个单色 IT/云图标server、database、Docker、K8s、AWS、Azure、Postgres……全用currentColor自动继承你的品牌色。四、安装与上手3 步Step 1安装Claude Code/plugin marketplaceaddcathrynlavery/diagram-design /plugininstalldiagram-designdiagram-design⚠️ 注意第三方 marketplace 默认关闭自动更新需要去/plugin→ Marketplaces 手动打开 auto-update。Codexcodex plugin marketplaceaddcathrynlavery/diagram-design codex pluginadddiagram-designdiagram-designPipiinstallhttps://github.com/cathrynlavery/diagram-designStep 2可选绑定你的品牌onboard diagram-design 到 https://yoursite.comStep 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-designMermaiddraw.ioExcalidraw生成方式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 种图型、动效、手绘风属于锦上添花不喜欢可以当不存在。让我意外的两点工程严谨度skin lint、标签遮挡节点的几何校验、文档同步检查甚至专门有对抗性测试。README 里列了 6 条成功标准原话是这 6 条里任何一条不满足都是一个值得提的 bug。诚实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 味的图是什么样的装过之后画了什么图欢迎来聊。