一句话生成架构图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用一句画一个包含负载均衡器和 RDS 数据库的 AWS 高可用架构不到一分钟就能拿到一张组件、连线齐全的图表——这就是 Next AI Draw.io 做的事。它把大语言模型接进 draw.io让你用自然语言创建、修改和增强图表非技术同事靠聊天就能出图架构师可以直接把产出贴进评审文档。效果预览一句话生成完整云架构图先在输入框里丢一段需求试试Create a high-availability AWS architecture with a load balancer, 3 EC2 instances, and an RDS database你会得到一张完整的云架构图下面是 AI 实际生成的示例关键在于产出的不是截图而是真实的 draw.io 文件你可以继续用对话微调也可以导出后在任何 draw.io 环境里二次编辑。同样地为聊天应用画一张 RAG 架构图会生成数据接入、向量库到生成链路的完整流程一句draw a cute cat也能出图说明它并不局限于技术类图表。快速上手三种使用方式怎么选按上手成本从低到高三种方式各适合不同的人在线演示站打开即用无需安装。在聊天面板点设置图标填入自己的 API key 即可绕开演示站的用量限制密钥只保存在浏览器本地、不会上传服务器。适合先花十分钟体验、确认它是否适合你的场景。桌面应用支持 Windows、macOS、Linux 三个平台从 Releases 页下载对应安装包解压即用所有数据留在本机。适合对数据隐私敏感、不想折腾环境的用户。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。想改源码的话克隆仓库地址https://gitcode.com/GitHub_Trending/ne/next-ai-draw-io后执行npm install和npm run dev开发服务器跑在 6002 端口。核心能力你能拿它做什么用对话生成任意类型的图图表基于 draw.io 的 XML 格式draw.io 支持的流程图、架构图、网络图、UML 图它都能画云架构是特化强项AWS、Azure、GCP 的组件图标库都有专门支持还能画带动画的连接线比如让 Transformer 结构图里直观展示数据流向把现有文档和图片变成可编辑图表上传一张已有图表或截图AI 会识别内容并复刻、增强成可编辑版本需要视觉能力模型支持上传 PDF 和文本文件从技术文档、需求文档里提取内容直接生成图多轮对话打磨版本可回滚生成只是起点你可以像改稿一样持续提要求把数据库改成读写分离给网关加一条到缓存的连线图表历史会记录 AI 的每次编辑改坏了可以恢复到任意之前的版本让 AI 客户端通过 MCP 画图项目自带 MCP servernext-ai-drawio/mcp-server接入 Claude Desktop、Cursor、VS Code 等客户端后让 AI 代理直接创建和编辑图表配置方法见 packages/mcp-server/README.mdClaude Code 里一条claude mcp add命令即可接好选型与部署模型与部署方式怎么取舍选择优势注意Claude 系列如 Sonnet 4.5在含 AWS/Azure/GCP 图标的 draw.io 图上训练过画云架构最稳需付费 APIGPT / Gemini / DeepSeek 强模型长文本、严格格式输出稳定适合复杂图表同样需要 API key豆包火山引擎中文场景友好注册送 50 万免费 token适合低成本起步Ollama 等本地模型完全离线、数据不出内网需 32B 参数并开启 tool calling建议画云架构图优先选 Claude 系列想省钱就从豆包免费额度开始。部署侧个人单台机器用 Docker 最省事要对外提供公共服务可以部署到 Vercel、Cloudflare Workers 或腾讯云 EdgeOne PagesCloudflare 方案见 docs/cn/cloudflare-deploy.md。进阶细节技术栈与关键模块想深入理解或二次开发项目结构并不复杂技术栈是 Next.js Vercel AI SDK负责流式响应与多提供商适配 react-drawio图表渲染图表本质是 AI 生成和修改的一段 XML聊天 API 在 app/api/chat/route.ts处理完整的对话与图表生成链路16 家提供商的统一接口封装在 lib/ai-providers.ts想加新模型主要改这里团队部署时设置ADMIN_PASSWORD环境变量访问/admin即可在网页上配置服务器端模型、访问码和配额不用手动改.env说明见 docs/cn/admin-panel.md使用提醒容易踩的坑与行动清单Web 版无法直接导出 PDF嵌入的 draw.io 依赖外部转换服务先导出 PNG 再打印转 PDF 即可离线或内网部署时NEXT_PUBLIC_DRAWIO_BASE_URL是构建时变量改它必须重新构建镜像运行时设置无效方案见 docs/cn/offline-deployment.md上传图片报未提供图片通常是模型不支持视觉换成带 vision 能力的模型如 GPT、Claude Sonnet、Gemini Pro本地小模型只思考不画图两个原因参数太小建议 32B 以上、没开 tool calling在线演示站有使用配额配好自己的 key 后体验更完整准备好后按这三步走1. 打开演示站用上面效果预览里的那句提示词跑通第一次生成2. 打开设置选一个模型并填好 API key3. 确定要长期用时用 Docker 部署到自有服务器再进/admin把团队可用的模型配好。【免费下载链接】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），仅供参考