Next AI Draw.io 三步上手自然语言生成 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-ioNext AI Draw.io 是一个基于 Next.js 的 AI 绘图工具你用一句自然语言描述需求它就生成或修改一张可编辑的 draw.io 图表。本文带你用最少的命令跑起来本地环境看懂它真正能干什么并只讲你部署时最可能踩的 3 个坑。三步在本地跑起来最短路径是源码方式全程 3 条命令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里只改 3 处其余全部保持默认即可AI_PROVIDERopenai # 你的提供商bedrock/openai/anthropic/google/deepseek 等 AI_MODELgpt-4o # 模型 ID需与提供商匹配 OPENAI_API_KEYsk-... # 对应提供商的 API Key启动并访问npm run dev # 打开 http://localhost:6002如果你更想要容器化的一键体验一条docker run也能起服务端口 3000docker run -d -p 3000:3000 \ -e AI_PROVIDERopenai \ -e AI_MODELgpt-4o \ -e OPENAI_API_KEYsk-... \ ghcr.io/dayuanjiang/next-ai-draw-io:latest两种方式的区别本地开发方式跑在 6002 端口适合要改代码的开发者Docker 方式跑在 3000 端口适合只想用起来的用户。它到底能干什么结论先说凡是需要画出来给别人看的场景都可以先问它一嘴。三个真实可用的例子1. 一句话出流程图。输入创建一个灯泡故障排查流程图它直接产出带判断分支插头没插→插上、灯泡烧了→换灯泡的完整流程图节点、连线、配色都是 draw.io 原生对象你可以继续拖拽编辑。2. 云架构图自动配好官方图标。描述一个用户访问 EC2 的 AWS 架构EC2 连接 S3、Bedrock 和 DynamoDB它会用 AWS 官方图标库aws4 库共 1031 个图形生成标准云架构图而不是手画方块。项目内置了 AWS、Azure、GCP、阿里云、Kubernetes、BPMN 等 33 个图形库、共 4000 个形状索引在 docs/shape-libraries/README.md。3. 把现成材料翻译成图表。它不只能从零画上传一张现有图表的截图AI 会复刻成可编辑的矢量图上传 PDF 或文本文件默认最多提取 150000 字符可以从文档内容直接生成架构图。另外每次 AI 编辑前都会自动存档改坏了可以一键回滚到任意历史版本。关键配置与原理速览你只需要关心的 6 个环境变量其余都有默认值见 env.example变量作用默认值AI_PROVIDER选择 AI 提供商支持 bedrock/openai/anthropic/google/ollama 等 20 种bedrockAI_MODEL模型 ID写多个逗号分隔可让模型选择器里出现多个选项无必填MAX_OUTPUT_TOKENS输出上限推理 token 与图表 XML 共享此配额64000ADMIN_PASSWORD设置后开启/admin管理面板可视化改模型、访问码等不设则关闭ACCESS_CODE_LIST逗号分隔的访问码给多人共享部署做准入控制不设则不限制NEXT_PUBLIC_DRAWIO_BASE_URL自建 draw.io 嵌入服务的地址内网部署必用见坑 1官方嵌入地址原理一句话版图表在底层就是一段 draw.io XMLmxfilediagrammxCell ...//diagram/mxfile。你的对话由 app/api/chat/route.ts 接收经 lib/ai-providers.ts 适配层调用你配置的模型模型返回结构化的 XML 修改指令前端再用 react-drawio 渲染出来。所以模型越强、格式越听话出图质量越高——官方推荐 Claude Sonnet 4.5、GPT-5.1、Gemini 3 Pro 这一档其中 Claude 系列对云架构官方图标最熟画 AWS/Azure/GCP 架构图优先选它。多人共用部署时管理员可用AI_MODELS_CONFIG环境变量或ai-models.json文件在服务端统一配模型用户端就不再各自带 Key 了配置细节在 docs/cn/admin-panel.md。常见坑只列最扎手的 3 个每个都按现象 → 定位 → 解决走坑 1内网/离线环境提示找不到embed.diagrams.net现象页面白屏或提示无法连接嵌入式编辑器。定位NEXT_PUBLIC_*变量是构建时打包进 JS 的事后改.env无效这是新手最常误判的点。解决自建一个jgraph/drawio容器8080 端口然后在docker-compose.yml的build.args里传入NEXT_PUBLIC_DRAWIO_BASE_URLhttp://你的服务器IP:8080/再重新构建。完整方案见 docs/cn/offline-deployment.md。坑 2本地模型只输出思考过程就是不画现象对话正常、AI 也想了但画布一直是空的。定位本项目靠 tool calling 触发绘图动作小模型32B或没开 tool calling 的服务如 vLLM 默认配置会跳过这一步。解决换 32B 参数模型并在服务启动参数里开启工具调用vLLM 需加--enable-auto-tool-choice。坑 3导出 PDF 点了没反应现象点导出 PDF跳转一下然后无响应。定位嵌入式 draw.io 的 PDF 导出依赖外部转换服务在 iframe 里走不通属于平台限制而非你的配置问题。解决先导出 PNG 图片再用浏览器打印为 PDF即可。更多问题如上传图片后报未提供图片——那是模型不支持视觉能力换 GPT-5.2 / Claude 4.5 Sonnet / Gemini 3 Pro 这类多模态模型在 docs/cn/FAQ.md 里有逐条解答。延伸到这里你手上已经有一个能对话、能出图、能回滚的本地 AI 绘图环境了。想继续深入从这几个入口进各提供商的 Key 与模型配置docs/cn/ai-providers.mdDocker 部署与多模型挂载docs/cn/docker.md给 Claude Desktop / Cursor 用的 MCP Serverpackages/mcp-server/README.md【免费下载链接】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），仅供参考