先问一个问题：你让 AI 画过架构图吗？

你大概率遇到过这样的场景——在 Claude Code 或者 ChatGPT 里输入一句"帮我画一个前端、后端、数据库的架构图"，几秒钟后返回一张图：圆角方框、蓝绿渐变、一点若有若无的阴影。逻辑倒是没问题，但你就是不敢把它放进文档。放进去吧，像随手找的模板配图；不放吧，又觉得少了点什么。最后大多数人选了第三条路：算了，这页不配图了。

diagram-design 这个项目，就是冲着这个尴尬来的。

它的口号翻译过来是："编辑级图表，你的设计师不会讨厌。"作者 Cathryn Lavery 自己写技术博客，每次需要配图时，AI 给她的永远是那种"通用圆角方块"，跟网站风格毫无关系。她的选择跟大多数人一样：要么跟 Figma 较劲三十分钟，要么干脆跳过配图。直到有一天她琢磨过味来：模型早就懂内容了，缺的是品味。于是她做了一件很聪明的事——把品味写下来，写成 AI 能读懂的规则文件。

这就是 diagram-design：一个给 AI 编程助手用的技能包（Skill），装上之后，你的 Agent 画出来的图，直接就是"能发布"的水准。

它到底是什么

一句话说清：diagram-design 把专业的图表设计规范，封装成了一个 Agent 可以调用的技能，输出物是一份自包含的 HTML + SVG 文件。

项目采用 MIT 协议，官方口径是覆盖 45 种图表类型，每一种都提供三个静态变体：极简亮色、极简暗色、完整编辑版。你双击生成的文件就能在浏览器里打开，没有构建步骤，不依赖任何外部图片。

diagram-design 生成的架构图示例

这类图表涵盖了技术文档和商业汇报里的绝大多数场景：架构图、流程图、时序图、ER 图、甘特图、象限图、桑基图、鱼骨图、Wardley 地图……甚至还有爆炸轴测图（把一个手机或键盘的零部件沿一根轴拆开的那种图）。官方还维护了一个在线画廊，所有类型、所有变体都可以直接翻看。

它跟 Mermaid、draw.io 的关系，README 里有一张对比表说得很直白：Mermaid 是写文本、draw.io 是手动拖形状，而 diagram-design 是你用自然语言描述，Agent 在 4px 网格上摆放元素，输出带内联 SVG 的 HTML。作者也没有讳言短板：输出质量取决于你用的模型，同一个提示词画两次布局可能不一样；它不是可编辑的源格式，没有文本可以 diff，也没有画布可以拖框。如果你的图需要住在 Git 里、每个 sprint 都改，Mermaid 仍然是更合适的选择——diagram-design 瞄准的是"你打算发布出去"的那张图。

最妙的设计：六十秒，让图长成你家的样子

如果说"能画图"这件事不值得大惊小怪，那品牌适配这个功能，就是 diagram-design 真正拉开差距的地方。

你只需要对 Agent 说一句：

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

接下来的流程是：技能抓取你的网站首页，提取主色调和字体栈，映射到语义化设计令牌上——paper（背景）、ink（文字）、muted（次级文字）、accent（强调）、link（链接），给你看一份改动预览，确认后写入配置文件。之后每张图用的都是你自己的配色和字体：网站背景色就是图的背景色，CTA 按钮色就是焦点强调色，正文字体就是节点标签字体。

更较真的是，写入令牌前它会自动做 WCAG AA 对比度检查：品牌色在图示字号（9 到 12px）下可读性不达标，它会提出调整值并解释原因。整个流程约一分钟，作者管这叫"六十秒的品牌对齐"。

它还会生成一份"保真回执"（fidelity receipt）：采样了哪些 URL、每个颜色角色对应的具体值、字体家族和字重、用了什么回退方案，一条条列清楚。网站字体是直接用还是被静默替换成了系统字体，回执上看得见——这种"把适配过程本身也当成交付物"的思路，很少见。

它怎么做到 45 种类型还不把上下文撑爆

这是整个项目里工程上最漂亮的一笔：渐进式披露（progressive disclosure）。

45 种图表类型，如果每种都配一份详细规范文件、一次性全塞给 Agent，上下文窗口瞬间就炸了。diagram-design 的做法是分层加载：Agent 启动时只看到技能的名字和描述；请求匹配上之后，加载主文件 SKILL.md；只有当你明确要画某种图时，才加载对应的那一份类型参考。

你说"画个流程图"，它加载的是 SKILL.md + type-flowchart.md，别的类型文件一个字节都不读；你说"画个带 401 刷新 token 的 bearer 调用时序图"，它加载的是 type-sequence.md。这意味着类型库可以随便扩张——今天加一种新图型，Agent 的常规开销一点不变。

顺带一提，它还内置了 9 个"语义模式"，专门处理行为类需求：扇入队列、重复的阶段槽、非结构化输入转换、成对的策略追踪、安全通道、治理目录……这些模式定义的是"要表达什么"，跟"用什么图型画"完全解耦。技能的工作流是先选语义模式，再选视觉类型——内容优先于形式，这个顺序值得所有做 AI 工具的人抄回去。

已有图纸别扔，它能整个重画

很多人手上已经有 draw.io 文件和 Mermaid 代码块了，迁移成本是个问题。diagram-design 的答案是：导入重绘。

你可以直接把 .drawio 文件、.mmd 文件、Excalidraw 场景文件扔给它，它会读取源文件，然后用这套设计体系重新画一遍——内容不变，样式统一。draw.io 那些压缩后看起来像 base64 乱码的载荷它也能解；Excalidraw 只解析文本，不执行 JavaScript、不跟随点击目标。

draw.io 文件被重绘为编辑级图表

重绘时有四个旋钮可以调，目的不是"转换格式"，而是"让图适配它要去的地方"：格式（html/svg/png，SVG 给 Figma、PNG 给幻灯片）；尺寸（文档内嵌、16:9 幻灯片、社交 OG 图、A4 横向打印，投影仪上用 16px 节点名，文档里用 12px，字号阶梯跟着变）；细节（faithful 最多 24 节点、balanced 最多 12 个、simplified 最多 7 个，砍内容顺序固定：先装饰、再重复、再叶子簇）；受众（engineer/mixed/executive，改的是措辞不是数量——Auth Service / JWT · RS256 · :8443 讲给工程师，Sign-in 讲给高管）。

每次重绘结束，它会附一份"保真账本"：哪些节点被合并了、哪个决策框被折叠成了连线标签、哪张便签因为没连接被丢弃、哪条主路径被完整保留。你熟悉自己的源文件，哪里被动了你一眼就能看出来——它没打算蒙你。

导出也顺手：SVG 会注入 Google Fonts，在 Figma 里能独立渲染；PNG 通过 Playwright 以 2 倍分辨率栅格化。切到系统字体，整个文件一个网络请求都不发。

几个容易被忽略的细节，才是它和"AI 随便画"的分水岭

扒完 README，这几条看起来有点"轴"的规矩，才是真正拉开差距的地方：

一、"最高级的操作通常是删除"。 作者给图定了个密度目标：4/10。每个节点都要配得上出现在图里，强调色全图只留一个，只给最该被最先看到的一两个元素。画图做减法比做加法难，这条规矩等于是把"编辑的判断力"编码进了规则文件。

二、4px 网格，不可协商。 所有坐标、宽度、间距必须能被 4 整除，作者原话是这个规则"防止图看起来像 AI 生成的"。圆角半径最大 10px，边框 1px 发丝线，全图无阴影。这些数字单看都很小，凑在一起就是那种"你说不出哪里好但就是觉得专业"的观感来源。

三、三种字体，各司其职。 衬线体（Instrument Serif）做标题和斜体旁注，无衬线体（Geist）做节点名，等宽体（Geist Mono）做技术性小字——端口、URL、字段类型。注意，等宽字体是给技术内容用的，不是拿来堆"开发者审美"氛围的。默认皮肤是墨黑加橘色的编辑风，开箱就不是廉价模板脸。

四、静态是默认，脚本为零。 生成的 HTML 默认没有任何 JavaScript，动画可选，且可选动画必须提供完整的静态首帧、支持 prefers-reduced-motion。每张图的内联 SVG 都带 role="img" 和 aria-labelledby，读屏软件能念出图的标题和描述。项目甚至有个自检脚本，跑一遍就能验证生成的文件是否合规；CI 里还挂着皮肤检查、渲染检查、几何校验好几道门禁——一个"画图 skill"做到这个程度，说实话有点离谱。

还有一条我特别喜欢：它明确告诉你什么时候不该用它。 住在 Git 里每个 sprint 都变的图，用 Mermaid；罗列信息的，画表格；只有一个框的"伪示意图"，直接写句子。判断标准就一句："读者能从这张图里学到比一段写得好的文字更多的东西吗？不能，就别画。"敢在 README 里劝退用户的工具，反而更让人想试试。

安装和使用

安装就一行命令，任何支持 Agent Skills 协议的工具都能用——Cursor、Claude Code、Codex、GitHub Copilot、Gemini CLI、Cline、Windsurf、Amp、Zed、Pi、Kiro、Factory Droid、OpenCode 等等：

npx skills add cathrynlavery/diagram-design

Claude Code 用户推荐走插件市场，能拿到斜杠命令和自动更新：

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

装好之后的用法就是说话。日常画图直接提需求："帮我画一个应用架构图：前端、后端、数据库、Redis 缓存"；"我要一个按影响力和工作量两个维度分类 Q2 项目的四象限图"。Agent 会自己判断该用哪种图型、先说明计划，然后写一个 .html 文件给你。

第一次在新项目里用它画图时，它会停下来问你：样式还是默认配置，要不要先做品牌对齐？这时候把网站链接丢给它就行。多客户场景还能把品牌配置存成命名档案，在项目里放一个标记文件指定用哪个档案，几个客户的并行工作区互不覆盖。

适合谁用

  • 写技术文档和博客的人：架构图、流程图、时序图是刚需，这个工具直接决定你的文档"卖相"；
  • 做产品分享和汇报的人：象限图、甘特图、用户旅程图、Wardley 地图，输出能直接进 PPT；
  • 在意品牌一致性的独立开发者和小团队：官网、文档站、分享材料用同一套配色字体，品牌对齐一次，处处生效；
  • 手里有 draw.io / Mermaid 资产想升级视觉的团队：导入重绘加上四个旋钮，老图纸换个设计体系重新出厂。

反过来，如果你的图需要版本化 diff、住在 Git 里跟着代码一起演进，别折腾，继续用 Mermaid——作者自己都这么劝。

最后说两句

这个项目让我想明白一件事：AI 时代，"品味"本身是可以被打包的。

过去我们觉得审美是玄学，是设计师脑子里说不清的东西。但 diagram-design 把"什么是好图"拆成了一条条可执行的规则：一个强调色、4px 网格、密度 4/10、衬线做标题等宽做技术标注、对比度不达标就调整……模型缺的从来不是能力，是这些具体的、可操作的判断。而 Agent Skill 这种形态，恰好就是"把人的判断力写成 AI 能读的文件"的最佳载体。

更难得的是它的诚实：README 里主动承认输出质量取决于模型、承认不适合 Git 里的常变图纸、列了一整节"什么时候不该用"。不吹嘘的工具，反而更让人愿意信它说的每一句话。

如果你也受够了"AI 画的图永远长得像 AI 画的"，花五分钟装上它。下次写文档的时候，你可能第一次会想把图放在最显眼的位置。

项目地址：github.com/cathrynlavery/diagram-design 官方网站：diagramdesign.dev 在线画廊：cathrynlavery.github.io/diagram-design