next-ai-draw-io：基于 Next.js 的 AI 绘图工具搭建指南

next-ai-draw-io

这是一个纯前端的基于 Next.js 和 AI 模型的项目，使用非常简单。编写 prompt 就能快速把文字描述变成简约美观的流程图、序列图、思维导图。

生成的不是一张死图，是可以二次编辑微调的，这对程序员和架构师来说非常重要。

上手使用

改配置

项目源码下载以后，只需要做一件事，复制文件 env.example 内容新建一个 .env.local 文件，主要是设置默认的大模型。

编译启动

直接编译启动就行了：

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

更简单的可以直接 docker 启动，参数上设置要用的模型类型：

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

或者用一个环境文件：

cp env.example .env
docker run -d -p 3000:3000 --env-file .env ghcr.io/dayuanjiang/next-ai-draw-io:latest

直接页面访问 http://localhost:3000，打开能看到界面，可以选择修改模型配置。

MCP

它还提供了 MCP 服务，可以在大模型里直接配置调用。

{"mcpServers":{"drawio":{"command":