企业官网建设流程全解析

如何用大白话画出专业图表？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 是一个基于 Next.js 的开源 Web 应用，把 AI 和 draw.io 编辑器放在一起：你在右侧对话框里描述想要的图，左侧的编辑器会实时渲染出对应的流程图、架构图或思维导图。画完可以导出 .drawio、.svg、.png 格式，直接用于文档和汇报。它支持的输入不只是文字——图片和 PDF 也能传进去，让 AI 照着"描"出一张图。

它替你解决什么问题

传统绘图工具里，画一张架构图意味着找模板、拖方框、拉连线、对齐、再对齐。next-ai-draw-io 把这件事变成对话：

• 你只描述组件和连接关系，AI 生成的是合法的 draw.io XML，编辑器立刻渲染，而不是给你一段需要自己拼的代码
• 上传一张现有图表的截图或一份 PDF 文档，AI 可以识别其中的形状和线条，还原成可编辑的图表，适合"照着改"的场景
• 每次 AI 动手之前，系统自动保存一份快照，不满意就回滚，试错没有心理负担
• 支持的模型会展示推理过程，你能看到它为什么这样布局，改错方向时也好纠正

从一句话到一张图：它是怎么工作的

技术栈是 Next.js 16 + React 19，AI 调用走 Vercel AI SDK，渲染用 react-drawio。核心请求处理在 app/api/chat/route.ts，控制输出行为的提示词模板在 lib/system-prompts.ts，想看 AI 到底被要求了什么，读这个文件比看文档更快。

值得注意的是 AI 生成图表的三种方式。新建整张图时它调用 display_diagram 一次性输出；做局部修改（换个标签、加个节点）时用 edit_diagram 做搜索替换式的编辑，开销更小；如果 XML 太长被截断，再用 append_diagram 把没写完的部分补上。也就是说，"重画"和"微调"是两条不同的路径，这也是为什么"改一小块"通常比"重新生成整张图"更稳。

三种方式跑起来

在线体验是最短路径：打开官方演示站点即可使用，有使用次数限制；自带 API 密钥的话，在聊天面板的设置里填进去，限制就不再卡你。密钥只存在浏览器本地，不会上传到服务器。

本地运行适合想改代码或固定用某家模型的人，两步命令：

git clone https://gitcode.com/GitHub_Trending/ne/next-ai-draw-io cd next-ai-draw-io && npm install

然后把项目根目录的 env.example 复制为 .env.local，填上所选提供商的密钥（各家的变量名和填写方法见 docs/cn/ai-providers.md），再执行 npm run dev，浏览器打开 localhost:6002 就能用。

桌面端和容器：项目提供了 Electron 桌面应用，支持 Windows、macOS、Linux，离线场景更顺手；也提供 Docker 部署方式，docs/cn/docker.md 有完整说明。

让输出更准的几个写法

按组件逐项描述，而不是一句带过。"画个系统架构图"能得到的结果完全看运气。换成"创建一张 AWS 云架构图：EC2 承载 Web 服务，API Gateway 作为对外入口，静态文件放 S3，数据库用 DynamoDB"，AI 基本不用猜。组件、角色、连线方向三样写清楚，效果立竿见影。

画云厂商图时明确要它用图标库。项目内置了 aws4、azure2、gcp2、kubernetes、flowchart、bpmn 等几十个图标库，完整清单在 docs/shape-libraries/。AI 在画带图标的图之前会先通过 get_shape_library 工具查询语法，而不是凭记忆写，所以你只需要说"用 AWS 官方图标"，不必关心具体写法。

大图表分轮次搭。一次让 AI 画完整张复杂系统图，布局容易乱。更稳的节奏是三轮：先要主组件和整体布局，确认方向对了再加连接线，最后补标签和样式。每一步都是对话，随时可以纠正上一轮。

画错了直接回滚，不用重画。聊天输入框左下角的时钟图标打开的是历史面板，每次 AI 编辑前的版本都自动存着，点一下就能恢复到任意一版。

主动约束布局。系统提示词要求整张图收在单页画布内（约 800×600 的坐标范围，容器最大宽 700、高 550），防止分页线切断图形。如果你的图元素多、排不下，直接在描述里写"用垂直堆叠布局"或"网格排列"，AI 会照此排布。

上传参考图来"描"图。需要把现有文档里的图标准化时，直接传截图。AI 会识别形状是圆角还是直角、线条是直线还是曲线，尽量贴近原样重建，再按你的要求调整。

按任务挑模型。图表生成要求模型稳定输出长格式 XML，对能力要求不低。官方推荐 Claude Sonnet 4.5、GPT-5.1、Gemini 3 Pro、DeepSeek V3.2/R1 这一档；其中 Claude 系列因为训练时见过大量带云厂商图标的 draw.io 图，画 AWS、Azure、GCP 架构图时最稳。支持的提供商包括豆包、OpenAI、Anthropic、Google、Azure、DeepSeek、Ollama、OpenRouter 等十几种，配置方法都在 docs/cn/ai-providers.md。

走出网页：MCP、服务端配置与配额

把画图能力接进代码编辑器。项目在 packages/mcp-server/ 下提供了一个 MCP 服务器（npm 包名为 @next-ai-drawio/mcp-server）。在 Claude Desktop、Cursor 或 VS Code 的 MCP 配置里指向这个包之后，你在编辑器里用自然语言描述图表，AI 就会实时把图画出来。写技术文档时边写边配图，不必切到浏览器。

给团队统一部署模型。管理员可以用 AI_MODELS_CONFIG 环境变量或 ai-models.json 文件配置多个服务端模型，所有用户共享，不用每人手里攥一份密钥。

用管理面板替代改配置。设置 ADMIN_PASSWORD 环境变量后访问 /admin，模型、访问码、功能开关、配额、可观测性都在网页上调，保存即生效，详见 docs/cn/admin-panel.md。

公共部署时管住用量。内置基于用户 ID 的动态配额，按人头限制请求次数，防止共享实例被刷。

适合哪些活

• 技术文档：系统架构、部署流程、API 时序，风格统一还能反复改
• 教学演示：把一段文字材料直接变成讲解用的流程图
• 产品与项目：用户路径、信息架构、排期流程，先出草图再讨论
• 图表翻新：老文档里的图无法编辑？传截图重建，输出的是可编辑格式

如果你打算在这个项目上做二次开发，tests/ 目录下的单元测试和 E2E 用例可以直接当行为参照。

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