企业官网建设流程全解析

一句话画出架构图：next-ai-draw-io 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

Next AI Draw.io 是一款集成大语言模型与 draw.io 的开源 AI 绘图工具，用自然语言对话即可自动生成流程图、云架构图、UML 等，支持 OpenAI、Claude、Gemini 等 16 家 AI 提供商，Docker 一条命令即可部署。

先画图再抠细节？把绘图交给 AI 的思路

画一张系统架构图，真正耗时的往往不是设计思路，而是拖框、连线、对齐、换图标。需求一改，所有连线还得重画。next-ai-draw-io 的做法是把这些"体力活"移交给 AI：你只描述要画什么，模型直接产出完整的 draw.io XML，画布实时渲染，生成的图表依然完全可编辑，不是一次性图片。

它具体能做什么：一句话生成、对话式修改、文档转图

一句话生成专业图表

"画一个带负载均衡器和 3 个 EC2 实例的 AWS 高可用架构"，或者"灯泡不亮了怎么排查"，把需求写清楚，AI 会输出组件、连线和判断分支都齐全的图表。项目内置了流程图、云架构（AWS / Azure / GCP）、Kubernetes 等 30 多个图形库的规范文档（见 docs/shape-libraries/），所以云图标这类容易画错的部分也能基本还原。

对话式修改图表，历史版本可回滚

不用每次从零重画。在聊天面板里继续说"数据库换成 PostgreSQL""加一层缓存"，AI 会直接修改现有图表。每次修改都会自动记录版本，改崩了可以一键回退到 AI 编辑前的状态，这点比手工在 draw.io 里反复试错省心。

上传图片和文档，把存量资料变成可编辑图

• 上传现有图表或截图，AI 识别后用 draw.io 格式复刻并增强
• 上传 PDF 技术文档，提取内容后生成对应架构图
• 上传文本需求文档，直接转成流程图

三种方式在 3 分钟内快速上手 AI 绘图

方式一：在线体验，先感受交互

官方提供了在线演示站点（入口见仓库 README），无需安装。演示版有使用配额，但你可以点聊天面板里的设置图标填入自己的 API Key 绕过限制——密钥只存在浏览器本地，不会上传到服务器。

方式二：Docker 一键本地部署

下面这条命令以 OpenAI 为默认模型启动应用，把密钥换成你自己的即可：

docker run -d -p 3000:3000 \ -e AI_PROVIDER=openai \ -e OPENAI_API_KEY=your_api_key \ ghcr.io/dayuanjiang/next-ai-draw-io:latest

启动后打开浏览器访问http://localhost:3000就能用。不想逐条传-e参数的话，也可以用--env-file .env一次性加载配置文件。

方式三：源码运行，适合想改代码的人

先克隆仓库安装依赖，再复制环境变量模板并启动开发服务器（默认端口 6002）：

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里的AI_PROVIDER和对应 API Key 即可切换模型。各提供商（豆包、Gemini、DeepSeek、Ollama 等）的具体变量和端点配置，建议直接查 docs/cn/ai-providers.md，每个提供商都有现成示例。

进阶玩法：MCP 实时绘图、团队部署与离线环境

在 Claude Desktop / IDE 里让 AI Agent 直接画图

项目附带了一个 MCP 服务器（packages/mcp-server/），把它接入 Claude Code、Cursor 等客户端后，对 AI 说一句"创建用户认证流程图"，图表会实时出现在浏览器里——绘图从"网页工具"变成了 AI 编程助手的一项技能：

claude mcp add drawio -- npx @next-ai-drawio/mcp-server@latest

团队部署：一个管理面板管所有模型

多人共用时不必让每个人自带 Key。设置ADMIN_PASSWORD环境变量后访问/admin，就能在网页上配置服务端模型列表、访问码和用量配额，保存后立即生效，不用再手动改.env。

内网 / 断网环境：离线部署

应用默认加载embed.diagrams.net来渲染图表，内网访问不到时可以自建 draw.io 服务替换。NEXT_PUBLIC_DRAWIO_BASE_URL是构建时变量，配置细节（包括 URL 该填浏览器可访问的地址这类坑）都写在 docs/cn/offline-deployment.md，照抄 docker-compose 片段即可。

下一步建议

1. 先在在线演示里试几句，找到描述图表最有效的问法；
2. 用 Docker 命令部署自己的实例，接入已有 API Key 的提供商；
3. 画云架构图时优先考虑 Claude 系列模型——官方 README 提到它对 AWS、Azure、GCP 云图标做过针对性训练，还原度最好。

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