Next AI Draw.io 初学者完全指南：从零到精通

用自然语言画架构图、流程图、UML图——不需要拖拽，不需要记快捷键。这是一份为小白准备的实操手册。

一、这是什么？为什么你需要它？

Next AI Draw.io 是一个开源 Web 应用（28,000+ GitHub Stars），它把 AI 大模型和 draw.io 图表工具深度整合在一起。核心能力就是一句话：你用中文/英文描述你想要什么图，AI 帮你自动生成可编辑的 draw.io 图表。

它和"让 ChatGPT 画一张图"有本质区别：

一句话总结：它不是"帮你画一张图"，而是"帮你搭好图的骨架，你随时可以自己改"。

二、30秒快速体验（不装任何东西）

在正式部署之前，建议先用官方 Demo 站体验一下：

官网 Demo：https://next-ai-drawio.jiang.jp/

直接打开网页，在对话框输入流程图描述，点击发送。Demo 站由字节豆包赞助，使用 GLM-4.7 模型，免费可用但有限流。

省钱技巧：点击右上角设置图标，填入你自己的 API Key（如 Claude 或 OpenAI 的），就可以绕过 Demo 站的免费额度限制。API Key 只存在你浏览器的本地存储里，不会上传到服务器。

三、三种部署方式（选一种适合你的）

方式一：Docker 部署（推荐，最省心）

适合：不想折腾 Node.js 环境，只想快速在自己的机器上跑起来。

docker run -d -p 3000:3000 \  -e AI_PROVIDER=anthropic \  -e AI_MODEL=claude-sonnet-4-5-20250514 \  -e ANTHROPIC_API_KEY=你的API_KEY \  ghcr.io/dayuanjiang/next-ai-draw-io:latest

然后浏览器打开 http://localhost:3000。

常用 Provider 的 Docker 环境变量速查：

豆包福利：在火山引擎 ARK 平台注册可领 50 万免费 tokens。

方式二：Vercel 免费一键部署

适合：不想维护服务器，想要一个独立、在线的个人专属画图工具。

1. Fork 这个仓库到自己的 GitHub
2. 打开 Vercel，导入你 fork 的仓库
3. 关键步骤
   ：在环境变量页面设置 AI_PROVIDER、AI_MODEL 和对应的 API Key
4. 选择 Hobby 计划（免费），点 Deploy
5. 几分钟后你就有自己的专属域名了

注意：Vercel Hobby 计划的 Serverless Function 有 10 秒超时限制。画简单流程图通常足够，但超复杂的图可能因生成过慢超时——遇到这种情况可以拆成多个小图分步生成。

方式三：本地开发部署

适合：想要二次开发、修改源码、或在内网环境部署。

git clone https://github.com/DayuanJiang/next-ai-draw-iocd next-ai-draw-ionpm installcp env.example .env.local

编辑 .env.local，填入你的配置：

# 以 Anthropic 为例AI_PROVIDER=anthropicAI_MODEL=claude-sonnet-4-5-20250514ANTHROPIC_API_KEY=sk-ant-xxxxx

然后启动：

npm run dev# 访问 http://localhost:6002

四、模型选择——这是最重要的决策

模型选对 = 成功一半。这是社区测试和作者反复强调的核心经验。

模型效果排行榜（基于实测）

为什么 Claude 是首选？

Claude 系列模型的训练数据中包含了大量 draw.io 的 XML 格式样本。它"知道"AWS Lambda 应该用什么图标、Kubernetes Pod 的标准画法、数据库的圆柱体符号——这些细节其他模型需要反复强调才能做对。

自托管模型避坑指南

如果你用 Ollama / vLLM 等部署本地模型：

• 模型参数至少 32B
  ——小模型无法正确理解和执行 tool calling 指令
• 必须开启 tool calling
  ——这是 AI 生成 draw.io XML 的底层机制
• vLLM 启动参数需加：--enable-auto-tool-choice --tool-call-parser hermes
• 常见错误
  ：模型只输出思考过程不画图——99% 是 tool calling 没开或模型太小

一句话经验：别省模型的钱。用一个好模型（Claude / GPT-5.1 / Gemini 3 Pro）画图，比用一个差模型来回改十次省时间得多。

五、核心功能详解

5.1 文字描述生成图表

这是最基础的使用方式。在对话框里描述你要的图：

简单图——直接描述即可：

画一个用户登录流程图，包含: 输入用户名密码 → 验证 → 成功进入主页 / 失败提示重试

复杂架构图——用"两步法"：

复杂图不要一次性描述所有细节。推荐使用"先让 AI 帮你起稿，再逐步细化"的策略：

第一步：

请帮我设计一个电商系统的微服务架构图，包含用户服务、商品服务、订单服务、支付服务、网关

第二步（在第一步生成的图上继续修改）：

请把订单服务和支付服务之间加上消息队列，标注为 RabbitMQ

第三步：

把所有服务的数据存储标注出来，用户服务用 PostgreSQL，商品服务用 MongoDB

5.2 截图/图片复现（超级实用）

这个功能可以理解为"拍照转可编辑图表"：

1. 你有一张别人画好的架构图（截图、PDF 中的图、甚至白板拍照）
2. 上传到对话框
3. AI 会识别图中的元素和连线关系，自动生成可编辑的 draw.io 版本

适用场景：

• 把 PPT 里的静态架构图变成可编辑版本
• 把论文里的流程图复现出来（不再需要手动画）
• 翻拍白板上的草图，快速数字化

注意：这个功能需要视觉模型（如 Claude Sonnet、GPT-4o、Gemini），DeepSeek 文本版不支持。如果上传后提示 "No Image Provided"，换视觉模型即可。

5.3 PDF/文本文件提取

上传 PDF 或纯文本文件，AI 会从中提取关键内容并生成图表。适合从技术文档、会议记录中自动生成架构图或流程图。

5.4 图表历史版本

每次 AI 修改图表，都会自动保存一个快照。点击右下角的时钟图标，可以浏览所有历史版本，一键恢复到任意版本。这个功能在实践中非常实用——当你觉得 AI 改坏了的时候，不需要从头开始。

5.5 动画连接线

在提示词中加入 animated connector，生成的连接线会带有 SVG 动画效果。适合做演示用的架构图。

六、提示词（Prompt）最佳实践

6.1 基础原则

1. 清晰 > 花哨
   ：先让 AI 把结构画对，再逐步美化
2. 分步 > 一口气
   ：复杂图分 3-5 步生成，每步只描述一个方面
3. 具体 > 抽象
   ：说"AWS Lambda 函数"比说"一个计算模块"效果好十倍

6.2 实用的提示词模板

流程图模板：

画一个 [业务场景] 的流程图。包含以下步骤:1. [步骤1]2. [步骤2] → 判断 [条件]- 是 → [分支A]- 否 → [分支B]3. [步骤3]配色使用蓝色系，连接线使用直角转折。

系统架构图模板：

画一个 [系统名称] 的架构图。包含:- 前端: [技术栈]- 后端: [服务列表]- 数据库: [数据库类型]- 中间件: [消息队列/缓存等]使用 AWS 图标库 (或用 Azure/GCP, 或通用图标)各组件之间标注数据流向

UML/ER 图模板：

画一个 [系统] 的 ER 图。包含以下实体:- 用户 (id, name, email, created_at)- 订单 (id, user_id, total, status, created_at) - 商品 (id, name, price, stock)标注实体间的关系 (一对一/一对多/多对多)

6.3 提示词中值得指明的细节

AI 默认的审美比较"直男"——方方正正、配色保守。如果你对视觉效果有要求，在提示词中明确以下几点：

• 配色方案
  ："使用蓝色和灰色为主色调"
• 布局方式
  ："水平布局"还是"垂直分层"
• 连线风格
  ："使用直角转接连线"还是"直线连接"
• 图标风格
  ："使用 AWS 图标"或"使用通用图标"

6.4 "两步法"实战案例

以画一个 RAG 聊天应用架构图为例：

第一步（生成骨架）：

生成一个 RAG 聊天应用的架构图。使用 AWS 图标。

第二步（补充细节）：

在数据采集模块中补充:1. 文档上传后经过文本分块 (chunking)2. 向量化存储到 Pinecone3. 查询时先检索相关文档片段4. 将检索结果和用户问题一起发给 LLM 生成回答

七、MCP Server——在 Claude Code / Cursor / VS Code 中直接画图

这是 next-ai-draw-io 最强大的集成功能：通过 MCP（Model Context Protocol），你能在 Claude Code、Cursor、VS Code 等 AI 编程工具中直接生成图表。

Claude Code CLI 配置

claude mcp add drawio -- npx @next-ai-drawio/mcp-server@latest

配置完成后，直接对 Claude Code 说：

"Create a flowchart showing userauthenticationwith login, MFA, andsessionmanagement"

图表会在浏览器中实时弹出显示。

VS Code / Cursor / Claude Desktop 配置

在你的 MCP 配置文件中加入：

{"mcpServers": {"drawio": {"command": "npx","args": ["@next-ai-drawio/mcp-server@latest"]    }  }}

不同工具的配置文件位置：

• Claude Desktop: ~/Library/Application Support/Claude/claude_desktop_config.json
• VS Code: .vscode/mcp.json
• Cursor: ~/.cursor/mcp.json

MCP 可用的工具

八、常见问题排查（新人最容易踩的五个坑）

坑一：模型只"思考"不画图

症状：对话框里显示模型输出了大量推理过程，但没有生成图表。

原因：模型太小（< 32B 参数）或 tool calling 功能未开启。

解决：

• 换用 Claude Sonnet / GPT-4o / Gemini 等较强大的模型
• 如果是自托管模型（vLLM），确认加了 --enable-auto-tool-choice --tool-call-parser hermes
• 如果是 Ollama，部分模型可能不支持 function calling

坑二：上传图片后提示 "No Image Provided"

原因：当前模型不支持视觉（vision）功能。DeepSeek 文本版、Kimi K2、Qwen 纯文本版都不支持。

解决：切换到 Claude Sonnet、GPT-4o、Gemini 等支持视觉的模型。

坑三：内网环境画图界面加载不出来

症状：所有功能正常，但右侧的 draw.io 编辑区是白的。

原因：embed.diagrams.net 在内网环境中被屏蔽或解析失败。

解决：在内网部署一个 draw.io 实例，然后配置：

# Docker 部署时必须通过 build args 传递（不是运行时环境变量！）NEXT_PUBLIC_DRAWIO_BASE_URL=http://你的内网drawio地址:8080/

重要：NEXT_PUBLIC_* 开头的变量是构建时变量，运行时的环境变量不起作用。必须通过 Docker build args 或在本地开发时配置到 .env.local 中。

坑四：复杂图的连线混乱

症状：AI 生成的架构图中，组件之间的连线交叉缠绕。

策略：

• 分步描述连线关系，不要一次性要求全部连线
• 先描述主要数据流，再描述次要连接
• 明确告诉 AI 使用特定的连接点（左/右/上/下）
• 生成后手动微调——把 AI 生成的图当"草稿"而不是"成品"

坑五：生成到一半超时（Vercel 部署）

症状：Vercel 部署的版本在生成复杂图时报错超时。

原因：Vercel Hobby 计划的 Serverless Function 有 10 秒执行时间限制。

解决：

• 把复杂需求拆成多个简单步骤
• 使用本地 Docker 部署（无超时限制）
• 升级到 Vercel Pro 计划（60 秒超时）

九、从新手到进阶的学习路径

第一阶段：上手（第一天）

• x打开官网 Demo 站体验

  x用一句简单的话生成第一张流程图

  x学会用 Docker 在自己的机器上部署

第二阶段：熟练（第一周）

• x掌握"两步法"生成复杂架构图

  x尝试上传截图让 AI 复现

  x学会用历史版本回退功能

  x找到适合自己预算和需求的模型

第三阶段：集成（第二周）

• x配置 MCP Server，在 Claude Code/Cursor 中直接画图

  x用 ai-models.json 配置多模型（给团队用）

  x如果是内网环境，完成离线 draw.io 部署

第四阶段：进阶

• x阅读环境变量文档，了解所有可配置项

  x给项目贡献代码或翻译文档

  x探索 GitHub Issues 中的高级使用技巧

十、资源索引

本指南基于 next-ai-draw-io 截至 2026 年 5 月的版本编写。项目持续更新中，最新信息请以 GitHub 仓库为准。