# Bruce Drawio

> Bruce Drawio 是一个给 AI 编程助手用的 Skill，让它画出结构正确、能在 draw.io 里接着改的图，并告诉你怎么预览。

- 原文：https://bruc3van.com/projects/bruce-drawio/
- 作者：Bruce Van
- 分类：可编辑图表
- 内容更新：2026-09-26
- 适合谁：想用一句话让 AI 画流程图、架构图或 ER 图，画完还要自己改的人。
- 预期结果：拿到一份 .drawio 源文件，检查通过后导出图片，或者在浏览器编辑器里打开接着改。

- [GitHub 源码](https://github.com/bruc3van/bruce-drawio)
- [相关指南](https://bruc3van.com/playbooks/ai-diagrams/)

## AI 画的图，怎么才能接着改？

很多 AI 画图给你的是一张图片，改一个字都得重画。Bruce Drawio 让 AI 直接写出 draw.io 的源文件（`.drawio`），里面的方框、连线、文字都还在，之后可以在 diagrams.net 里随便改。

流程图、架构图、时序图、类图、ER 图、思维导图、网络拓扑图都能画。

## 第一张图怎么画？

1. 按仓库说明，把 Skill 装到你用的 Agent 的技能目录里。
2. 告诉它：给谁看、有哪些节点、它们什么关系、要什么格式，并说明要保留源文件。
3. 让它生成 `.drawio` 文件，再跑一下仓库里带的 XML 检查脚本。
4. 在编辑器里打开或者导出图片，看看连线、文字和布局对不对。
5. 源文件和最终图片一起存好，以后改起来方便。

可以这样跟它说：

```text
画一个订单处理流程图，包含提交、库存检查、支付、发货和退款。
先确认异常分支，再生成可编辑的 .drawio 文件。
检查 XML 结构，并给出可以打开查看的结果。
```

## 一定要装 draw.io 桌面版吗？

不用。桌面版只是用来在命令行里导出 PNG、SVG 或 PDF。没装的话，可以直接在浏览器里打开图表接着改。如果链接太长打不开，或者环境受限，把源文件直接拖进 diagrams.net 也行。

## 检查脚本能查出什么？

能查 XML 结构对不对、有没有重复的 ID、连线有没有连到不存在的节点，以及一部分布局问题。但它看不懂你的业务：退款流程对不对、服务之间怎么依赖、数据库关系对不对，这些还得你自己看。

## 对话里已经有图表代码了怎么办？

如果代码已经在浏览器的 AI 对话里，只想快点打开看看，用 [Draw.io Quick Launcher](https://bruc3van.com/projects/drawio-quick-launcher/) 就行。想让 Agent 从需求开始画、自己检查、最后给你源文件，就用 Bruce Drawio。

## 项目文档与使用限制

- [项目 README](https://github.com/bruc3van/bruce-drawio/blob/ac561a0a449ebdb9fcee6af1d6965146a15cd96c/README.md)

内容更新：2026-09-26。正文依据所列 README 的固定提交整理；内容更新日期不代表已核验最新版本。最新版本与安装要求见项目仓库。

结构检查只能说明文件没问题，不能说明业务关系画对了；桌面版导出要看你的电脑环境；生成了打开链接，也不代表图已经检查过。