【保姆级教程】爆火开源项目 Next AI Draw.io 上手指南：一句话画流程图
目录
最近一个开源项目 Next AI Draw.io 在 GitHub 上迅速走红，只需要一句自然语言，就能自动生成流程图、架构图，甚至是完整的 AWS / GCP / Azure 云架构示意图，引发了不少开发者和产品经理的关注。它将大模型能力与 draw.io 深度结合，把“画图”这件原本又慢又累的事情，直接变成了“对话即出图”，无论是技术方案梳理、系统设计说明，还是写文档、做汇报，都能明显提升效率。本文将以【保姆级教程】的方式，手把手带你从零上手 Next AI Draw.io，包括项目特点解析、本地/Docker 部署、模型与 API 配置，以及一句话画流程图的完整实战，哪怕你之前没接触过 draw.io，也能快速跑起来。
Next AI Draw.io 是一个基于 Next.js + draw.io + 多模型 AI 的开源项目，支持你用一句自然语言，直接生成流程图、架构图、系统图。下面我将带你从 0 到 1 完整部署，不管你是前端、后端，还是第一次接触这类项目，都可以一步步照着做。
开源地址：https://github.com/DayuanJiang/next-ai-draw-io
一、部署方式选择说明（先看这个）
官方提供了多种运行方式，但最推荐的是 Docker 部署，原因很简单：
- 不用纠结 Node / npm 版本
- 不用折腾 Next.js 构建环境
- 一条命令即可启动
- 非常适合本地体验、私有部署、教学演示
👉 本文主推：Docker 部署（推荐）
👉 后面也会补充「源码本地运行」方式，方便二次开发的人参考
二、部署前准备（非常重要）
在开始之前，请确认你已经准备好下面这些环境：
1️⃣ 安装 Docker（必须），可参考这篇文章：【2025 最新版】Win11 安装 Docker Desktop 超详细图文教程（小白也能学会）
如果你还没安装 Docker：
- 官方地址：https://docs.docker.com/get-docker/
- Windows / macOS 直接下载安装即可
- 安装完成后，终端执行：
docker -v能看到版本号，说明 Docker 安装成功。
2️⃣ 准备一个 AI API Key（重点）
Next AI Draw.io 不会自带模型额度，你需要配置自己的 AI Key，例如：
- OpenAI（GPT-4o）
- Anthropic（Claude Sonnet / Opus）
- DeepSeek
- OpenRouter
- Azure OpenAI
- Bedrock 等
如果你不想折腾多平台 Key，也可以使用 API 中转平台，统一管理模型和 Key，部署会更简单，这里推荐我开发的中转API平台：https://linoapi.com.cn，后面会介绍怎么添加的。
三、方式一：Docker 一行命令启动（最推荐）
这是最快、最省事的方式，适合 90% 的用户。
1️⃣ 基础启动命令（示例）
docker run -d -p 3000:3000 \ -e AI_PROVIDER=openai \ -e AI_MODEL=gpt-4o \ -e OPENAI_API_KEY=your_api_key \ ghcr.io/dayuanjiang/next-ai-draw-io:latest参数说明（一定要看）：
-p 3000:3000：本地 3000 端口访问AI_PROVIDER：模型提供商AI_MODEL：具体模型名称OPENAI_API_KEY：你的 Keyghcr.io/...：官方构建好的镜像
当然完全可以按照我的命令来，因为在UI界面中也可以重新设置API的。
启动成功后，浏览器访问：👉 http://localhost:3000
看到 draw.io 编辑界面 + AI 对话框，说明部署成功 🎉
四、方式二：源码本地运行（适合二次开发）
如果你打算 魔改功能 / 接入私有模型 / 深度定制 UI，可以用源码方式。
git clone https://github.com/DayuanJiang/next-ai-draw-io cd next-ai-draw-io
2️⃣ 安装依赖（node安装可参考：【2025年最新版】Node.js安装及环境配置超详细教程（以win11为例子））
npm install
3️⃣ 配置环境变量
cp env.example .env.local
编辑 .env.local，配置你自己的模型参数。
（其中API_KEY需要在 👉 https://linoapi.com.cn/ 获取）
4️⃣ 启动开发环境
npm run dev
启动成功后，浏览器访问：👉 http://localhost:6002/
五、配置API_Key
在配置 Next AI Draw.io 的模型服务之前，我们需要先在中转 API 平台申请一个可用的 API Key，用于替代 OpenAI 的原生 Key。只需要简单几步，即可完成授权与配置。
首先前往平台注册或登录账号：👉 https://linoapi.com.cn/register?aff=sJ68
进入控制台后，在顶部导航栏选择 「控制台」，然后在左侧菜单中找到 「API 令牌」。点击 「添加令牌」 即可创建一个新的 API Key。
创建令牌时，“名称”可以随意填写，例如我填写的是 Next AI Draw.io 。 “分组”建议选择 default，接着我们会在 Next AI Draw.io 的配置文件中填写模型名称，中转平台会根据模型自动路由到正确的接口。
你还可以为这个令牌设置额度限制，例如设置 50 元 作为上限，确保 Next AI Draw.io 的调用不会意外消耗过多费用。如果你希望不限额度，也可以选择无限制。但无论哪种方式，请记得在 「钱包」 中充值，否则 API 将无法调用。
创建完成后，系统会生成一个 API Key。把这个 Key 复制下来，稍后我们需要把它写入 Next AI Draw.io 项目的配置文件中。
在 MemMachine 中使用中转 API 时，一般填写以下两项内容：
- Base URL：
https://linoapi.com.cn/v1 - api_key：复制你刚生成的 Key，例如：
sk-xxxxxx
修改完成后会自动保存的，这样就可以让其使用中转 API 平台作为模型服务来源。
这里以OpenAI为案例，在右上角的设置按钮⚙️，打开 Settings 界面，Provider 选择 OpenAI ，ModelID填写 gpt-4o ，API Key 就复制你刚生成的 Key 。Base URL 填写：https://linoapi.com.cn/v1，配置好之后就会自动保存，就可以在对话框中进行自由生成流程图啦~！
经过几个模型测试发现，使用Claude效果会更好。Provider 选择Anthropic，ModelID填写claude-opus-4-5-20251101，API Key 就复制你刚生成的 Key 。Base URL 填写：https://linoapi.com.cn/v1
六、案例展示
很多人第一次接触 RAG（Retrieval-Augmented Generation）时，最大的问题不是概念，而是流程在脑子里是乱的。这时候，Next AI Draw.io 的价值就体现出来了：一句话，直接把 RAG 的完整链路画出来。
示例提示词：
帮我使用流程图演示 RAG 的工作原理。
与其用大段文字解释 AI 系统的“工作原理”，不如直接让 AI 把流程画出来。Next AI Draw.io 真正解决的，是复杂逻辑难以可视化的问题。
七、写到最后
到这里，你已经可以看到 Next AI Draw.io 并不是一个“玩具型 AI 画图工具”，而是一个真正把「大模型 + 专业图表工具」结合起来的生产力项目：一句话生成流程图、架构图、技术原理图，支持私有部署、多模型接入、版本回溯，几乎覆盖了研发、产品、教学、写文档等所有高频场景。如果你经常需要画流程图、技术架构图、原理示意图，那么强烈建议你亲自部署跑一遍，你会明显感受到“画图这件事，被 AI 彻底改变了”。后续我也会继续拆解更多 AI + 可视化 + 智能体 的实战项目和玩法，欢迎点赞、收藏、关注，我们一起把这些真正有用的 AI 工具，变成自己的生产力武器。
