企业官网建设流程全解析

Next AI Draw.io 教程：3 步用自然语言画出专业 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

Next AI Draw.io 是一款把大语言模型接入 draw.io 的 AI 绘图工具：你用一句话描述需求，它直接生成可编辑的图表，而不是给你一段图片或代码。本文按顺序讲清楚最短的部署路径、它能接手的几类绘图任务，以及如何为团队接入多模型。跟完操作部分，你大约 3 分钟就能得到一个本地可用的 AI 绘图服务。

先跑起来：3 分钟 Docker 部署本地实例

不想折腾环境的话，Docker 是最快的路径。在已安装 Docker 的机器上执行下面这条命令，填入你的 API 密钥即可：

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

几分钟后打开http://localhost:3000，左侧聊天、右侧画布，直接输入一句话就能看到图表生成过程。完整的参数说明见 Docker 部署文档，无法访问 draw.io 在线服务时可用 离线部署方案。

另外两条路径供你选择：直接访问项目的在线演示站，可以先体验再决定是否自建（演示站支持填入自己的密钥）；或者从 Releases 页面下载桌面应用，覆盖 Windows、macOS、Linux 三个平台。想从源码跑的话，执行：

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

它能帮你做哪些图

一句话生成云架构图

这是它被用得最多的场景。输入"画一个包含负载均衡、3 台计算实例和数据库的 AWS 高可用架构"，AI 会输出带云服务官方图标的完整布局，节点间的连接关系也是它画好的，不需要你手动对齐：

图里这种"User 经 EC2 访问 S3、Bedrock、DynamoDB"的结构，就是典型的生成结果。如果你只画云架构这一类图，Claude 系列模型是相对稳妥的选择，它见过的 AWS、Azure、GCP 图标素材更多，组件识别更准。

把现有文档和图片变成图表

手头已有材料时，不用从零描述。直接上传 PDF 或文本文件，AI 会提取内容整理成图表；上传一张截图，它也能按原图复现并转成可编辑格式。下面的故障排查流程图就是一句提示生成的：

生成后每个节点都可以继续微调，不会像图片那样只能整体重画。

多轮对话精修图表

第一次生成的结果不满意很正常。你可以在对话框里继续说"把数据库拆成主从两个节点""给这条连接线加上标注"，AI 会在原图基础上修改而不是整图重出。每次修改前都会自动保留一个历史版本，改坏了可以回退；支持推理的模型还会把思考过程展示在界面上，方便你判断它为什么这样布局。

进阶玩法：模型配置与管理后台

接入不同的 AI 引擎

项目在 .env 配置 中内置了 OpenAI、Anthropic、Google、AWS Bedrock、Azure、Ollama、OpenRouter、DeepSeek、豆包等十几种提供商，除少数外都支持自定义端点地址。也就是说，你本地跑 Ollama 的开源模型、或者接公司的中转 API 都能直接用。各家的密钥变量和示例见 AI 提供商配置指南。

官方建议选长文本能力强的模型（如 Claude Sonnet、GPT-5、Gemini Pro 这一档），因为图表 XML 属于长输出且格式严格，弱模型容易画到一半截断。

给团队提供统一模型列表

单人使用时在AI_MODEL里写一个模型 ID 就够了。多人共用同一实例时，管理员可以用AI_MODELS_CONFIG环境变量（JSON 字符串）或ai-models.json文件配置多个模型，用户端即可在下拉框里切换，不必各自准备密钥。

用管理面板代替手改配置

设置ADMIN_PASSWORD环境变量后访问/admin，模型列表、访问密码、配额、功能开关都能在网页上管理，不用每次重启容器改.env。具体字段和优先级规则见 管理面板文档。

还有一条容易被忽略的路径：项目内置了 MCP Server，配置后可以让 Claude Desktop、Cursor、VS Code 等工具里的 AI 直接驱动这套绘图能力，在浏览器中实时出图。

技术栈速览

• 前端与路由：Next.js + React，界面是标准的聊天面板 + 画布布局
• AI 调用：Vercel AI SDK，负责流式输出和多提供商适配
• 图表渲染：react-drawio，图表本体是标准 draw.io XML，AI 的工作就是生成和修改这段 XML

因为产物是 draw.io 原生格式，你随时可以把图导出后用 draw.io 桌面版继续编辑，不存在格式绑定。

现在开始

概括一下：Next AI Draw.io 解决的是"描述需求 → 得到可编辑专业图表"这一段路程，本地部署、多模型接入、历史回退都开箱即用。建议你先跑一次上面的 Docker 命令，用一句简单的流程描述验证环境；确定要长期用之后再按 AI 提供商配置 挑选引擎，遇到部署问题查 FAQ。

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