企业官网建设流程全解析

一句话生成 draw.io 图表：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

Next AI Draw.io 是一个用自然语言生成和修改 draw.io 图表的工具：你在对话框里说"画一个灯不亮的故障排查流程图"，几秒钟后画布上就出现一张带判断节点、分支和颜色区分的完整流程图。它把 AI 的理解能力和 draw.io 的专业绘图能力接在了一起——你负责说需求，它负责出图、改图、留版本。

上图就是一句提示词换来的成果：用户请求进入 AWS，由 EC2 实例分发到 S3、Bedrock 和 DynamoDB，组件用的是 draw.io 官方图标库，连线自动对齐。这类云架构图（AWS、Azure、GCP）是它最强的场景，因为 docs/shape-libraries/ 里内置了上千个 AWS、GCP、Azure 图标和 BPMN、流程图、网络拓扑等形状库，AI 生成的 XML 会直接引用这些标准图形，而不是画一堆方框了事。

先看图说话：它能替你干哪些活

拿上面这张"灯坏了"的排查流程图走一遍典型的三段式体验：

• 你说："创建一个灯不亮的故障排查流程图。"
• 它做：理解"先查插头、再查灯泡、最后报修"的逻辑顺序，输出 draw.io 的 XML。
• 结果：判断框、动作框、是/否分支一次到位，配色也分好了类。

在这之外，日常里比较省时间的还有几个动作：

• 局部改图：说"把数据库从 MySQL 换成 PostgreSQL"，它只改对应那个图标和旁边的注释，其余连线和布局不动，不会整张图重画。
• 拿图片复刻：上传一张现成的流程图照片或截图，它把里面的元素重新画成可编辑的 draw.io 图，方便你继续改。
• 从文档出图：直接上传 PDF 或文本文件，让它把里面的内容整理成一张架构图或流程图。
• 回滚：每一次 AI 编辑都会留版本记录，改坏了可以从历史里找回上一个版本。

三分钟跑起来：Docker 或本地源码两条路

上手成本不高。最省事的是 Docker 一条命令，配上你的 API Key 就能用：

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即可。完整的镜像参数和环境变量说明在 docs/cn/docker.md。

如果你想在源码上开发或改配置，走这条路：

git clone https://gitcode.com/GitHub_Trending/ne/next-ai-draw-io cd next-ai-draw-io && cp env.example .env.local npm install && npm run dev

填好.env.local里的密钥后，开发服务跑在http://localhost:6002。密钥怎么填、各家提供商的模型名写什么，docs/cn/ai-providers.md 里有逐家的说明。

另外两种部署方式也备着：docs/cn/offline-deployment.md 讲了怎么把 draw.io 渲染端也拉进本地、实现完全离线；项目里还有electron/目录的桌面版（Windows/macOS/Linux），适合网络受限或不想开浏览器的场景。

改图时它还记得什么：原理拆开看

它的底层逻辑可以用一句话概括：把图表表示成文本，让 AI 像改文档一样改它。

draw.io 的图本质上就是一段 XML——每个框、每根连线、每处文字都在里面。所以你输入的那句话，先被翻译成对这段 XML 的操作指令，再由 react-drawio 渲染回画布。这个"文本中转"的好处是：

• 改动是局部的。AI 拿到的是整张图的 XML 上下文，改一个节点时它看得到所有引用关系，所以换数据库图标时能同步调整连线和标注。
• 每一步可回退。历史版本记的是每一轮 AI 编辑前后的完整状态，不是截图，回滚后图还是可编辑的。
• 出图有质检。渲染完成后，系统会再让一个视觉模型检查成图：有没有元素互相压住、连线穿框、文字被截断（检查逻辑见 lib/validation-prompts.ts），发现问题会提示你继续修。

至于它"怎么想"的，支持的推理模型（Claude、Gemini、OpenAI o 系列等）会把思考过程直接显示在聊天面板里，你可以看到它是在先规划布局还是先抠某个图标名。

换模型不用改代码：多提供商怎么配

它不绑死任何一家 AI，内置了十几家提供商：AWS Bedrock、OpenAI、Anthropic、Google Gemini、Azure OpenAI、豆包、DeepSeek、OpenRouter，以及可以跑在你自己机器上的 Ollama。切换就是在.env里改三行：

AI_PROVIDER=openai AI_MODEL=gpt-4o OPENAI_API_KEY=sk-...

这里有个实用建议：画 draw.io 图表要模型稳定输出长篇幅、格式严格的 XML，官方推荐的能力较强的模型（如 Claude Sonnet 4.5、Gemini Pro、DeepSeek V3/R1 一档），其中 Claude 系列因为训练时见过大量带云厂商图标的 draw.io 图，画 AWS/Azure/GCP 架构图效果最好。

多人共用的话，管理员设好ADMIN_PASSWORD后访问/admin，可以在网页上给所有用户配置服务端模型、访问码和配额，用户就不需要各自带 Key 了，详见 docs/cn/admin-panel.md。还有一路"不装这个 Web 应用"的玩法：项目自带 MCP Server，在 Claude Desktop、Cursor 里加一段配置，就能直接让 AI 助手替你画 draw.io 图。

适合谁用，以及它的边界

它最适合这三类人：经常要在文档或汇报里画架构图的工程师、需要把口述流程固化成图的 PM、以及手里有一堆截图想转成可编辑图的人。

几个已知的限制要心里有数：生成质量取决于你配的模型，小模型画复杂图容易乱；它默认调用在线渲染服务，完全离线需要按 docs/cn/offline-deployment.md 额外搭一份本地 draw.io；它负责"从 0 到 1"和"粗调"，最后几像素的精确对齐还是得自己拖一下。下一步可以从 Docker 跑一个最简单的流程图玩起，熟悉了再换上更强的模型去啃云架构图。

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