diagram-design — 3.7万Star开源Skill：一句话生成39种专业图表

在GitHub上拿了3.7万多Star的开源项目：diagram-design。

它给Claude Code、Codex、Pi这些支持Agent Skills的工具装上画图能力，输出自包含的HTML加SVG。我自己用了一阵子，把能干的活都列出来。

这是个啥项目

普通画图工具靠AI直接生成，文字密了、线重了，一句提示词根本救不回来。

diagram-design干了个反直觉的事：把字号、间距、配色、视觉层级写成死规则。AI不用猜，照着执行就行。这相当于给AI配了一套强制执行的UI设计规范。

架构图示例

39种图表，覆盖90%工作场景

一套设计铁律

全图只允许一个强调色，最多一两个焦点元素。

所有坐标、间距必须能被4整除。边框用1px细线，圆角最大10px。信息密度定在4/10，宁可少画，不要堆满。

作者还专门写了“什么时候别用”：一句话能说清的事，别画图，直接写字。出图前先删一轮，这是项目最值钱的地方。

流程图示例

39种图表清单

系统类有架构图、时序图、ER图。流程类有泳道图、用户旅程。层级类有树图、组织架构图。分析类有四象限、桑基图、Wardley Map。

每种图带3个变体：浅色、深色、完整编辑版。每种图有独立参考文档，用到才加载，不会把39份说明全塞进上下文，省得一批。

甘特图示例

品牌匹配

跟它说“onboard到某个网址”，它会花1分钟提取该网站的字体和色调，转换成语义化token。

之后生成的图自动跟你的站点一个风格。对比度不够还会主动建议调整值，并说明原因。

品牌色按accent、ink这些语义角色存，改一处，39种图和画廊全部跟着变。多项目同时跑，可以存独立的profile，互不干扰。

旧图重绘

手里的draw.io、Mermaid、Excalidraw文件，它直接读，按设计系统重画一遍。

注意：它保留的是原图的内容关系，源文件的坐标、配色、字体全不带过来。出来的图跟原图长得完全不一样。

重绘时选“面向的读者”，工程师版会写“Auth Service / JWT / RS256”，管理层版就变成“登录”。写汇报材料时这招很管用。

桑基图示例

语义模式与可选动效

队列积压、信任边界这类内容，用普通图型很难画准。它先匹配语义模式再选图型，内置了8种模式，包括扇入队列、阶段槽位、安全分层。

动效默认关着。开的话有整体淡入、分步讲解、循环播放。第一帧就是完整静态图，禁用动效的环境也不会缺内容。

循环图示例

导出与使用

默认生出自包含的HTML，内嵌了87个单色IT和云厂商图标，零外部依赖，双击就能看。

PPT或Figma里用，导出SVG和PNG就行。PNG可以指定三倍图，发社交平台也够清晰。

快速开始

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

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

用Codex或Pi的命令类似，Pi更短：

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

装好后不用记任何命令，说一句“帮我画这张系统的架构图，前端、后端、数据库、缓存都标出来”，它自己选类型、生成文件。想改接着说“颜色换成官网色调”、“改成16比9放幻灯片里”。

仓库里带了在线画廊，39种图都能点开翻，装之前先去看看风格对不对胃口。

FAQ

diagram-design适合哪种技术栈

适合Claude Code、Codex、Pi这类支持Agent Skills的编程工具。核心功能是画图Skill，不依赖特定后端语言，输出为通用HTML/SVG。

能不能生成带交互的图表

可以开动效。有整体淡入、分步讲解、循环播放三种模式。但默认是关的，普通输出是纯静态、无脚本的HTML，在禁用动效的环境打开也不缺内容。

如何给不同项目配置不同品牌

把不同品牌存成独立的profile。每个项目放一个标记文件，各用各的，互不干扰。这套profile是Claude Code、Codex、Pi几个宿主共用的，配一次到处生效。