Next AI Draw.io Docker 部署指南一条命令跑起 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-ioNext AI Draw.io 把自然语言指令转成可编辑的 draw.io 图表你用中文或英文描述需求它生成对应的 draw.io XML 并实时渲染。本文从容器化部署讲起给出一条命令启动和 Compose 双容器两种落地方法并整理关键环境变量、典型用法与常见坑。先跑起来两种容器化启动方式不需要先读懂代码。把镜像拉下来、把模型凭证喂给它几分钟内就能在浏览器里对话出图。单容器一条命令跑通适合只想体验的开发者。直接指定提供商和模型docker run -d -p 3000:3000 \ -e AI_PROVIDERopenai \ -e AI_MODELgpt-4o \ -e OPENAI_API_KEY你的密钥 \ ghcr.io/dayuanjiang/next-ai-draw-io:latest启动后访问http://localhost:3000。参数较多时改用 env 文件避免命令行被变量淹没cp env.example .env # 按需编辑 .env docker run -d -p 3000:3000 --env-file .env ghcr.io/dayuanjiang/next-ai-draw-io:latest双容器 Compose应用 自建 draw.io单容器默认调用在线的embed.diagrams.net来渲染编辑器。内网或离线环境访问不到它此时可以再起一个 draw.io 容器本地承接。docker-compose.yml已经内置这套编排基于本地源码构建即可services: drawio: image: jgraph/drawio:latest ports: [8080:8080] app: build: context: . args: [NEXT_PUBLIC_DRAWIO_BASE_URLhttp://localhost:8080] ports: [3000:3000] env_file: .envgit clone https://gitcode.com/GitHub_Trending/ne/next-ai-draw-io cd next-ai-draw-io docker compose up -d维度单容器 docker runCompose 双容器渲染依赖在线 embed.diagrams.net本地 draw.io 容器适用网络可访问外网内网 / 离线可用是否需源码否需要本地 build上手成本一条命令需改构建参数三个必配的环境变量部署能否出图取决于这三个变量是否对齐。其余项可按需补充。变量作用常见取值说明AI_PROVIDER选哪个模型后端bedrockopenaianthropicgoogleazureollama等默认bedrockAI_MODEL具体模型 ID如gpt-4o必填与提供商匹配*_API_KEY/AWS_*对应后端的凭证各提供商的 key / 密钥对缺了会直接报鉴权失败补充几个高频项ADMIN_PASSWORD设置后开启/admin面板可在网页里改模型、访问码等免去手改.env。NEXT_PUBLIC_DRAWIO_BASE_URL指向自建 draw.io 的构建期变量内网场景必填。TEMPERATURE控制生成随机性留空则用模型默认。各提供商的详细字段Base URL、推理预算等见 AI 提供商配置。它是怎么把一句话变成图表的抛开前端界面核心链路很短聊天接口把你的指令连同当前图表交给 LLM模型产出 draw.io XML前端再把它渲染回画布。三个关键模块值得看一眼便于定位问题对话与生成app/api/chat/route.ts 负责把请求转给模型并流式返回。会话状态contexts/diagram-context.tsx 维护当前图表与历史版本。模型适配lib/ai-providers.ts 统一封装各后端差异。技术栈是 Next.js Vercel AI SDK react-drawio图表本身始终是 XML这也是为什么它对长文本、严格格式约束的模型要求较高如 Claude Sonnet 4.5、GPT-5.1、Gemini 3 Pro 等。四类典型用法画云架构我输入给我一套 React AWS 的无服务器认证流程用 Serverless 架构它直接铺出 Cognito、API Gateway 与 Lambda 的连接关系。这类 AWS/Azure/GCP 图对带云厂商图形的模型特别友好。排障流程图描述做一个灯泡故障排查流程含判断和解决分支得到带菱形决策节点的完整分支图下面这张是典型产物文档转图上传一份 PDF 或文本它抽取要点后生成对应的结构图适合把设计说明、SOP 快速视觉化。复刻现有图丢一张截图进去让它照着重绘并补充标注——前提是模型支持视觉理解纯文本模型会直接提示未检测到图片。部署后常见问题自查清单出图不稳定时按这几条逐项排查比盲目重试更快。页面打不开确认端口绑定docker ps看3000是否 LISTEN再看docker logs里是否报鉴权或端口冲突。只思考不出图常见于自托管小模型。参数过小建议 32B 以上或服务端没开 tool calling都会出现有推理、无图表。传图后提示没有图片当前模型不支持视觉换成带视觉能力的模型即可。内网报连不上 embed.diagrams.net注意NEXT_PUBLIC_*是构建期变量必须走 build args 传入运行时env不生效内网建议按上一条 Compose 方式自建 draw.io。延伸阅读部署跑通后下面几份文档覆盖了从模型接入到离线上线的细节Docker 运行指南单容器、env 文件与多模型挂载的完整写法。AI 提供商配置逐个后端的环境变量说明。离线 / 内网部署内网渲染器的构建期配置。常见问题更细的报错对照。从一条docker run起步到 Compose 内网落地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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考