# Diagram-Design给AI加一套视觉审稿标准

现在的模型其实已经能读懂流程、模块和依赖关系。你把一段产品逻辑扔进去，它很快就能生成 Mermaid、SVG，或者一页带流程图的 HTML。但其实只靠模型的 Coding 能力，一次性能把关系画清楚，其实目前应该还不太行。文字密度、留白、连线不对、重叠等等毛病很难靠一句提示词解决。Diagram Design 这个开源项目把字号、间距、配色、节点数量和视觉层级写成规则，让 Agent 照着执行。

39 种专业图，一句话生成；还能读取网站品牌色、重绘 Mermaid / draw.io、导出 SVG 和 PNG。它解决的不是“AI 会不会画图”，而是“AI 画出来的图到底能不能直接拿去用”。

开发者对“AI 味”已经开始审美疲劳。普通模型一画架构图，往往就是圆角框、渐变、蓝紫霓虹，再加一堆自动排版出来的线；Mermaid 很方便，但复杂一点以后也容易变成“能看懂、但不想放进文档”。diagram-design 的作者 Cathryn Lavery 直接把目标写成一句话：**Editorial diagrams your designer won't hate**。她说自己以前让 Claude 画图，经常得到和网站风格完全不搭的通用方框，最后还要再去 Figma 调半小时，于是干脆把“怎么画得像专业编辑图”做成了一个 Agent Skill。    

GitHub地址：https://github.com/cathrynlavery/diagram-design

**01 / WHY IT BLEW UP**

**它不是“再造一个 Mermaid”，而是给 AI 加了一套视觉审稿标准**

当前版本提供 **39 种 editorial diagram**，从 Architecture、Flowchart、Sequence、ER、Timeline、Gantt，到 Sankey、Wardley Map、Kanban、User Journey、Deployment、Dependency Graph、UML Class、Database Schema 都覆盖了。每种图又有 minimal light、minimal dark 和 full-editorial 三套静态版本，默认输出是单文件 HTML + 内联 SVG，不需要前端构建流程。对技术团队来说，这意味着它不是在做“画一个漂亮插画”，而是在做一套可以反复复用的技术表达语法。     

**39 种类型里，最常用的三组**
- 工程架构：Architecture · Sequence · ER · Deployment · Dependency · UML · Database Schema
- 产品与项目：Timeline · Gantt · Kanban · User Journey · Story Map · Quadrant · Process
- 数据与表达：Sankey · Radar · Bar · Line · Treemap · Scatter · Pyramid · Venn

更关键的是，它把“少即是多”写成了规则：每个节点必须有存在理由，强调色只留给一两个真正重要的地方，目标密度大约是 4/10。这个思路很反 AI：不是让模型往图里塞更多元素，而是要求它删掉不必要的节点和装饰。

## 安装
**Claude Code:**
```
/plugin marketplace add cathrynlavery/diagram-design
/plugin install diagram-design@diagram-design
```
Then enable updates once: run `/plugin`, open **Marketplaces**, select **diagram-design**, and choose **Enable auto-update**. Claude Code disables auto-update by default for third-party marketplaces; after this toggle, it refreshes the marketplace and installed plugin in the background after startup. Run `/reload-plugins` when prompted, or let the next session load the update.

**Codex:**
```shell
codex plugin marketplace add cathrynlavery/diagram-design
codex plugin add diagram-design@diagram-design
```
Codex refreshes configured Git marketplaces at startup. To fetch immediately, run `codex plugin marketplace upgrade diagram-design` and start a new session.

**Pi:**
```shell
pi install https://github.com/cathrynlavery/diagram-design
```
Run `/reload` in an open Pi session. Pi makes the skill available for matching diagram requests; use `/skill:diagram-design` to invoke it explicitly. Pi also loads the `/export-diagram`, `/import-mermaid`, `/profile`, and `/doctor` prompt templates. The unpinned Git install is intentional: Pi has no automatic package refresh, so run `pi update --extensions` to pull merged updates.

装完以后不需要背复杂命令，直接说“给我的 App 画一张 frontend、backend、database、Redis cache 的架构图”就可以。第一次在新项目里使用时，Skill 会检查 style-guide 是否还是默认值；如果是，它会先问你要不要做 onboarding。
最实用的方式是直接给一个网站地址，例如 
```
onboard diagram-design to https://yoursite.com
```
Agent 会读取主页的背景色、正文颜色、CTA 色和字体栈，映射成 paper、ink、accent 等语义 Token，再让你确认后写入样式指南。官方给这个过程的目标时间就是大约 60 秒。    

**THE KILLER FEATURE**

**最实用的功能，可能不是“从零画图”，而是把已有丑图重新排一遍**

很多人已经有 Mermaid、draw.io，真正麻烦的是“内容都对，但图太丑”。diagram-design 现在支持直接导入 `.drawio`、`.drawio.xml`、带内嵌数据的 `.drawio.png / .svg`，也能读取 `.mmd`、`.mermaid` 或 Markdown 里的 Mermaid 代码块。它不会沿用原图的坐标、配色和字体，而是保留组件、关系、分组与方向，再按自己的设计系统重新排版。

它给“重画”提供了四个旋钮：
- Format：HTML / SVG / PNG / HTML+PNG
- Size：文档、16:9 幻灯片、社交卡片、打印尺寸等
- Detail：faithful / balanced / simplified
- Audience：engineer / mixed / executive

这个设计非常像真正的编辑工作：同一份源图，放进工程文档和放进 CEO 汇报，信息不该完全一样。比如 Auth Service 的工程版可以保留 JWT、算法和端口，面向 mixed audience 时简化成 token check，面向 executive 时甚至只留下“Sign-in”。导入结束以后，它还会给出 fidelity ledger，明确告诉你哪些节点被合并、折叠或删除，避免“AI 重新画了一遍以后顺便把逻辑改了”。
![](https://static.xiongneng.me/diagram-design-20260831200201.png)
图 1：官方 import-drawio 示例。原内容被重排成统一网格和单一强调色。

**REAL VALUE**

它直接长在 Coding Agent 的工作流里。Agent 已经理解你的代码、架构和文档，不需要你再复制一遍上下文给另一个画图网站；第二，它的输出是 HTML + SVG，而不是一张只能看的位图，后续还能继续编辑、导出 SVG 给 Figma 或 Illustrator，也可以通过 Playwright 导出高分辨率 PNG；第三，它真正把“品牌一致性”考虑进去了，同一个团队可以把网站的色彩和字体做成 profile，多项目复用，而不是每次重新告诉 AI“请用我们公司的蓝色”。

但它也不是万能工具。官方自己就明确写了：如果只是终端里的一张 Unicode 小图、一个列表、前后对比，或者只有一个方框的“图”，那就别用；列表用表格，前后对比也用表格。一张图只有在“读者能从图里学到比一段文字更多东西”时才值得画。这个边界我反而很喜欢，因为它再次强调diagram-design 的目标不是让 AI 画更多，而是让真正需要画的那几张图更像可以发布的成品。

**PROJECT CARD**

项目定位：给 Coding Agent 使用的编辑级技术图表 Skill  
当前能力：39 种图表类型 · 品牌 Onboarding · draw.io / Mermaid 重绘 · SVG / PNG 导出  
支持环境：Claude Code、Codex、Pi  



---

> 作者: XiongNeng  
> URL: https://xiongneng.me/posts/ai/diagram-design/