Appearance
Next AI Draw.io #
是什么 #
Next AI Draw.io 是一款将 AI 能力与 draw.io 图表深度集成的 Web 应用。用自然语言描述想要的图表，AI 直接生成 draw.io XML 并实时渲染，支持架构图、流程图、云服务图标等多种类型。
- 官网： https://next-ai-drawio.jiang.jp/
- GitHub： github.com/DayuanJiang/next-ai-draw-io
- 技术栈： Next.js 16 + React 19 + Vercel AI SDK
解决啥 #
画架构图和流程图是个麻烦事：
- 用 Visio/OmniGraffle 手工画费时间
- 让 AI 生成代码绘图，格式控制不精确
- 不同成员用不同工具，风格不统一
Next AI Draw.io 用自然语言驱动 draw.io，生成结果精确可控，AI 生成的 XML 可以直接下载使用。
怎么跑 #
在线体验（无需安装）：
直接访问 https://next-ai-drawio.jiang.jp/，在设置里填入自己的 API Key 即可。
Docker 部署：
bash
docker run -p 6002:6002 next-ai-draw-io
本地开发：
bash
git clone https://github.com/DayuanJiang/next-ai-draw-io
cd next-ai-draw-io
npm install && cp env.example .env.local
npm run dev
# 打开 http://localhost:6002
Claude Code / Cursor 接入（MCP）：
bash
claude mcp add drawio -- npx @next-ai-drawio/mcp-server@latest
好在哪 #
| 维度 | 优势 |
|---|---|
| 精确度 | 直接生成 draw.io XML，格式完全可控 |
| 云架构 | 支持 AWS / GCP / Azure 官方图标 |
| 多模态 | 支持上传图片、截图、PDF 自动生成图表 |
| AI 推理可视化 | 支持查看 AI 思考过程 |
| 版本控制 | 每次修改都有历史版本，可回滚 |
| MCP 接入 | 可无缝接入 Claude Code、Cursor 等 AI 编程工具 |
| 模型支持 | 支持豆包、DeepSeek、OpenAI、Claude、Ollama 等 |
💡 画云架构图推荐用 Claude，Claude 系列在 draw.io 云服务图标上专门训练过。
怎么用 #
场景 1：让 AI 画架构图
"Generate a AWS architecture diagram. Users connect to a frontend hosted on an instance."
场景 2：让 Agent 自动生成图表
配置好 MCP 后，直接对 Claude Code 说：
"Create a flowchart showing user authentication with login, MFA, and session management"
图表在浏览器里实时生成。
场景 3：截图转图表
上传一张现有的架构截图，AI 自动识别结构并生成 draw.io 文件。
📺 视频介绍： B站视频 - 可视化爬虫软件