diagram-design 怎么安装？用 AI 自动生成更专业的架构图、流程图

使用 AI 编程工具画架构图时，经常会出现一种很典型的结果：

┌──────────┐
│ Frontend │
└────┬─────┘
     ↓
┌──────────┐
│ Backend  │
└────┬─────┘
     ↓
┌──────────┐
│ Database │
└──────────┘

信息是对的。

但真正放进：

• 技术方案；
• PPT；
• 产品文档；
• 系统设计文档；
• 客户方案；

里面时，视觉效果往往不够成熟。

cathrynlavery/diagram-design 就是专门解决这个问题的 Agent Skill。

它不是一个新的在线画图网站，而是让 Claude Code、Codex 等 AI Agent 按照一套比较严格的设计规范生成可以直接在浏览器打开的 HTML + SVG 图表。

它现在支持多少种图？

当前 2.0 版本已经支持 27 类图表，包括：

类型	适合场景
Architecture	系统架构
Flowchart	流程与判断
Sequence	时序调用
State Machine	状态转换
ER / Data Model	数据库模型
Timeline	时间线
Swimlane	跨部门流程
Quadrant	四象限分析
Radar / Spider	多维度比较
Tree	树状结构
Org Chart	组织架构
Layer Stack	分层架构
Venn	集合关系
Pyramid / Funnel	金字塔/漏斗
Bar Chart	柱状图
Line Chart	趋势图
Gantt	项目计划
Scatter Plot	散点分析
Process	多参与者流程
Medallion	数据湖分层
Data Flow	数据流
DP Integration	数据平台集成
DP Security Matrix	数据权限矩阵

另外还包括 IT Current-State、High-Level、Loop 等类型。

所以它已经不只是：

“帮我画一个架构图”

而更像一套：

AI
 ↓
判断信息类型
 ↓
选择 Diagram Type
 ↓
应用对应设计规则
 ↓
生成 HTML + SVG

的完整图表系统。

它和 Mermaid 最大的区别是什么？

Mermaid 更关注：

代码
 ↓
自动布局
 ↓
Diagram

diagram-design 更关注：

信息
 ↓
编辑式设计判断
 ↓
重新布局
 ↓
视觉层级
 ↓
Diagram

甚至导入 Mermaid 时，它也明确不是简单把 Mermaid 渲染出来。

而是：

Mermaid
 ↓
提取节点 / 关系 / 方向
 ↓
丢弃原来的视觉布局
 ↓
重新设计
 ↓
Editorial Diagram

项目的 Mermaid Extractor 只解析内容，不执行 Mermaid、JavaScript、URL 或浏览器代码，也不会联网获取源内容。

这对于把已有技术图重新整理成 PPT/文档级别的图比较有用。

架构图尤其适合它

例如普通架构：

User
 ↓
Nginx
 ↓
API
 ↓
Redis
 ↓
MySQL

可以让 Agent：

使用 diagram-design，
把下面系统画成 Architecture Diagram。

公网：
- 用户
- CDN
- Nginx

Application：
- API Server × 3
- Redis

Data：
- MySQL Primary
- MySQL Replica

突出 API Server 和 MySQL Primary。

项目自己的 Architecture 规则会考虑：

• Frontend → Backend → Data；
• Public → Private；
• Trust Boundary；
• 主数据流方向；
• 连接线；
• 重点节点；
• VPC / Security Group。

并且要求非水平/垂直连接使用规范化的正交 Connector，而不是随意拉斜线。

设计原则其实比较克制

这个项目比较有意思的一点是，它并不鼓励：

更多颜色
更多阴影
更多渐变
更多圆角
更多节点

反而强调：

The highest-quality move is usually deletion.

也就是尽可能删除没有信息价值的视觉元素。

项目当前的目标 Density 是：

4 / 10

而且认为超过大约 9 个节点时，很多情况下应该考虑拆成两张图，而不是继续往一张图里塞。

这种思路对于 AI 生成图尤其重要。

否则很容易变成：

一个简单系统
 ↓
AI 画出 30 个方框
 ↓
看起来很专业
 ↓
实际上没人看得懂

还能自动匹配自己的品牌

这可能是 diagram-design 比较实用的功能之一。

第一次使用时，可以让它读取：

公司官网
 ↓
颜色
字体
 ↓
映射成 Design Tokens
 ↓
style-guide.md

以后所有图表都使用同一套品牌风格。

例如：

onboard diagram-design to 我的官网

Agent 会尝试提取：

paper
ink
muted
accent
link
fonts

然后生成 Style Guide。

这样公司以后制作：

系统架构图
业务流程图
网络拓扑图
产品流程图

都可以保持统一视觉风格。

Claude Code 怎么安装？

如果准备长期修改 Style Guide，官方更推荐 Clone：

git clone https://github.com/cathrynlavery/diagram-design.git ~/code/diagram-design

然后：

ln -s \
~/code/diagram-design/skills/diagram-design \
~/.claude/skills/diagram-design

重启 Claude Code 后，就可以直接要求它生成 Diagram。

Claude Code 也可以 Plugin 安装

如果只是想快速体验：

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

这种方式比较简单。

不过官方提醒，插件更新可能覆盖 Plugin Cache 中修改过的 Style Guide。

所以如果准备长期使用自己的：

品牌颜色
字体
Diagram Style

还是 Clone + Symlink 更方便。

Codex 怎么安装？

Codex 当前可以：

npx skills add \
https://github.com/cathrynlavery/diagram-design \
--skill diagram-design

安装以后，就可以在项目中要求 Agent：

使用 diagram-design，
根据当前 Repository 的架构，
生成一张 Architecture Diagram。

可以直接输出 SVG 和 PNG

默认输出是：

.html

里面包含：

HTML
+
Inline SVG
+
CSS

直接浏览器打开即可。

如果需要用于：

PPT
Word
README
技术文档

还可以导出 SVG 或 PNG。

PNG 导出需要一次性安装：

pip install playwright
playwright install chromium

然后通过 Playwright 进行 2× Rasterize。

因此工作流可以是：

Claude / Codex
 ↓
diagram-design
 ↓
diagram.html
 ↓
SVG
 ↓
PPT / Docs / Website

已有 Mermaid 也不用重新写

假设以前已经有：

可以直接让 diagram-design：

把这个 Mermaid Diagram
重新设计成 Architecture Diagram。

它会提取：

User
Nginx
API
Redis
MySQL

以及它们之间的关系，然后重新进行视觉布局。

所以原来积累的大量 Mermaid 并不会浪费。

draw.io 也支持导入

项目目前还提供：

import-drawio

路径。

它可以处理 draw.io 的多种容器格式，包括：

Raw XML
Deflate + Base64
PNG Embedded
SVG Embedded

而且导入脚本同样把输入视为不可信数据，不会直接执行源文件里的内容。

对于企业已有大量 draw.io 图的情况，这一点比较实用。

这个项目需要服务器吗？

严格来说：

不需要。

diagram-design 本质上是 Agent Skill。

如果只是个人电脑：

Mac / Windows / Linux
│
├── Claude Code
├── Codex
└── diagram-design

已经可以正常使用。

但如果团队本身已经采用远程 AI Coding 环境，那么放到 Linux 服务器也比较方便。

例如：

Laptop
   ↓
  SSH
   ↓
Linux Dev Server
│
├── Git
├── Claude Code
├── Codex
├── diagram-design
├── Playwright
└── Projects

这样多个项目可以共用同一套 Diagram Style。

莱卡云适合放在哪一层？

如果希望长期维护统一的 AI 开发和技术文档环境，可以选择 Linux 云服务器作为 Remote Development Host。

例如：

PC / Laptop
      ↓
     SSH
      ↓
莱卡云 Linux Server
│
├── Git
├── Node.js
├── Python
├── Claude Code / Codex
├── diagram-design
├── Playwright
└── Projects

这种情况下，莱卡云主要承担的是：

远程 AI 开发机
+
Diagram Generation Environment

而不是专门为了 diagram-design 单独运行一个 Web 服务。

如果已经有其他 VPS、自建服务器或内部虚拟机，也完全可以采用相同架构。

配置要求并不高

diagram-design 自身不运行大模型。

基础使用：

2 核 CPU
4GB RAM
40GB SSD

基本已经足够。

如果同时运行：

Claude Code
Codex
Node.js
Playwright
Docker
多个项目

建议：

4 核 CPU
8GB RAM
80GB SSD

团队共享开发环境可以进一步考虑：

8 核 CPU
16GB RAM
150GB+ SSD

如果模型通过云端 API 调用，通常不需要 GPU。

一个比较适合技术团队的用法

例如开发一个 SaaS：

Repository
│
├── frontend/
├── api/
├── worker/
├── database/
└── docker-compose.yml

可以让 Agent：

分析当前 Repository。

使用 diagram-design 生成三张图：

1. Architecture
   展示整个系统组件和连接关系

2. Sequence
   展示用户登录完整调用流程

3. Data Flow
   展示用户数据从 API 到数据库、
   Queue 和 Worker 的流向

保持三张图使用同一套 Style Guide。

最终：

代码
 ↓
Agent 分析
 ↓
Architecture.html
Sequence.html
Data-flow.html
 ↓
SVG / PNG
 ↓
技术文档

这比人工重新在 Figma 或 draw.io 画一遍省事很多。

对运维场景也比较实用

比如整理服务器架构：

Internet
 ↓
Cloudflare
 ↓
Nginx
 ↓
Application
 ↓
Redis
 ↓
MySQL

或者：

Internet
 ↓
Firewall
 ↓
Public Network
 ↓
Load Balancer
 ↓
Private Network
 ├── Web01
 ├── Web02
 └── Web03
 ↓
Database Network

都可以让它生成 Architecture Diagram。

项目还自带一批 IT / Cloud 图标，包括 Server、Database、Docker、Kubernetes、AWS、Azure、GitHub、Postgres 等，并通过 currentColor 自动继承当前 Style。

不是什么内容都应该画图

项目自己也明确建议：

如果只是：

列表
简单 Before / After
一句话可以说明的关系

就不要强行画 Diagram。

例如：

支持：
Ubuntu
Debian
CentOS
Windows

直接列表明显比画四个框更容易阅读。

diagram-design 的判断标准其实很简单：

读者能不能从图中获得比一段清晰文字更多的信息？

如果不能，就不应该画。

部署总结

cathrynlavery/diagram-design 更准确的定位是一套 AI Agent Diagram Design Skill。

它不是传统在线绘图程序，而是让 Claude Code、Codex、Pi 等 Agent 按统一设计规范生成：

Architecture
Flowchart
Sequence
ER
Timeline
Swimlane
Gantt
Data Flow
……

等 27 类图表，并输出为独立 HTML + SVG。

如果只是个人使用，直接安装到本地 Claude Code 或 Codex 即可；如果团队已经使用远程 AI Coding 环境，则可以把 Git、Agent、diagram-design、Playwright 和项目代码统一放到 Linux 开发服务器。

莱卡云可以作为这种 Linux 开发环境的一个候选，用于承载 Claude Code/Codex、diagram-design、Playwright 和项目代码；已有其他 Linux VPS、自建服务器或内部虚拟机也同样适用。

个人环境 2 核 4GB 基本可以起步，同时跑多个项目、Playwright 和 Docker 时可以考虑 4 核 8GB。

对于这个项目来说，比服务器配置更重要的其实是：Diagram 类型有没有选对、Style Guide 是否统一、节点有没有过度堆叠，以及最终生成的图是否真的比文字更容易理解。