企业官网建设流程全解析

如何用自然语言画专业架构图：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

凌晨两点，评审在明早，你打开 draw.io 却连一个负载均衡器图标都找不到——这种机械活可以交给 AI 绘图工具：Next AI Draw.io 是一个基于 Next.js 的 draw.io AI 应用，说一句"画个三层架构图"，它直接生成可继续修改的架构图。

它到底能干什么？三个场景

从空白画布建新图。平时你要手动折腾半小时的事：

你：帮我画个三层云架构：负载均衡器、两台应用服务器、一个 RDS 数据库，用 AWS 官方图标 AI：先调 get_shape_library 查 aws4 图标库，再用 display_diagram 输出完整图

几秒钟后画布上出现一张 AI 生成架构图：AWS 2025 官方风格图标、对齐的连接线，不用自己翻图标库。

对已有图做局部修改。传统工具的痛点是改一个节点要手动挪连接线和注释，这里你只要说：

你：把数据库换成 MySQL，再在应用服务器前面加一层 Redis 缓存 AI：用 edit_diagram 输出三个操作：更新数据库单元格、新增 Redis 单元格、补两条连接线

这是上下文感知修改：AI 每次动手前都把当前画布 XML 当作唯一事实来源，你手动挪过元素它照样认得当前状态。

同一套对话切换图表类型。用自然语言画流程图，不用重新学工具：

你：画一个"灯不亮"的故障排查流程图，要包含检查步骤和结束条件 AI：生成带判断菱形、操作矩形和终止节点的完整流程图

拆开来看：从一句话到一张图的内部流水线

第一步：统一模型接口。lib/ai-providers.ts里的getAIModel()把 20 多家提供商（Bedrock、OpenAI、Claude、Gemini、Ollama、DeepSeek 等）收敛成同一个模型接口，并按环境变量里的密钥自动探测可用提供商；配了自定义 baseUrl 却不带 API key 会直接拒绝，防 SSRF。这样设计的理由：一套代码同时覆盖云端大模型和本地模型。

第二步：流式对话与工具调用。app/api/chat/route.ts用 Vercel AI SDK 的streamText流式处理响应，核心是四个工具定义：

tools: { display_diagram: { ... }, // 整图重画（只传 mxCell XML） edit_diagram: { ... }, // 按 cell id 局部改：update/add/delete append_diagram: { ... }, // 大图被截断时续画 get_shape_library: { ... }, // 查 aws4、flowchart 等 30 个图标库文档 }

每次请求前，它把当前图表 XML 连同"SINGLE SOURCE OF TRUTH"标注塞进系统消息，并给指令段和 XML 段各设 prompt cache 断点省 token；模型输出被 token 上限截断、JSON 只生成一半时，jsonrepair会自动修好工具调用，图不会画到一半就断。系统提示词按模型特性在lib/system-prompts.ts里分别定制。

第三步：XML 落画布。contexts/diagram-context.tsx通过 react-drawio 嵌入 draw.io，拿到工具结果后做 XML 校验与修复，每次生成后记录历史，可以回滚到任意一版。中间产物是标准 draw.io XML，所以导出 .drawio、PNG、SVG 都无缝，不锁死。electron/ 目录 把整条流水线打包成了桌面应用。

三分钟跑起来：部署步骤

git clone https://gitcode.com/GitHub_Trending/ne/next-ai-draw-io cd next-ai-draw-io cp env.example .env # 至少配置一个提供商的 API key docker-compose up -d

三个常见坑：

• .env里没配任何提供商 key，第一次发消息会报 "No AI provider configured"；配了多个 key 时还要用AI_PROVIDER显式指定
• docker-compose 会同时拉起应用和自托管 draw.io 服务，分别占 3000、8080 端口，冲突就改 ports 映射
• 纯本地开发可以npm install后npm run dev（端口 6002），但需要能访问在线的 draw.io 嵌入服务

验证成功的标志：访问 http://localhost:3000，左侧是对话面板、右侧是 draw.io 画布，说一句"画一个用户登录流程的简单流程图"，流程图出现在画布上即跑通。

和"手动画图"或"其他AI绘图工具"比，它赢在哪

上下文感知修改，而不是"重画一遍"。多数 AI 绘图工具把图当黑盒：你让它改，它整张重生成，手动调好的布局全作废。Next AI Draw.io 按 cell id 定位修改，你手动挪过节点、删过连线都不影响它理解当前状态，改完的图还是你的图。

多提供商切换，自带 key。20 多家提供商在lib/ai-providers.ts里统一收敛，设置面板可以直接填自己的 API key，只存浏览器、不上服务器；同一句画图需求可以在 Claude、Gemini、DeepSeek 之间横向对比效果，限流了就一键换家。

离线桌面版。敏感架构不敢上云？electron/桌面应用覆盖 Windows、macOS、Linux，配合 Ollama 本地模型，全程离线也能画。

适合谁用？一张表说清

这些角色的共同点只有一个：不想花时间学绘图工具，只想让想法直接变成图。

所以下次评审在早上九点，你只需要在对话框里说一句"帮我画个XX"，剩下的交给它。

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