Next AI Draw.io 完整部署教程：3 步用 AI 画出任意图表

Next AI Draw.io 完整部署教程3 步用 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 是一个把 AI 和 draw.io 结合在一起的 Next.js 网页应用你用自然语言描述需求它直接生成图表省去手动拖框、连线、对齐的麻烦。为什么需要它画云架构图是个体力活如果你经常要画 AWS、GCP、Azure 的架构图应该懂这种痛先找官方图标再把组件一个个拖进去、逐个对齐需求会上被人加一句再加一层缓存前面一半的活儿就得重做。这类图现在可以让 AI 直接画。下面就是 Next AI Draw.io 生成的一张 AWS 架构图图标风格、分组层级都齐了需求变了图也要跟着变另一个高频场景图刚发到群里第二天需求改了。传统做法是重新打开文件、自己找要改的元素用 AI 的话你只需说把数据库换成集群部署它会在原图上直接改不用从头再来。它实际能做什么描述即画图输入一句帮我画一个聊天应用的 RAG 架构图右边画布上就会直接出现结果。它对 AWS、GCP、Azure 等云厂商有专门的图形库图标是标准样式不是随手画的方块。传文件直接生成支持上传 PDF、图片和文本文件PDF 会被提取内容再转成图表上传一张现成的图它能照着重画一遍并转成可编辑的 draw.io 格式。实时修改还能回退聊天框就是改图的入口每一轮 AI 修改都会留下历史记录改崩了一键回退。支持推理展示的模型还会把它的思考过程显示出来。最快跑起来首选一条 Docker 命令机器上有 Docker 的话这一步只需要一条命令docker run -d -p 3000:3000 \ -e AI_PROVIDERopenai \ -e AI_MODELgpt-4o \ -e OPENAI_API_KEYyour_api_key \ ghcr.io/dayuanjiang/next-ai-draw-io:latest然后在浏览器打开http://localhost:3000就能用了。换其他提供商、挂多模型配置的完整写法见 docs/cn/docker.md。备选源码本地跑想改代码或者做二次开发就克隆下来本地起服务git clone https://gitcode.com/GitHub_Trending/ne/next-ai-draw-io cd next-ai-draw-io npm install cp env.example .env.local npm run dev先编辑.env.local填好提供商和 API key再执行npm run dev浏览器访问http://localhost:6002。如果你更喜欢桌面软件项目也提供 Windows、macOS、Linux 的 Electron 桌面版装完离线可用。一个真实案例看个实际产出。我给的提示只有一句话帮我画一个灯不亮时的故障排查流程图出来的结果是这样从一句话到一张能直接用的流程图大概不到一分钟。之后还可以继续说标题换个字体再加一个保险丝跳闸的判断分支它都会实时响应不用重新描述整张图。按你的需求定制选个提供商AI 相关的配置都集中在.env.local里模板文件 env.example 自带详细注释。这一步只需要改两个变量AI_PROVIDERopenai # 用哪家服务 AI_MODELgpt-4o # 用哪个模型 除了 OpenAI还支持 Anthropic、Google、Azure、AWS Bedrock默认、DeepSeek、Ollama本地模型等完整清单在 lib/ai-providers.ts每家的具体配置步骤看 docs/cn/ai-providers.md。想让用户在页面上切换多个模型可以挂一个ai-models.json做服务端多模型配置。管理面板设置ADMIN_PASSWORD后/admin页面就能在线改提供商、模型等设置不用每次动环境变量。不设置的话面板默认关闭。本地模型如果你打算用 Ollama 或自部署模型注意两点模型别选太小建议 32B 以上并且要开启 tool calling否则它可能只思考不画图。具体排查方法在项目 FAQ 里有记录。上生产前必读先设访问密码 ⚠️部署到公网却不设密码等于把你的 API key 送给所有人配额很快就会被耗光。上线前务必加上ACCESS_CODE_LISTyour_secure_code支持多个密码用逗号分隔访问页面时会要求输入。模型选择比部署更重要复杂图表建议用 Claude Sonnet 4.5、GPT-4o、Gemini 3 Pro 这类强模型结构生成明显更稳。另外上传图片报错时先确认你的模型是否支持视觉能力能看图纯文本模型是做不了图片识别的。离线与内网部署默认情况下绘图编辑器依赖 embed.diagrams.net如果你的网络访问不了它可以参考 docs/cn/offline-deployment.md 自建一套 draw.io。特别提醒NEXT_PUBLIC_DRAWIO_BASE_URL是构建时变量必须在构建镜像时传入运行后再设置是无效的。配置到这里就可以日常使用了。接下来建议先挑一个你熟悉的提供商配通再慢慢调模型参数如果想让 Cursor 或 Claude 这类 AI 客户端直接操作图表可以看 packages/mcp-server/ 里的 MCP 接入说明。【免费下载链接】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），仅供参考