企业官网建设流程全解析

5分钟本地部署AI流程图生成工具：next-ai-draw-io完整指南

【免费下载链接】next-ai-draw-ioA next.js web application that integrates AI capabilities with draw.io diagrams. This app allows you to create, modify, and enhance diagrams through natural language commands and AI-assisted visualization.项目地址: https://gitcode.com/GitHub_Trending/ne/next-ai-draw-io

还在手动拖拽画架构图吗？next-ai-draw-io 让你用一句自然语言生成流程图，它是一个可本地部署的 AI 生成图表工具，内置 draw.io 画布。你打一行字，它产出带连线和图标的成品图，跑在自己的机器上，数据不出内网。

1. 它省掉了什么：不用记工具栏按钮

传统画法要记工具栏每个按钮的位置、拖元素、连线，想用 AWS 图标还得自己找官方库，排版不满意只能返工。

next-ai-draw-io 把过程变成对话，类似给实习生下指令：AI 把你的话转成 draw.io 的 XML，画布直接渲染。它带版本历史，AI 每次修改都存一份快照，不满意可以回退。

2. 快速上手：4步跑通本地部署

第一步，拿代码：

git clone https://gitcode.com/GitHub_Trending/ne/next-ai-draw-io cd next-ai-draw-io npm install cp env.example .env.local

第二步，填配置。打开.env.local（相当于告诉程序用哪个 AI 的“设置卡”），只改三处：AI_PROVIDER（选提供商）、AI_MODEL（模型 ID）、对应的 API Key，比如OPENAI_API_KEY。各提供商写法见官方文档。

第三步，启动：

npm run dev

第四步，浏览器打开http://localhost:6002就能写了。

想用容器也行，官方镜像一条命令（数据卷 = 给图表找个固定的家）：

docker run -d -p 3000:3000 -e AI_PROVIDER=openai -e AI_MODEL=gpt-4o -e OPENAI_API_KEY=your_key ghcr.io/dayuanjiang/next-ai-draw-io:latest

3. 实际玩一下：一句话出流程图

你打开页面，在输入框敲：Draw a lamp troubleshooting flowchart（画一个灯泡故障排查流程图）。

AI 先流式输出思考，再生成图表。画布上出现流程图：起点是“灯泡不亮”，两个判断分支“插上了吗？”“灯丝烧断了吗？”，各指向不同处理步骤。

不满意就继续提要求，比如“把判断框改成红色”“下面加一行说明”，它会原地修改，每次改动都留在历史记录里。

4. 按需配置：环境变量速查表

常用参数如下，其余看 env.example：

想给所有用户配多个模型而不用各自带 Key，设置AI_MODELS_CONFIG环境变量，或在项目根目录放一个ai-models.json。

5. 容易踩的坑：3个高频问题

坑1：内网环境画布空白现象：内网部署报错“找不到 embed.diagrams.net 的 IP 地址”。 排查：NEXT_PUBLIC_*是构建时变量，会编译进 JS，运行时在容器里设置无效。 解决：构建镜像时用 build args 传入NEXT_PUBLIC_DRAWIO_BASE_URL，指向自建的 draw.io。

坑2：自建模型只思考不画图现象：本地模型（如 Qwen）只输出思考过程，不出图表。 排查：模型太小、无法正确遵循 tool calling 指令，或服务端没开启工具调用。 解决：换 32B 参数以上的模型，并在推理服务里启用 tool choice。

坑3：上传图片提示“未提供图片”现象：上传一张已有图让它重画，却报错。 排查：当前模型不支持视觉能力。 解决：换支持视觉的模型，或模型名带 vision / vl 的。

写在最后

next-ai-draw-io 把“画图”变成“说图”：三个环境变量加一条启动命令，Docker 或 npm 都能跑，最容易被忽略的坑只是内网变量要传在构建时。

官方文档：Docker 部署 · AI 提供商配置 · FAQ

建议先按“快速上手”用默认配置跑通灯泡流程图例子，跑通后再把AI_MODEL换成你手头的模型。

【免费下载链接】next-ai-draw-ioA next.js web application that integrates AI capabilities with draw.io diagrams. This app allows you to create, modify, and enhance diagrams through natural language commands and AI-assisted visualization.项目地址: https://gitcode.com/GitHub_Trending/ne/next-ai-draw-io