Next AI Draw.io 开源项目部署与使用指南：一句话生成流程图

Next AI Draw.io 是一个基于 Next.js + draw.io + 多模型 AI 的开源项目，支持用一句自然语言直接生成流程图、架构图、系统图。本文将带你从 0 到 1 完整部署，包括项目特点解析、本地/Docker 部署、模型与 API 配置，以及实战演示。

开源地址：https://github.com/DayuanJiang/next-ai-draw-io

一、部署方式选择说明

官方提供了多种运行方式，最推荐的是 Docker 部署，原因如下：

• 不用纠结 Node / npm 版本
• 不用折腾 Next.js 构建环境
• 一条命令即可启动
• 非常适合本地体验、私有部署、教学演示

本文主推 Docker 部署，同时也补充源码本地运行方式，方便二次开发参考。

二、部署前准备

在开始之前，请确认已准备好以下环境：

1. 安装 Docker（必须）

如果尚未安装 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。

三、方式一：Docker 一行命令启动

这是最快、最省事的方式，适合大多数用户。

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：你的 Key
• ghcr.io/...：官方构建好的镜像

当然也可以在 UI 界面中重新设置 API 信息。

启动成功后，浏览器访问：http://localhost:3000

看到 draw.io 编辑界面 + AI 对话框，说明部署成功。

四、方式二：源码本地运行

如果你打算魔改功能、接入私有模型或深度定制 UI，可以用源码方式。

1. 克隆代码

git clone https://github.com/DayuanJiang/next-ai-draw-io
cd next-ai-draw-io