4.5万 Star 爆火！这个开源神器，让 Codex 一句话画出专业架构图

这篇介绍一个开源项目：diagram-design，装在 Claude Code、Codex 这类 AI 编程助手里用的一个画图 Skill。 我们在写技术文章和方案文档的时候经常要配图，Mermaid 画出来的东西，版式和配色都像工程草稿，放进正式文档总觉得差点意思；用 draw.io 效果会好一些，但之前的话，用 draw.io 一张架构图半小时起步。 前段时间在 GitHub 刷到这个项目，装进 Codex 用了一阵，真心感觉不错，这才是解放生产力的好玩意儿啊。 简介 diagram-design 干的事一句话说清：让 AI 助手画出能直接进文档、进 PPT 的图。架构图、流程图、时序图这些常规的有，桑基图、鱼骨图、爆炸分解图这类平时不太好画的也有，一共 42 种。每种图都出浅色、深色、编辑版三个风格，配色和字体还可以照着我们自己的网站来，画出来的图跟我们的页面是一套皮肤。 它每张图就吐一个 HTML 文件，SVG 和 CSS 都塞在文件里，双击就能打开，断网也能看。拿图挺方便的：截个图进 PPT，或者导出 SVG 拖进 Figma 再改，HTML 直接挂网站上也行。文件本身没有外部请求，唯一联网的地方是加载 Google Fonts。 我用下来觉得，平时就在用 AI 编程助手、又要写方案写博客做汇报的人，配图这活它基本包圆了。 功能 42 种图表，一句话出图 装好以后，你直接说一句话，它自己挑个合适的图型，画完存成 HTML 放本地。架构图、流程图、时序图、状态机、ER 图、泳道图、时间线、甘特图这些常规的都有，还有些平时不太容易画的： • 桑基图（流量怎么分叉、合并） • 鱼骨图（归因分析） • Wardley Map（价值链 × 演进阶段，做战略推演用） • 用户旅程图（阶段、行为、情绪曲线） • 环形飞轮（有共享中心Hub的增强循环，虚线表示回写） • 爆炸分解图（把一个产品或系统的零件沿一根轴拆开，官方示例里连机械键盘和手机拆解都有） • 轴测平面图（办公室楼层、咖啡店、园区这种空间布局） • 架构变迁图（Before / Changes / After，展示一次迁移到底改了什么） • 依赖关系图（能看出循环依赖和扇入） • 数据库表结构图、UML 类图、部署图、故事地图、看板 光看数量没太大意思，我想说的是它每种图的规则都是单独写的：节点摆哪、标签放哪、连线怎么拐、一张图塞多少信息，各自有各自的文档管着。所以时序图和架构图各画各的，版式上明显是两套思路。 每种图出三个风格：极简浅色、极简深色、完整编辑版。编辑版带标题和摘要卡片，能直接当报告里的一页用。另外有个动效模板可以做分步讲解，默认关着，平时出的都是静态图。 架构图示例 默认审美在线 它跟"让 AI 随便画"不一样：设计规则全写死在文档里，Agent 只能照着来。 • 整张图只用一个强调色，只标 1 到 2 个视觉焦点 • 三种字体各司其职：标题用衬线体（Instrument Serif），节点名用无衬线（Geist），端口号、字段类型这类技术标签用等宽（Geist Mono） • 1px 细线边框，没有阴影，圆角最大 10px • 所有坐标、宽度、间距都必须是 4 的倍数——README 里说这条没得商量，因为它就是图看起来不像 AI 随手画的关键 • 信息密度压得很低，作者原话是目标 4/10，宁可删节点也不往图上堆 默认配色是黑加橙黄（官方名字叫 jet-black + atomic-tangerine），什么都不配，直接出图也能看。我自己用默认皮肤出的图，截个图放博客里就完事了，没再加工过。 读我们的网站，换成适配风格 这个功能我觉得最实用，跟它说一句： onboard diagram-design to https://自己的博客地址 它会去抓我们网站首页，把配色和字体扒下来，整理成背景、正文、次要文字、强调色、链接这几个语义色。先给我们看改动对比，我们点头才写进 style-guide.md。之后每张图的底色就是我们自己网站的底色，强调色就是网站按钮的颜色，节点标签就是网站正文的字体。 写进去之前，它先查一遍对比度。文字和背景达不到 WCAG AA，它会告诉我们调成什么值、为什么这么调。完事再给一份"保真回执"，扒的哪个网址、每个颜色干什么用、字体用的哪个、有没有兜底，都列在上面。网站上公开可取的字体它会直接拿来用，渲染完再核对一遍，不会偷偷换成系统字体。 还有个挺细的地方： 在新项目里第一次画图，如果风格配置还没动过，它会停下来问一句——先做品牌对齐，还是手动填色值，还是就用默认的先画。不会闷着头拿默认皮肤混进我们的品牌材料里。 手里同时维护好几个项目的（比如给不同客户干活），可以把每个品牌存成单独的 profile，项目目录里放个标记文件指过去，互相不打架。 把旧图重画成新风格 手里已有的 draw.io、Mermaid、Excalidraw 文件，可以直接扔给它重画。这里说"重画"，是因为它真不保留原图的排版——组件、关系、分组、方向留下，坐标、配色、字体、draw.io 那种乱飞的斜线，全部丢掉重排。 重画的时候有四个地方可以调： • 格式：HTML、SVG、PNG • 尺寸：文档内嵌、16:9 幻灯片、社交卡片、A4 打印这些；画布变了字号跟着变，投屏的图节点名自动放大到 16px • 细节：faithful 最多留 24 个节点，balanced 留 12 个，simplified 只留 7 个 • 受众：工程师、混合、高管。这项只改图上的措辞，节点数量不动——同一个节点，工程师看到的是"Auth Service / JWT · RS256 · :8443"，高管看到的就是"登录" 画完会附一份清单，合并了什么、丢了什么、什么原样留下，都写在上面。毕竟原图是自己的，哪里被省了早晚会发现，它先交代了也好。 draw.io 文件重绘效果 导出和无障碍 默认出 HTML，也能导 SVG 和 PNG。SVG 会带上字体，在 Figma、Illustrator 里打开没问题；PNG 用本地 Chromium 渲染，默认 2 倍清晰度，要用得先装一下 Playwright。 无障碍这块也做得很细致：SVG 带 role="img" 和标题，屏幕阅读器能读；同一页塞多张图，ID 也不会打架。这种事平时感觉不到，真要把图放进对外文档的时候就省事了。 图标、手绘风和终端窗口 几个零散但用得上的点，放一起说。 内置 87 个单色图标，笔记本、手机、服务器、数据库、Docker、Kubernetes、Postgres 都有，画架构图和时序图的时候节点上能带小图标，信息量高一截。素材来自 Tabler Icons 和 Simple Icons，协议分别是 MIT 和 CC0，商用没事。 另有两个特殊皮肤：手绘风（SVG 加了扰动滤镜，线条抖一抖，像白板上画的，写随笔的时候能用）、终端窗口样式（图外面套一个 macOS 风格的命令行窗口）。这两个我偶尔用，正经文档还是默认样式居多。 架构上不浪费 token 它不会一上来就把所有文档塞给 Agent。启动时只看到 Skill 的名字和描述，我们说画流程图，它才加载 SKILL.md 加流程图那一篇文档；比如我说画桑基图，就只加载桑基图那篇。42 种类型互不相干，以后加新类型也不影响旧的。天天盯着 token 用量的人应该会喜欢这个设计。 快速开始（Codex 实操） 我在 Codex 里装的，两条命令： codex plugin marketplace add cathrynlavery/diagram-design codex plugin add diagram-design@diagram-design 装完开一个新会话就能用，Codex 启动时会自动刷新配置过的插件市场，如果没有生效，就重新启动一下 Codex。 我们来看看效果，一句话就能出图。 1，画博客系统的架构图： 帮我画一张架构图：前端页面、API 网关、文章服务、用户服务、MySQL、Redis 缓存。 2，画登录的时序图，带上 token 刷新分支： 画一个时序图：用户调用接口，token 过期返回 401，自动刷新 token 之后重试。 3，排期用的甘特图： 画一张甘特图，排一下双十一大促的准备节奏：十月中旬压测，十月下旬封版，十一月初灰度。 4，给网站做品牌对齐： onboard diagram-design to https://www.zhihu.com/ 5，团队分工的泳道图： 画一张泳道图：用户下单以后，前端、订单服务、库存服务、物流各自负责哪几段。 出图以后想换风格，接着说"换成深色版本"或者"用完整编辑版重新出一张"就行，不用自己改代码。要拿去贴 PPT 的话，再补一句"导出成 PNG，3 倍清晰度"。 改图也是对话式的。第一版不满意就直接说，"把缓存挪到服务旁边""把网关标成重点""字号大点"，它改完重新出一版，改到满意为止。 想先浏览全部 42 种类型的样子，官方有一个在线画廊，浅色、深色、编辑版三个页签来回切，看完再决定常用哪几种。 最后聊聊 好的一张图可以顶100句介绍，这个不夸张。但也不要为了画图而画图，文档里随手用的字符示意图、任何列表（列表就该用表格或列表项呈现）、前后对比（用表格）、只有一个框的"图"（那直接写句话得了）。 画之前问问自己：读者看这张图，能比看一段写清楚的文字多知道点什么吗？不能就别画。 真需要一张正经架构图、汇报图的时候，这个 Skill 绝对是优秀的一款工具。出图快，样子也拿得出手，品牌风格配一次以后就不用管了，有需要的可以看看。 开源地址 github.com/cathrynlavery/diagram-design