next-ai-draw-io 调研：34K Stars 的 AI 图表利器，MCP Server 让 Agent 也能画架构图

一个用自然语言生成 draw.io 图表的 Next.js 应用，支持 15+ AI 提供商、MCP Server 直连 Claude/Cursor/VS Code、桌面端全平台，34K stars 正在重新定义 ” 画架构图 ” 这件事。

写在前面

画架构图这件事，技术人几乎每天都在做。但 draw.io 的拖拽操作、Visio 的笨重、PlantUML 的语法门槛，让 ” 快速出一个像样的图 ” 始终是个痛点。

next-ai-draw-io 把这个问题简化成了 一句话：你告诉 AI 要画什么，它直接生成 draw.io XML 并渲染出来。而且它不只是画图——还能上传图片让 AI 复刻、上传 PDF 提取内容生成图表、支持动画连接线、带版本历史随时回退。

更关键的是，它通过 MCP Server 让 Claude Desktop、Cursor、VS Code 等 AI 编码工具也能 直接出图——这是 ”Agent 画图 ” 的全新范式。

一、它解决什么问题

一句话卖点：用自然语言直接生成 draw.io 图表，告别拖拽和手写 PlantUML。

二、核心能力：AI 画图能做什么

2.1 自然语言 → 图表

输入提示词，AI 直接生成 draw.io 可编辑的图表。支持：

• 流程图：用户认证、CI/CD 流水线、业务审批流程
• 架构图：AWS/GCP/Azure 云架构（Claude 系列对云厂商 logo 有专门训练）
• 概念图：组织架构、思维导图、数据模型
• 创意图：甚至可以画猫（README 示例）

2.2 图片复刻

上传一张 PNG/JPEG 截图，AI 识别内容后 复刻成可编辑的 draw.io 图表。这对 ” 从别人的架构图学习 ” 或 ” 把白板拍照转成正式图 ” 极其有用。

2.3 PDF / 文本提取

上传 PDF 或文本文件，AI 提取内容后自动生成对应图表。适合从文档、需求说明书直接生成可视化。

2.4 动画连接线

支持在连接线上加动画效果，让架构图的数据流方向更直观。

2.5 图表历史 + 回退

每次 AI 编辑都记录版本，可随时查看和恢复历史版本——不用担心 AI “ 画坏了 ”。

三、差异化能力：MCP Server 让 Agent 也能画图

这是 next-ai-draw-io 最独特的能力，也是它跟其他 AI 画图工具拉开差距的地方。

3.1 MCP Server 开箱即用

一行配置即可让 Claude Desktop、Cursor、VS Code、Cline 等 AI 工具直接调用画图能力：

{
  "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

然后直接说：” 画一个用户认证流程图，包含登录、MFA 和会话管理 ”，图表 实时在浏览器中渲染。

3.2 自包含设计

MCP Server 内置 HTTP 服务器，不依赖外部服务，零额外依赖。这意味着即使在离线环境也能用。

3.3 多模型覆盖

支持 15+ AI 提供商，几乎覆盖了市面上所有主流模型：

关键提示：官方推荐 Claude Sonnet 4.5 或 GPT-5.1 这类强模型，小模型（32B 以下）容易 ” 只思考不画图 ”——因为生成 draw.io XML 需要严格的格式约束。

3.4 桌面端 + Docker 部署

除了 Web 版，还提供 Windows/macOS/Linux 桌面应用（Electron），以及 Docker 一键部署。管理员可通过 /admin 面板管理模型配置、访问码、配额。

四、编辑器能力对比

核心判断：next-ai-draw-io 不是要替代 draw.io，而是在 draw.io 上面加了一层AI 加速层——你依然可以用 draw.io 的原生编辑器微调 AI 生成的图表。

五、对比：跟同类工具比好在哪

结论 ：如果你只需要 ” 一张图 ”，ChatGPT 直出 SVG 够用。但如果你需要 可编辑的、可版本管理的、能集成到 Agent 工作流的 图表，next-ai-draw-io 是目前唯一解。

六、实战：3 步跑通

Step 1：克隆 + 装依赖

git clone https://github.com/DayuanJiang/next-ai-draw-io
cd next-ai-draw-io
npm install
cp env.example .env.local

Step 2：配置 API Key

编辑 .env.local，以 OpenAI 为例：

OPENAI_API_KEY=sk-xxx
AI_MODEL=gpt-4o

或者用 Ollama 跑本地模型（推荐 32B+）：

OLLAMA_BASE_URL=http://localhost:11434
AI_MODEL=qwen3:32b

Step 3：启动

npm run dev

打开 http://localhost:6002，输入 ” 画一个微服务架构图，包含 API Gateway、用户服务、订单服务、消息队列 ”。

七、风险与坑

1. 小模型 ” 只思考不画图 ”：32B 以下的模型难以生成严格格式的 draw.io XML。推荐 Claude Sonnet 4.5 / GPT-5.1 / Gemini 3 Pro / DeepSeek V3.2 级别。本地部署 Ollama 时特别注意模型大小。
2. 图片复刻依赖视觉模型：上传图片复刻需要模型支持视觉能力（GPT-5.2、Claude 4.5、Gemini 3 Pro），DeepSeek 和 Kimi K2 这类纯文本模型会报 “No image provided”。
3. PDF 导出受限：Web 版嵌入的 draw.io 不支持直接 PDF 导出，需先导出 PNG 再转 PDF。
4. 内网部署需注意 build-time 变量：NEXT_PUBLIC_* 环境变量是构建时变量，运行时改不生效，内网部署需在 Docker build 时传入 --build-arg。
5. 172 个 open issues：虽然活跃度高（几乎每天有 commit），但 issue 数量不少，部分边缘场景（多页图、内网部署、特定模型兼容性）仍在打磨中。
6. 个人项目风险：作者 DayuanJiang 是个人开发者（501 commits），虽然社区贡献者活跃（29 人），但项目未来走向高度依赖作者个人精力。

八、总结

三个最值得装的理由：

1. MCP Server 让 Agent 画图成为现实——Claude Desktop / Cursor / VS Code 一行配置就能出图，这是 ”AI 辅助架构设计 ” 的新范式
2. 34K stars 的社区验证——不是昙花一现的 demo，而是持续迭代 17 个月、30+ 贡献者的成熟项目
3. Apache-2.0 + 全平台部署——自建 Docker、桌面端、Vercel/Cloudflare 一键部署，没有供应商锁定

一句话：如果你经常画架构图、流程图，装一个 next-ai-draw-io 的 MCP Server，让 Claude 替你画，先试一周看看能不能省下 80% 的拖拽时间。

参考

1. GitHub: https://github.com/DayuanJiang/next-ai-draw-io
2. 在线 Demo: https://next-ai-drawio.jiang.jp/
3. MCP Server: https://www.npmjs.com/package/@next-ai-drawio/mcp-server
4. AI Provider 配置: https://github.com/DayuanJiang/next-ai-draw-io/blob/main/docs/en/ai-providers.md
5. FAQ: https://github.com/DayuanJiang/next-ai-draw-io/blob/main/docs/en/FAQ.md
6. Docker 部署: https://github.com/DayuanJiang/next-ai-draw-io/blob/main/docs/en/docker.md
7. Admin Panel: https://github.com/DayuanJiang/next-ai-draw-io/blob/main/docs/en/admin-panel.md
8. 赞助商 Doubao: https://www.volcengine.com/activity/codingplan