企业官网建设流程全解析

一句话变成 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 让 AI 画图接管这件事：你用自然语言描述需求，它直接生成 draw.io 图表。

三分钟把服务跑起来

有 Docker 的话，一条命令就能部署：

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 就 clone 仓库（https://gitcode.com/GitHub_Trending/ne/next-ai-draw-io）后npm install，再按 docs/cn/docker.md 配好本地环境跑起来，同样能三分钟见到图表。

装好了，来试试它能画什么——

它到底能帮你画什么

先说云架构。把需求写进对话框，比如"用户经过 CDN 和 Node.js 网关访问服务，PostgreSQL 存业务数据，Redis 做缓存"，几秒钟后画布上就出现一张节点、连线、AWS 图例都对得上的 draw.io 架构图：

不满意就接着说："把网关挪到左边、加一条监控线"，它改，不用你自己找节点。

故障排查流程图是同一个玩法。输入一句"灯不亮的排查流程"，出来的就是一棵带判断分支的决策树——灯泡烧没烧、插头插没插，每个分支和动作节点都排好了，直接能贴进故障复盘文档。

处理长内容时它还有第三招。上传一份 PDF 或一张截图，AI 把里面的关键内容提取出来再转成图表，省掉你手动搬运文字、逐个补节点的环节。

画得爽了，接下来接上你自己的大模型。

接上你自己的大模型

项目支持 AWS Bedrock、OpenAI、Claude、Gemini、DeepSeek、Azure OpenAI、Ollama、SiliconFlow 一批提供商。配置就改 env.example 里这几行，存成.env：

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

不想改文件，也可以在docker run里用-e传同样的参数。本地机器用 Ollama 跑开源模型接入也很顺。各家提供商的完整参数和自定义端点，看 docs/ai-providers.md，配好密钥后界面里随时切换模型。

本地顺了，该往生产环境搬了。

往生产环境搬

离线部署自建 draw.io

办公网访问不了embed.diagrams.net时，用 Docker Compose 起一个自建的 draw.io，再把NEXT_PUBLIC_DRAWIO_BASE_URL指过去，浏览器就能正常加载画布。完整步骤在 docs/cn/offline-deployment.md。

设置访问密码保护

多人共用时给部署加访问密码，防止 API 令牌被陌生人刷爆：

ACCESS_CODE_LIST=your_password_1,your_password_2

密钥与静态资源

API 密钥一律走环境变量或.env传递，别写进代码库，泄露了就立刻轮换。访问量大时把前端静态资源挂到 CDN，服务器压力小很多。

搬上去之后，几个容易忽略的细节顺嘴提醒一下。

几个容易忽略的细节

1. 模型选择比提示词更关键：Claude Sonnet 4.5、GPT-4o 这类强模型生成大图表更稳，出现 XML 截断、连线错乱，先换模型再回头怀疑提示词。
2. 内置的版本历史别省着用，图表改坏了直接回退，比手动还原快得多。
3. 多人共享的部署把静态资源走 CDN，加载明显更快。
4. API key 放环境变量里，定期轮换，这是唯一能救你令牌账单的习惯。

手拖半小时节点的活儿，不用再干了。打开终端，敲上面那条 docker 命令，接上你自己的大模型，第一张 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