Codex × Draw.io MCP：AI 自动绘制架构图
Codex × Draw.io MCP：AI 自动绘制架构图
俗话说，一图胜千言。当我们想要介绍一个项目架构、业务流程，或者系统模块关系、日常读书的核心逻辑时，如果只用文字讲，读者很容易看累。如果我们能把它整理成一张信息图或者流程图，理解成本就会降低很多。
Draw.io 就是一个非常好的工具。它可以用来绘制：
- 流程图
- 架构图
- 思维导图
- 系统设计图
- 业务流程图
- 技术路线图
很多程序员、产品经理、架构师都会用它来表达复杂系统之间的关系。前段时间，Draw.io 官方发布了自己的 MCP。
GitHub 地址：https://github.com/jgraph/drawio-mcp
本章节介绍如何使用 Codex 安装、使用 Draw.io 的 MCP 工具，去绘制信息图或架构图。
在半桶水课程里，它对应的是“内容表达 / 办公交付 / 工程协作”的工作流：把一段复杂材料，拆成节点、关系和层级，再生成可编辑的图。
这节解决什么
很多人不是不会画图，而是不知道先画什么、节点怎么分、关系怎么连。Draw.io MCP 可以让 Codex 把文字材料转成图形草稿，但图里的逻辑关系仍然需要人来判断。
这节练的是：让 Codex 先整理节点关系，再调用 Draw.io MCP 生成可编辑图形。
工作流卡
| 项目 | 内容 |
|---|---|
| 输入 | 主题材料、节点清单、关系说明、图形类型、风格要求 |
| Codex 负责 | 拆解结构、生成节点关系、调用 Draw.io MCP、打开预览 |
| 人类判断 | 逻辑是否成立、层级是否清楚、关系箭头是否正确 |
| 输出 | Draw.io 图、流程图、架构图、信息图或思维导图 |
| 验收 | 图可打开、节点完整、关系准确、文字不溢出、可继续编辑 |
适合谁
这一节适合：
- 想把项目流程、课程内容、读书笔记整理成图的人。
- 需要给客户、团队或学员解释复杂关系的人。
- 想让 Codex 先出图形草稿，再人工调整的人。
第一次练习建议使用 5-8 个节点的小主题，不要直接让 Codex 画完整公司架构。
1. 安装
可以在设置里面添加，但需要填写对应的配置选项：
更简单的方法是直接把 Draw.io MCP 的 GitHub 仓库链接丢给 Codex，让 Codex 帮我们完成安装。
如果它没有理解你的需求，就让它直接安装，说："安装之后，请确保我可以直接使用。"它就会帮你完成安装的过程。
安装完成之后，确认一下即可：
2. 开始使用
我选择一本书的内容，让 Draw.io 根据这本书的核心观点，绘制一张中文信息图。
你可以随意要求它，自定义要绘制的内容、主题、风格等相关要求。
提示： 在提示词里一定要强调使用 Draw.io 的 MCP 去完成任务，这样它才会调用这个工具。
绘制完成之后，它会针对本次任务进行总结，并且自动打开浏览器显示绘图结果。
绘图结果如图所示：
你要重点检查什么
- Codex 是否先整理节点和关系，而不是直接出图。
- 图形类型是否适合内容：流程、架构、关系、时间线不要混用。
- 关键节点有没有遗漏。
- 箭头方向、分组和层级是否符合真实逻辑。
- 生成的图是否能继续在 Draw.io 里编辑。
验收标准
完成这个案例后，至少确认：
- Draw.io MCP 已安装并可调用。
- 生成图可以打开和编辑。
- 图里每个节点都能回到原始材料找到依据。
- 关系线方向和说明没有明显错误。
- 能导出或截图给下一步汇报使用。
复用方式
可以保存成这个任务模板：
请使用 Draw.io MCP 生成一张图。
主题：
原始材料：
图形类型：
必须包含的节点：
关系说明：
风格要求：
验收标准：
生成前请先列出节点和关系，等我确认后再画图。参考来源
本文的操作思路和演示场景参考了以下 B 站创作者的视频内容，感谢原作者的分享：
- 📺 Draw.io MCP 使用教程
来源：哔哩哔哩
链接：https://www.bilibili.com/video/BV1865K6gEhZ/
本文截图均为作者本人实际操作所得，文字内容在参考基础上进行了重新整理与二次创作。如有侵权，请联系删除。