夜雨聆风
如果你想图省事，把这个图发给你的Agent，告诉他你想试试Next AI Draw.io,他会给你搞定
我们这一代工程师，经历了从手绘到 CAD，从纸质文档到在线协作的转变。但有一件事，我们可能还在用 以前的方式做——画图。打开 draw.io，手动拖拽组件，调整连线，反复修改布局，最后导出一张截图发给同事。
这在 AI 时代，显得格格不入。
既然代码可以自动生成，文档可以自动编写，为什么流程图不能自动画？
直到我试了个新东西——Next AI Draw.io MCP Server。直接用自然语言告诉 AI "画一个用户认证流程图"，它自动调用 draw.io 生成完整的可编辑图表。从描述到成品，不到30秒。全程0学习成本。
· · ·
01 | 这是什么
Next AI Draw.io 是一个基于 MCP（Model Context Protocol）协议的服务器。
说人话：它让 AI 能直接操作 draw.io 画图。
支持 Claude Desktop、Cursor、VS Code 等主流 AI 客户端。你用自然语言描述，AI 自动调用 draw.io 生成图表。
· · ·
02 | 它能画出什么样的图
很多人以为它只能画流程图，其实它支持 draw.io 的全部图表类型：
光说不练没说服力，直接看效果。以下截图均来自官方仓库的真实 draw.io 输出。
示例一：GCP 云架构图
输入"画一个 GCP 应用架构"，AI 自动生成包含 Cloud Load Balancer、Compute Engine、Cloud SQL 在内的完整架构：
示例二：Transformer 架构图
输入"画一个 Transformer 神经网络架构"，AI 自动生成包含 Encoder、Decoder、Multi-Head Attention 的完整结构：
图片来源：GitHub @DayuanJiang/next-ai-draw-io 官方仓库 · 真实 draw.io 输出
· · ·
03 | 为什么我说它丝滑
我试了几个场景，说几个印象深的。
实时预览——AI 每次修改图表，浏览器中实时更新显示。不需要手动刷新，所见即所得。
版本历史——点击浏览器右下角的时钟按钮，可以浏览和恢复早期版本。AI 画错了？一键回退。
文件导出——支持导出为 .drawio 格式文件，这是标准的可编辑工程文件，不是一次性截图。
自包含架构——内置 HTTP 服务器，无需外部依赖。默认端口 6002，如果被占用会自动尝试下一个端口（最多到 6020）。
核心能力 自然语言 → 可编辑图表 实时预览 · 版本回退 · 文件导出 · 自包含 |
· · ·
04 | 装起来有多简单
配置非常简单，只需要在 MCP 客户端配置文件中添加几行 JSON，或者你直接丢给Agent让他从github给你装到本地。
| Claude Desktop | |
| VS Code | |
| Cursor | |
| Claude Code CLI |
标准配置长这样：
{ "mcpServers": { "drawio": { "command": "npx", "args": ["@next-ai-drawio/mcp-server@latest"] } } }
Claude Code CLI 更简单：
# 一行命令 claude mcp add drawio -- npx @next-ai-drawio/mcp-server@latest
如果你用 VS Code Codex 插件，注意：工作区配置对 Codex 不生效。需要用 codex mcp add 命令单独配置。
· · ·
05 | 实战——自然语言画 Azure 云架构图
光说不练假把式。我们再画一张多云架构的实战图。
需求：画一个 Azure 云基础设施架构。
包含 Azure 负载均衡、应用服务、SQL 数据库、存储账户、Redis 缓存等核心组件。
我们用自然语言输入：
画一个 Azure 云基础设施架构图，包含负载均衡器、应用服务、数据库、存储和缓存。
AI 分析了几秒钟，然后生成了一套完整的 draw.io XML。
浏览器中实时显示出一张完整的架构图——模块位置正确，连线清晰，配色协调。
从打开工具到导出 .drawio 文件，不到5分钟。
当然，AI 生成的图表不是 100% 完美。有些细节需要调整，比如模块间距、连线走向。但这些调整，AI 也能帮你做——你只需要告诉它"把这个模块往左移 50px"，它就自动改了。
· · ·
06 | 踩过的坑和经验总结
用 AI 画架构图，不是万能的。我踩了几个坑，说几个印象深的。
必须先启动会话。第一次用的时候，我直接让 AI 画图，结果报错 "No active session"。后来才知道，必须先调用 start_session 启动浏览器会话。
端口可能被占用。默认端口 6002，如果被其他程序占了，服务器会自动尝试下一个端口（最多到 6020）。也可以通过环境变量 PORT 指定其他端口。
AI 生成的是 XML，不是图片。这意味着图表是可编辑的工程文件，不是一次性截图。但你需要确保生成的 XML 格式正确，否则 draw.io 无法打开。
VS Code Codex 配置不生效。如果你用 VS Code 的 Codex 插件，工作区配置对 Codex 不生效。需要用 codex mcp add 命令单独配置。
说句实话 AI 不会让你变成架构师 但它能让你这个工程师，用现有的经验快速产出专业图表 你脑子里的画面没白费，只是需要一个新的表达方式 |
· · ·
07 | 竞品对比——MCP 图表工具哪家强
市面上不只有 Next AI Draw.io 一个选择。我花时间调研了 GitHub 上主流的 MCP 图表工具，做了个对比。
主要分三类：draw.io 生态（Next AI Draw.io、draw.io 官方、@drawio/mcp）、文本图表（Mermaid、PlantUML）、专业图表（UML）。
▼ MCP 图表工具对比（功能卡片视图）
我的选择逻辑：
1. 需要实时预览 → Next AI Draw.io（唯一支持浏览器实时预览）
2. 需要可编辑工程文件 → draw.io 生态（输出 .drawio 格式）
3. 快速生成简单图表 → Mermaid MCP（文本转图表，最轻量）
4. 专业 UML 需求 → UML MCP 或 PlantUML MCP
关键差异 实时预览 + 版本历史 = Next AI Draw.io 独有 其他工具要么需要手动刷新，要么没有版本管理 |
· · ·
08 | 给想试试的人几句话
如果你也想用 AI 画架构图或者流程图，我想跟你说几句实在话。别怕工具变了。你当年学的那些系统设计、模块划分、接口定义，一个都没过时。变的只是"怎么表达"这件事。
从一个小图表开始。别上来就想画完整的微服务架构，先画一个简单的流程图、一个模块关系图。用 AI 工具，把"学习成本"降到"说话的成本"。
AI 是加速器，不是替代品。你得知道你想要什么，AI 才能帮你画出来。别让 AI 替你思考架构，那就本末倒置了。
把踩过的坑、生成的图表、总结的经验记下来。这不仅是给自己的复盘，也是给其他想试试的人一个参考。
· · ·
09 | 最后说几句实在话
AI 时代，画图也应该自动化 代码可以自动生成，文档可以自动编写 流程图，也必须跟上 现在，打开 AI 客户端，说一句话，图表直接生成 用 AI，画出你脑子里的画面 一句话描述，30秒出图，还能导出可编辑文件 什么时候开始都不晚 |
原文首发 | 一个硬件工程师的 AI 画图实操记录
工具地址：github.com/huangsizhou/next-ai-draw-io
npm 包：@next-ai-drawio/mcp-server
* 对比数据基于 GitHub 搜索结果和社区活跃度估算，截至 2026 年 6 月
