# Bruce Drawio

> Bruce Drawio 是面向 AI 编程 Agent 的 draw.io 图表生成技能，指导生成 XML、检查结构，并交付可编辑源文件与可用的预览方式。

- 原文：https://bruc3van.com/projects/bruce-drawio/
- 作者：Bruce Van
- 分类：可编辑图表
- 更新日期：2026-09-06
- 适合谁：希望通过自然语言生成流程图、架构图或 ER 图，并继续编辑的用户。
- 预期结果：获得 .drawio 源文件，通过校验后导出图片或在浏览器编辑器中打开。

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

## AI 生成的图表怎样保留编辑能力？

Bruce Drawio 引导 Agent 直接生成 draw.io XML，保存为 `.drawio` 文件。源文件保留节点、连线和文字，后续可以在 diagrams.net 中继续修改，而不只交付一张图片。

可以用它生成流程图、架构图、时序图、类图、ER 图、思维导图和网络拓扑。

## 怎样完成第一张图？

1. 按仓库说明将 Skill 安装到所用 Agent 支持的技能目录。
2. 描述读者、节点、关系和交付格式，明确需要保留源文件。
3. 让 Agent 生成 `.drawio`，运行仓库提供的 XML 校验脚本。
4. 在实际编辑器或导出图片中检查连线、文字与布局。
5. 同时保存源文件与最终预览，便于后续修改。

可以使用这样的需求描述：

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

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

不一定。桌面版用于 CLI 导出 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-06。最新版本与安装要求见项目仓库。

结构校验不能证明业务关系正确；桌面导出依赖环境，生成链接也不等于已经验证最终图表。