Next AI Draw.io 部署指南：10 分钟跑通 AI 画图

Next AI Draw.io 部署指南：10 分钟跑通 AI 画图

【免费下载链接】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

在 draw.io 里手绘一张架构图很慢，每个框、每条连线都要手动对齐。Next AI Draw.io 把这件事变成了自然语言任务：你用一句话描述需求，AI 直接产出可编辑的完整图表。读完这篇指南，你将在 10 分钟内完成 Next AI Draw.io 部署，并用一句提示词跑通第一次 AI 画图。

Next AI Draw.io 能做到什么

它是一个 Next.js 网页应用：左侧聊天面板对话，右侧 draw.io 画布实时渲染结果，整个过程不需要你碰任何图形编辑器。

• 用自然语言生成图表：一句话描述需求，AI 输出完整图表，从零搭建省掉手工摆放节点的时间。
• 对话式编辑图表：生成后继续提要求，比如"加一个节点""换个配色"，AI 在现有图上修改而不是重画。
• 上传文件提取内容生成图表：支持 PDF、文本文件和已有图表截图，AI 先提取内容再转成结构化图表，适合把旧文档转成可视化。
• 画云服务商架构图：内置 AWS、GCP、Azure 等符号库，用对应官方图标组件，出图可直接用于评审。
• 展示 AI 推理过程：支持的模型会显示思考步骤，你能判断它为什么这样布局，方便纠偏。

先选 AI 大脑：提供商与模型怎么选

出图质量主要取决于模型，所以部署前先定这件事，避免环境跑起来再折腾。

• OpenAI（GPT-4o / GPT-5.1）：通用稳定，有现成 API Key 时的首选。
• Anthropic（Claude Sonnet 4.5）：在 draw.io 图表和 AWS/Azure/GCP 云图标上训练充分，画云架构图表现最好。
• Google（Gemini 3 Pro）：长上下文，适合节点多、规模大的图。
• DeepSeek（V3.2 / R1）：成本低，批量出图时性价比高。
• Ollama（本地）：数据不出内网、无 API 费用，但对长格式输出的要求高，建议 70B 级模型。
• AWS Bedrock：项目默认提供商，已接入 AWS 的团队可直接用。

只选一个的话：云架构图选 Claude Sonnet 4.5，日常画图用 GPT-4o 是稳妥选择。各提供商的环境变量细节见 AI 提供商配置文档。

10 分钟跑起来：选一条部署路径

Docker 方式最快，手动安装便于改源码，按你的诉求二选一。

路径一：Docker 一行命令（推荐）

下面命令在后台拉取镜像、映射 3000 端口，并注入提供商与 API Key：

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

预期结果：容器后台启动，浏览器打开 http://localhost:3000 即可看到页面。如果你习惯用配置文件，把 env.example 复制为 .env 编辑后，改用--env-file .env启动即可。

路径二：手动安装

需要修改源码或本地开发时，按以下步骤克隆并安装：

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 配置文件。

打开 .env.local，填入你选定的提供商配置（以 OpenAI 为例）：

AI_PROVIDER=openai AI_MODEL=gpt-4o OPENAI_API_KEY=your_api_key

保存后执行npm run dev启动开发服务，预期结果：打开 http://localhost:6002 看到应用页面。如果服务要暴露到公网，同时加一行ACCESS_CODE_LIST=your_access_code，它是访问站点的入口密码。

跑通第一张图

这一步用来验证部署是否成功：输入一句提示词，几秒后 AI 会流式输出一张完整图表。

1. 打开部署好的页面，若设置了访问密码，先输入密码进入。
2. 在左侧输入框输入："生成一张灯不亮的故障排查流程图：先判断灯是否插上电源，没插上就插上；插上后判断灯泡是否烧毁，烧毁就换灯泡。"
3. 等待生成完成，画布上会出现带菱形判断节点和分支箭头的决策树。

提示词写法有规律可循：

• 先给图表类型（流程图、架构图、ER 图），再给内容，AI 不会在结构上跑偏。
• 把分支逻辑写成"如果……就……"，每个分支都会落成独立的判断节点。
• 不满意别重画，追加一句迭代即可，比如"在换灯泡后面加一个检查灯座的步骤"。

上生产前避坑清单

内网环境访问不了 embed.diagrams.net 怎么办？画布默认依赖该在线服务，被屏蔽时用 Docker Compose 自建 jgraph/drawio，并把NEXT_PUBLIC_DRAWIO_BASE_URL指向自己的实例后重新构建镜像。注意它是构建期变量，修改后必须重新 build，且地址必须能被用户浏览器直接访问，不能用容器内部域名。详见 离线部署文档。

部署到公网，API 配额被烧光了怎么办？设置ACCESS_CODE_LIST=your_code_1,another_code，之后用户必须输入其中一个密码才能进站。这一项建议在服务公开前配置好，否则任何人都能用你的 Key 生成图表。

并发上来了，静态资源加载慢怎么办？应用主体是 Next.js 构建产物，JS、CSS 等静态资源可交给 CDN 缓存加速；公网部署时把域名接入 CDN 并开启压缩即可，平台级边缘缓存也能进一步降低延迟。

AI 把图改坏了，怎么回滚？应用内置版本历史（实现见 components/history-dialog.tsx），每次 AI 编辑前都会留档，可以查看并恢复任意一个之前的版本，试错成本很低。

从零环境到第一张 AI 画图，核心只有三步：选模型、跑一条命令、发一句提示词。现在就可以动手——先补上 ACCESS_CODE_LIST，再用一句"画一张 AWS 登录架构图"验证整条链路。

【免费下载链接】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