又一个神级 skill，一句话生成41种专业图表 | 芋道源码 —

阅读全文

⭐⭐⭐ Spring Boot 项目实战	⭐⭐⭐ Spring Cloud 项目实战
《Dubbo 实现原理与源码解析 —— 精品合集》	《Netty 实现原理与源码解析 —— 精品合集》
《Spring 实现原理与源码解析 —— 精品合集》	《MyBatis 实现原理与源码解析 —— 精品合集》
《Spring MVC 实现原理与源码解析 —— 精品合集》	《数据库实体设计合集》
《Spring Boot 实现原理与源码解析 —— 精品合集》	《Java 面试题 + Java 学习指南》

摘要: 原创出处 http://www.iocoder.cn/Fight/diagram-design-skill/ 「芋道源码」欢迎转载，保留摘要，谢谢！

🙂🙂🙂关注微信公众号：【芋道源码】有福利：

RocketMQ / MyCAT / Sharding-JDBC 所有源码分析文章列表

RocketMQ / MyCAT / Sharding-JDBC 中文注释源码 GitHub 地址

您对于源码的疑问每条留言都将得到认真回复。甚至不知道如何读源码也可以请教噢。

新的源码解析文章实时收到通知。每周更新一篇左右。

认真的源码交流微信群。

diagram-design 是一个给 Claude Code、Codex 这类支持 Agent Skills 的宿主装的画图 Skill。你说一句话，它生成一张自包含的 HTML，图是内联 SVG，浏览器双击就能打开。

它把设计规矩写成了 AI 能执行的约束

让 AI 画图这件事，卡点从来不在它不会画。模型读得懂流程和模块关系，也能吐出 Mermaid 或者 SVG，但一次就画好基本做不到，字挤在一起、留白忽大忽小、连线互相压着，这些靠一句提示词调不出来。

项目作者本人是写作者兼品牌主理人，她做这个 skill 的起因很具体，每次要给文章配图，她都得跟 Figma 折腾半小时，最后干脆跳过不配。她给出的解法是一套 AI 必须遵守的规矩，先把该画什么定死，再让它少画。

它的做法是把设计规矩写成 AI 能执行的约束。全图只允许一个强调色，最多一两个焦点元素；节点的坐标、宽高、间距必须能被 4 整除；边框是 1px 细线，不许用阴影；圆角最多 6 到 10px；标题用衬线、节点名用无衬线、端口和 URL 这类技术标注用等宽。信息密度的目标值定在 4/10，节点超过九个就该考虑拆成两张图。

这个项目在 GitHub 上已经四万两千多 Star，四月建的库，五个多月涨到这个量级。

cathrynlavery/diagram-design 仓库首页，Star 42.6k

项目作者有句话被引用得很多，画图时最该做的操作往往是删除，每个元素都得说得出自己为什么留下来。她还专门写了一节讲什么时候别用这个 Skill，一件事一句话就能说清，那就去写那句话，别画图。

skill 输出的架构图示例

上面这张就是它的输出，浅色纸底、细线连接、橘色只落在最该看的那个环节上，底部自带图例，整张图没有一处阴影。

41 种图型共用一套规矩

图型数是 41 种，按用途能分成几组。系统设计相关的有架构图、时序图、状态机、ER 图、部署图、依赖图；流程相关的有流程图、泳道图、数据流、用户旅程；层级结构有树图、组织架构图、金字塔；分析类的有四象限、雷达图、桑基图、鱼骨图、Wardley Map；常规数据图表像柱状、折线、散点、甘特图也都在。

流程图变体示例

每种图型带三个变体，极简浅色、极简深色、完整编辑版。博客配图用第一个，幻灯片封面用最后一个。这个数字还在长，九月中旬刚补上 heatmap 这一种。

甘特图变体示例

这么多图型不是靠一份巨型提示词堆出来的。每种图型在 references 目录下都有自己的参考文档，用到哪个加载哪个，日常画一张静态图只需要读主文件和那一份图型文档，上下文开销可控。

仓库自带的在线画廊

上面这张是仓库自带的在线画廊，顶部标签栏把每种图型都列了出来，中间混着变体和演示入口，下面三个按钮切换三个变体，装之前可以先翻一遍看风格合不合胃口。

一分钟把图换成你网站的样子

要让它长得像你自己的东西，说一句 onboard 到某个网址就行。它去读那个站点，大概一分钟提出主色调和字体，映射成 paper、ink、muted、accent 这样的语义角色，再改写样式指南。网址不是唯一的来源，已装的 Skill 和本地的设计目录也能读。之后生成的图自动跟你站点一个风格，不用每次都解释主色是什么。

默认皮肤本身就是一套配好的五色品牌调色板，白色烟纸底、墨黑文字、蓝灰次级，强调色是 #eb6c36 的橘。它还会顺手检查文字和底色的对比度，如果你的品牌色在小字号下看不清，它会给出调整后的值和理由。

同时做好几个项目的话，可以把不同品牌存成命名 profile，放在用户目录下的 profiles 文件夹里，每个项目放一个 .diagram-design 标记文件指定用哪套。profile 存在安装目录之外，插件更新不会把它冲掉，几个宿主还共用同一套。

把旧图重画一遍，动效默认关着

手里已经有 draw.io、Mermaid 或者 Excalidraw 的文件，它能直接读进来重画。重画是按内容重画，原来的组件、关系、分组和方向都保留，但源文件的坐标、配色、字体、布局一个都不带过来，出来的图跟原图长得完全不一样。

桑基图变体示例

重画的时候可以指定输出格式、画布尺寸、细节级别，还能选面向的读者。读者这一项改的是措辞不是节点数，同一个模块，给工程师看写的是服务名加上算法和端口，给管理层看就换成「登录」两个字。

有些内容的关键在行为而不是结构，比如队列积压、策略追踪、信任边界。它的处理顺序是先匹配语义模式再选图型，语义模式现在有九个，每个都规定了触发条件和最近邻的图型，不会硬套一个不像的。

循环图变体示例

动效默认是关的，普通输出就是纯静态、不带脚本的 HTML。需要时能开成整体淡入、分步讲解或者循环播放，动效的第一帧就是完整静态图，在禁用动效的环境里打开也不会缺内容。

导出成 SVG 和 PNG

默认产物是自包含的 HTML，图标全部内嵌，项目自带 87 个单色 IT 和云厂商图标，没有任何外部依赖。要放进 PPT 或者 Figma，用导出命令出 SVG 和 PNG，PNG 可以指定三倍图。

有一点值得知道，导出只取图本身，完整编辑版上那圈外框、摘要卡片和页脚会被主动丢掉，导出来的就是一张干净的图。

装完之后说一句话就行

在 Claude Code 里是两行命令，先把仓库加进插件市场再装。

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

Codex 的命令长得差不多。

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

Pi 更短。

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

能装的宿主现在不止这三个，GitHub Copilot、Factory Droid、Claude Cowork、Kiro 和 OpenCode 都有各自的路径，官方 README 的安装一节写得挺细。

宿主里带的几个命令有分工，主命令负责画图，:doctor 检查本机缺什么，:profile 切换品牌，:import-drawio 和 :import-mermaid 负责重画旧图，:export-diagram 负责导出。导出 PNG 需要本机有渲染环境，缺依赖的时候 doctor 会提示你装什么。

装好之后不用记命令，直接说一句话就行，比如让它画一张这个系统的架构图，把前端、后端、数据库和缓存都标出来，它自己选图型、生成文件、存好位置。想改就接着说，颜色换成我们官网的色调，或者这张要放幻灯片、改成 16 比 9。

有一个坑提前说，插件方式装的会跟着包更新走，你改过样式文件的话更新可能把它覆盖掉。打算长期深度定制，就把仓库克隆下来用本地路径装，改的东西才是自己的。

仓库里还带一个在线画廊，装之前可以先翻一遍，看风格对不对胃口。

它省下的其实是返工

用下来的感受是，它解决的问题不在画图这一步。AI 现在写代码写文档都行，但交出来的东西外观总差一口气，你总得自己再收拾一遍。这个 skill 的思路是把成熟设计团队内部那套规范压成一个 Skill，让 AI 交出来的东西直接就是能发出去的成品。

对天天写文档写方案的人来说，省下来的时间只是小头，更值钱的是出图质量稳定了，每次出来的东西都能直接用，不用再纠结这张图拿不拿得出手。

经常要给文档配图的话值得装一个。用不上也很正常，你要的只是几张示意图，或者手上已经有顺手的绘图工具，那就不必折腾。仓库在 https://github.com/cathrynlavery/diagram-design