# AI 图表生成与编辑

> 把节点和关系说清楚，让 AI 生成 draw.io 源文件，再到编辑器里检查、修改、导出。

- 原文：https://bruc3van.com/playbooks/ai-diagrams/
- 作者：Bruce Van
- 分类：DIAGRAM EDITING
- 内容更新：2026-09-26
- 适合谁：要画架构图、流程图、泳道图，而且以后还要改的人
- 预期结果：一份随时能改的图表源文件，外加一张能直接放进文档的图


## 这篇指南用到的项目
- [Bruce Drawio](https://bruc3van.com/projects/bruce-drawio/)：Bruce Drawio 是一个给 AI 编程助手用的 Skill，让它画出结构正确、能在 draw.io 里接着改的图，并告诉你怎么预览。
- [Draw.io Quick Launcher](https://bruc3van.com/projects/drawio-quick-launcher/)：Draw.io Quick Launcher 是一个浏览器插件：AI 对话里出现 draw.io XML 或 Mermaid 代码时，一键在 diagrams.net 里打开，直接预览和修改。

## 源文件一定要留

`.drawio` 源文件留着，以后改图都从它开始；要用的时候再按场景导出 SVG、PNG 或 PDF。检查时两件事都要看：关系画没画对，排版好不好看。

这篇只讲架构图、流程图、泳道图这类"讲结构"的图。要画插画、产品图，请用专门的图像工具。

## 从一句描述到一张能用的图

### 1. 先把节点和关系列出来

有哪些角色、系统或步骤？谁连着谁？箭头代表的是"调用"、"数据流向"还是"先后顺序"？

注意：架构图里两个框挨得近，不代表它们真有依赖；流程图里每个分支都要说清楚是什么条件。

### 2. 想好给谁看、画多细

给老板看的全景图，和给研发排查问题的细节图，信息量完全不同。先控制在一屏能看清；系统太复杂就拆开，一张总览加几张局部图。

### 3. 让 AI 输出能编辑的格式

明确告诉 AI 输出 draw.io 格式，文字、方框、连线都要能单独改。可以用 [Bruce Drawio](https://github.com/bruc3van/bruce-drawio) 帮你生成和检查，也可以直接在对话里把结构描述清楚。

### 4. 在编辑器里打开

用 [Draw.io Quick Launcher](https://github.com/bruc3van/Drawio-Quick-Launcher) 把对话里的图表代码一键送进编辑器，或者直接打开本地的 `.drawio` 文件。支持哪些网站以插件最新说明为准；如果没识别出来，先把代码存好再手动导入，别反复重新生成把原稿冲掉。

### 5. 先查对不对，再调好不好看

先一条条核对连线、节点名字和分支条件，再去调对齐、字号和间距。

AI 很容易画出一张整整齐齐、但关系是错的图。XML 格式检查通过，只说明文件没坏，不说明业务逻辑对。

### 6. 导出，并把源文件一起存好

按用途导出图片，放进目标文档里看看清不清楚。源文件、导出图、一句简短说明，三样放在一起。以后改图，永远从源文件改。

## 直接复制的画图提示词

```text
请为下面的流程生成一份可编辑的 draw.io 图表：

流程：参考资料 → 内容整理 → 人工核验 → 文档交付。
人工核验不通过时，返回“内容整理”。

要求：
1. 输出 draw.io XML，文字、节点和连线分别可编辑。
2. 从左到右排列，分支标明“通过 / 需修改”。
3. 使用清楚的中文标签，不增加未提供的业务步骤。
4. 提交前核对节点、箭头方向与分支是否一致。
5. 如果无法校验或预览，请明确说明，不要宣称已通过。
```

## 常踩的坑

- **只有图片，没有源文件。** 改一个字都可能得整张重画。
- **只靠颜色区分。** 黑白打印或者色弱的读者就看不懂了，关系要用文字标出来。
- **一张图塞下所有层级。** 连线交叉成一团，谁也看不清。拆成总览图和局部图。
- **把公司内部架构丢给没批准的服务。** 先用样例或脱敏后的资料，确认能不能用再说。
- **导出成功就当完事了。** 最后一定要在真正要用的地方看一眼。

## 用到的工具

- [Bruce Drawio](https://github.com/bruc3van/bruce-drawio)：让 AI 画 draw.io 图的 Skill。
- [Draw.io Quick Launcher](https://github.com/bruc3van/Drawio-Quick-Launcher)：把 AI 对话里的图表代码一键送进编辑器。
- [diagrams.net](https://app.diagrams.net/)：在线打开和编辑图表，保存时留意存到了哪里。

## 依据与适用边界

- [Bruce Drawio 项目说明](https://github.com/bruc3van/bruce-drawio)
- [Draw.io Quick Launcher 项目说明](https://github.com/bruc3van/Drawio-Quick-Launcher)
- [diagrams.net 编辑器](https://app.diagrams.net/)

内容更新：2026-09-26。外部工具以当前官方说明为准。

适合架构图、流程图这类讲结构的图。导出成功不代表图里的关系就对了，最后还是要在编辑器里、在真正要用的地方看一遍。