技术博客和方案文档里最费时间的往往不是正文，而是那张说明结构的图。让 Mermaid 渲染一个流程图，出来的是一堆粗细一致、圆角相同、配色跟着主题跑的方框，塞进自己排过版的页面里像贴纸；打开 Figma 或者 draw.io 手动拖，位置、间距、连线路由都要自己调，一张图半小时起步，结构改一次就再调一遍。Diagram Design 走的是第三条路：它是一个写给编码 Agent 看的技能包，你用一句自然语言说清要画什么，Agent 就把图画成一个自带样式的 HTML 文件——45 种图表类型、一个强调色、1px 细边框、不用阴影，每个坐标都落在 4px 网格上，动手之前还能先读一遍你的站点，把配色和字体换成你自己的。它由独立开发者 Cathryn Lavery 维护，以 MIT 许可开源，仓库星标已经过了 6 万。下面会讲清它的设计规则怎么约束输出、品牌对齐具体读走了哪些值、draw.io 与 Mermaid 的旧图怎么重绘、导出 PNG 和 SVG 要装什么，以及哪些场景其实该继续用 Mermaid。
Diagram Design 是什么？
Diagram Design 是一套以 Agent Skill 形式分发的图表生成规范，不是独立软件，也不是在线编辑器。它的主体是仓库里的一份技能说明与 45 份分类型参考，支持 Agent Skills 的宿主（Claude Code、Codex、Cursor、Copilot 等）在识别到「画个流程图」「来个象限图」这类请求时只加载其中一份，然后在你的项目目录里写出一个 .html 文件。定位上它和三条常见路线都不一样：Mermaid 与 PlantUML 靠你写文本语法、渲染器给什么风格就用什么风格；draw.io 与 Excalidraw 靠手拖，好不好看取决于手；它把「审美」写成了可执行的规则，交给模型去布局，再用持续集成检查重叠与裁切。仓库 2026 年 4 月建仓，目前 6.2 万星标、4000 多个 fork，曾在 GitHub Trending 排到第一。
核心功能
它提供的不是多一种画图语法，而是把「这张图长什么样」从个人手感变成一套能复述的规则。重点人群是写技术内容、做方案汇报、需要反复产出结构图的工程与产品角色，收益集中在省掉搭样式与调间距这两段重复劳动上。
- 45 种图表类型，每种三套静态变体——极简浅色、极简深色与完整编辑版各有成品，打开就能抄结构，省掉从零定字号与间距的时间。
- 输出是单文件 HTML 加内联 SVG——没有构建步骤、不挂脚本、不依赖外部图片，默认只从 Google Fonts 取三套字体，把字体源改成 system 之后整份文件零网络请求。
- 品牌对齐大约一分钟——它会读一次你指定的站点，把背景、正文、次要文字、强调色分别映射成 paper、ink、muted、accent 四个语义值，再配上标题、节点名、子标签三档字体，先给一份变更对照再写入样式表。
- 旧图是重绘而不是格式转换——draw.io、Mermaid、Excalidraw 三类源文件都能读，产出由四个拨盘决定：格式、尺寸、细节层级、受众措辞，结尾附一份说明合并与丢弃了什么的账目。
- 导出分 SVG 与 PNG 两条路——SVG 抽出来时带一份 CDATA 包裹的样式，可以直接进 Figma 或 Illustrator；PNG 用 Playwright 按 2 倍渲染，也可以加到 3 倍。
- 可访问性写在模板里而不是事后补——每个 SVG 都带图片角色声明、指向标题与描述的引用属性，ID 按图表类型加前缀，同一页内联多张不会撞名。
- 多客户靠命名配置隔离——一套品牌对齐结果可以存成命名档案，项目里放一个标记文件指过去，几个工作区并行也不会互相覆盖样式表。
使用场景
它更适合「这张图要发出去」的场合，而不是「这张图要天天改」的场合。判断标准很直接：图会不会跟着每次提交变动、需不需要在代码评审里逐行对比。下面几类人用它收益最明显，最后一类恰好相反。
| 人群/角色 | 场景描述 | 推荐指数 |
|---|---|---|
| 技术博客与邮件通讯作者 | 每篇文章配一张结构图或时间线，风格要和站点排版一致 | ★★★★★ |
| 方案汇报与售前架构师 | 把内部架构画成 16:9 幻灯片比例，节点名压到 16px 仍读得清 | ★★★★★ |
| 独立开发者 | 产品介绍页与更新日志里需要一张能直接内嵌的图，不想再开设计工具 | ★★★★☆ |
| 接手历史项目的工程团队 | 把散落的 drawio 文件与文档里的 Mermaid 代码块统一重画成一套风格 | ★★★★☆ |
| 图表要随每次提交变化的团队 | 需求是在合并请求里能对比、能评审，这类场景 Mermaid 更合适 | ★★☆☆☆ |
操作指南
整套流程能压到三步：装上、说清需求、导出。装之前建议先到 Diagram Design 的在线画廊翻一遍 45 种类型，确认有你要的那张图再动手，比装完再一个个试要快得多。
- 在任意读取 Agent Skills 的宿主里装：项目目录执行 `npx skills add cathrynlavery/diagram-design`，命令行工具会把技能连同参考、示例与脚本一起落到你选的根目录；选到多个目录时它会问用软链还是复制，选软链，一次更新全部生效。
- Claude Code 用户走插件市场更省事：先用「/plugin marketplace add」加仓库地址，再执行「/plugin install diagram-design@diagram-design」，顺带拿全导出、导入、品牌档案、环境诊断这几个斜杠命令。
- 用一句自然语言下需求，例如「画一个前端、后端加 Redis 缓存的架构图」。Agent 动手前会先报出它选的类型、语义模式、画布尺寸与准备删掉的节点，你确认后它才落文件。
- 想换成自己站点的配色，直接说「onboard diagram-design to 你的站点地址」：它抓一次首页、抽出主色与字体栈、给一份从默认皮肤到你品牌的差异表，你说应用之后才写进样式表；对比度不达标的颜色它会给替代值。
- 重绘旧图时把拨盘一次说全：`/diagram-design:import-drawio platform.drawio –size=slide-16×9 –detail=simplified –audience=executive`，细节层级从完整（不超过 24 个节点）压到简化（不超过 7 个），措辞从工程口径换成管理层口径。
- 导出：`–png-only –scale=3` 出三倍位图，`–svg-only` 出矢量；PNG 需要先在本机装好 Playwright 与 Chromium，两条命令装完即用，不必再配浏览器路径。
- 自检：跑一遍技能自带的检查脚本，打印 OK 才算合格，加上离线开关还会把字体外链一起拦掉，适合交付给内网环境。
- 团队多人共用一套品牌时，把对齐结果存成命名档案，在项目根放一个标记文件写明用哪份，之后这个项目自动读那份配置，不用每次重新对齐。
支持平台
宿主侧基本覆盖了现在主流的编码 Agent：Claude Code、Codex、GitHub Copilot、Cursor、Gemini CLI、Cline、Windsurf、Amp、Qoder、Factory Droid、Pi、Kiro、OpenCode，以及 Zed、Warp、Roo、Kilo 这类读取 Agent Skills 目录的工具；判定标准只有一个，宿主会不会加载技能目录里的说明文件。系统侧，仓库的持续集成在 Linux、Windows、macOS 三个平台跑皮肤、渲染布局、几何与文档同步四道校验；Windows 上若没开开发者模式，安装时的软链会回落成复制。产物本身是 HTML 与 SVG，任何现代浏览器都能直接打开，PNG 导出依赖本机的 Playwright 与 Chromium。
产品定价
免费。整个仓库以 MIT 许可开源，技能本体、45 份类型参考、示例文件与导出脚本都在里面，没有订阅、没有按张计费，也没有付费档位把某些图表类型锁起来。作者的公司 LittleMight 只负责发布插件目录里的条目，官方构建只从这个仓库出，其它名字下的同款列表属于非官方副本。实际支出只有两处：你自己的编码 Agent 订阅与模型用量，以及 PNG 导出时本地装 Playwright 占用的一点磁盘。
常见问题
Q：生成的图会不会被上传到外部服务？
不会以图片形式上传。生成过程在你自己的项目目录里完成，产物就是一个 .html 文件；默认只有一条网络请求，就是从 Google Fonts 取字体，把字体源设成 system 之后连这条也没有。品牌对齐时会读一次你指定的站点首页，仓库的隐私说明里列了会发出的请求类型。
Q：需要付费或者注册账号吗？
不需要。仓库是 MIT 许可，装完即用，没有账号体系也没有激活码，插件市场里的条目同样免费。要花钱的只有你原本就在付的 Agent 订阅和模型调用。
Q：中文描述能听懂吗？哪些宿主可用？
能，把中文句子翻成绘图请求这一步本来就是模型在做，只要说清图表类型和元素关系就够；仓库文档与命令是英文，示例里还给了日文提示的写法。宿主方面，凡是会读 Agent Skills 目录的工具都能装，不支持这套约定的编辑器只能靠复制技能目录的方式凑上去，更新也要手动替换。
开发者小结
它的长处是把图表审美拆成了可以执行的规则：一个强调色、只用 1px 细线、不许阴影、所有坐标对齐 4px 网格、目标信息密度定在 4/10，再配一套从站点抓取品牌色的对齐流程，同一句话生成的图不会每次长得像另一个人画的。适合把图当发布物的人：博客、方案、产品页、技术文档里的关键插图，尤其是需要和站点视觉统一的那几张。不适合把图当代码资产的人：输出不是可编辑的源格式，合并请求里没有文本可以逐行对比，同一提示跑两次布局也可能不同，所以每轮迭代都要改的文档图仍应留给 Mermaid。作者自己在文档里也划了这条线，说它是给「准备发布的那张图」用的。
相关文章
