用 Draw.io MCP 让 AI 画架构图
约 713 字大约 2 分钟
用 Draw.io MCP 让 AI 画架构图
这案例干啥的
就是让 AI 帮你画架构图。你用文字描述一下"我有个前端、后端、数据库、缓存",它就能给你画出一张能看的架构图,还能导出成文件。
以前画架构图得拖半天组件,现在说人话就行。
啥时候用
- 写技术方案,需要配一张架构图
- 新人入职,想快速了解系统结构
- 做技术分享,需要图来讲
- 改了架构,图也要跟着更新
准备工作
- Codex 装好 Draw.io MCP 插件
- 脑子里大概知道你的系统有哪些模块
- 最好画个草图(纸上就行),理清谁连谁
怎么搞
第一步:确认 MCP 装好了
在 Codex 里问一句:"你能画 draw.io 图吗?"它要是说能,说明 MCP 连上了。
第二步:描述你的架构
用大白话告诉它你的系统长啥样:
帮我画个电商系统架构图。前端是 React,经过 Nginx 反向代理,连到两个后端服务(用户服务和订单服务),用户服务连 MySQL,订单服务连 MySQL 和 Redis,两个服务都通过 Kafka 发消息给下游。
第三步:让它生成
Codex 会调用 Draw.io MCP,生成一个 .drawio 文件,或者直接给你一段能粘贴的 XML。
第四步:看图改图
用 draw.io 官网或者 VS Code 插件打开文件。不满意就跟 AI 说:
用户服务那个框往左挪点,Redis 和订单服务之间加个箭头标注"缓存查询"。
第五步:导出
draw.io 里可以直接导出成 PNG、SVG、PDF,放文档里就行。
验证结果
- 生成了
.drawio文件或者 XML - 在 draw.io 里能打开,图是完整的
- 各个组件连接关系对得上你描述的
- 没有多余的或者缺失的模块
注意事项
提示
描述的时候把"数据流向"说清楚,比如"A 调用 B"还是"A 推消息给 B",图上的箭头方向是不一样的。AI 不会自己猜,你不说明白它就瞎画。
注意
特别复杂的架构(几十个服务那种)别指望一次画好,分模块画再拼到一起更靠谱。
我的经验
我发现一个套路特别好用:先让 AI 画一版"全景图"(粗粒度),再让它针对某个模块画"细节图"(细粒度)。这样比你一次性描述所有细节清晰得多。
还有,让 AI 在图上标注"每个组件的技术栈"(比如 MySQL 8.0、Redis 7),别人看图就一目了然。