Next AI Draw.io：用自然语言生成与修改 draw.io 图表的 AI Web 应用
Next AI Draw.io 是一个基于 Next.js 的 Web 应用，把大语言模型能力与 draw.io 图表结合，通过自然语言对话创建、修改和增强图表，支持图片与 PDF/文本转图、动画连接线、版本历史与多模型提供商接入，并可通过 MCP 供 Claude Desktop、Cursor、VS Code 等 AI 客户端调用。
社区作者 · zZz
它解决什么问题
Next AI Draw.io 是一个 Next.js Web 应用，将 AI 能力与 draw.io 图表集成，可通过自然语言命令与 AI 辅助可视化来创建、修改和增强图表（来源：项目主页标题与简介）。演示站由字节跳动豆包赞助，当前使用 glm-4.7 模型（配图 2 为豆包相关素材）；Atlas Cloud 亦为项目赞助方，其 OpenAI 兼容 API 可用一个提供商连接 DeepSeek、Qwen、GLM、Kimi、MiniMax 等模型（配图 3 为 Atlas Cloud 标识）。
页面提供一段演示视频（20251211_drawio.mp4），但来源未给出对应的视频提示词。
核心特性（来源 Features 列表）：LLM 驱动的图表创建，通过自然语言直接创建与操作 draw.io 图表；基于图片的图表复刻，上传已有图表或图片由 AI 自动复刻并增强；PDF 与文本文件上传，抽取内容并据此生成图表；AI 推理过程展示，支持 OpenAI o1/o3、Gemini、Claude 等模型的思考过程查看；图表历史与版本控制，可查看并恢复到 AI 编辑前的版本；交互式聊天界面，实时细化图表；云架构图支持（AWS、GCP、Azure）；动画连接线，可在元素之间创建动态动画连接线。
示例提示词与生成结果（来源 Examples）：配图 4 为“Animated transformer connectors”，提示词为“Give me a animated connector diagram of transformer's architecture.”；配图 5 为“RAG Technique Diagram”，提示词为“Generate a RAG architecture diagram for chat application.
Use connected diagram for data ingestion”；配图 6 为“Authentication using React and AWS”，提示词为“Generate authentication process using React with AWS. Use Serverless architecture.
”；配图 7 为“Open Innovation”，提示词为“Create visualization of Henry Chesbrough's Open Innovation model.”；配图 8 为“Cat sketch”，提示词为“Draw a cute cat for me.”。配图 1 为 Live Demo 入口按钮，配图 9、配图 10 分别为 EdgeOne Pages 与 Vercel 的部署按钮，配图 11 为 Star History 图表。
MCP Server：可通过 MCP（Model Context Protocol）在 Claude Desktop、Cursor、VS Code 等 AI Agent 中使用本项目，官方给出的客户端配置为把 mcpServers 下的 drawio 服务命令设为 npx，参数为 @next-ai-drawio/mcp-server@latest；Claude Code CLI 方式为执行 claude mcp add drawio -- npx @next-ai-drawio/mcp-server@latest，随后可让 Claude 生成图表，例如“Create a flowchart showing user authentication with login, MFA, and session management”，图表会实时出现在浏览器中；VS Code、Cursor 等其他客户端配置见 MCP Server README。
技术实现（How It Works）：Next.js 作为前端框架与路由；Vercel AI SDK（ai + @ai-sdk/*）用于流式 AI 响应与多提供商支持；react-drawio 用于图表的呈现与操作；图表以可在 draw.io 中渲染的 XML 表示，AI 根据命令生成或修改该 XML。（来源正文未标注项目许可证，也未给出模型参数规模与权重文件大小。）
— 本文由 AI 根据公开来源辅助整理，命令、版本与许可证请在使用前到原始页面复核。
安装 / 开始使用
一、准备环境
- 需要可用的 Node.js 与 npm 环境（来源未注明具体最低版本，待核验）。
- 准备至少一个大模型提供商的 API Key（在线演示站也支持自带 API Key，Key 仅存于浏览器本地，不存服务器）。
二、本地源码安装（来源 Installation 章节，按顺序执行）
步骤 1 · 克隆仓库：
git clone https://github.com/DayuanJiang/next-ai-draw-io步骤 2 · 进入目录：
cd next-ai-draw-io步骤 3 · 安装依赖：
npm install步骤 4 · 复制环境变量模板：
cp env.example .env.local- 按官方 Provider Configuration Guide 在 .env.local 中配置所选提供商（除 AWS Bedrock 与 OpenRouter 外，其余提供商均支持自定义 endpoint）。
步骤 6 · 启动开发服务器：
npm run dev- 首次运行验证：浏览器打开 http://localhost:6002 查看应用是否正常。
三、无需安装的试用方式
- 直接访问在线演示站试用。
- 演示站中点击聊天面板的设置图标，配置自己的提供商与 API Key，可绕过使用限制。
- 桌面应用：从 Releases 页面下载对应平台的原生桌面版，支持 Windows、macOS、Linux。
四、容器运行 使用 Docker 运行请参考官方 Docker Guide（来源未在正文给出具体 Docker 命令，待核验）。
五、MCP 集成安装
- 通用 MCP 客户端配置：在配置文件的 mcpServers 下新增 drawio 服务，command 为 npx，args 为 ["@next-ai-drawio/mcp-server@latest"]。
- Claude Code CLI：执行 claude mcp add drawio -- npx @next-ai-drawio/mcp-server@latest，然后让 Claude 生成图表，例如“Create a flowchart showing user authentication with login, MFA, and session management”，图表会实时显示在浏览器中。
- VS Code、Cursor 等其他客户端配置见 MCP Server README。
六、部署
- 部署到 EdgeOne Pages（腾讯）：使用页面提供的一键部署按钮，参考腾讯 EdgeOne Pages 文档；通过 EdgeOne Pages 部署还可获得 DeepSeek 模型的每日免费额度。
- 部署到 Vercel：需在 Vercel 控制台中设置与本地 .env.local 相同的环境变量，更多细节见 Next.js 部署文档。
- 部署到 Cloudflare Workers：见官方 Cloudflare Deploy Guide（正文未给出具体命令）。
七、服务端与管理员配置
- 服务端多模型：管理员可通过 AI_MODELS_CONFIG 环境变量（JSON 字符串）或 ai-models.json 文件配置对所有用户可用的多个服务端模型；单提供商快速配置可在 AI_MODEL 中以逗号分隔列出模型 ID。
- 管理面板：设置 ADMIN_PASSWORD 环境变量后访问 /admin，可在网页面板中管理模型、访问码、功能开关、可观测性与配额，无需手工编辑 .env，详细说明见 Admin Panel Guide。
八、常见问题与注意事项
- 模型能力要求较高：该任务需要生成带严格格式约束（draw.io XML）的长文本，推荐 Claude Sonnet 4.5、GPT-5.1、Gemini 3 Pro、DeepSeek V3.2/R1。
- cloud 架构图建议使用 claude 系列，因为其训练过带 AWS、Azure、GCP 等云架构 logo 的 draw.io 图表。
- 更多常见问题见项目 FAQ 页面。
- 许可证信息在来源正文中未标明，使用前请到仓库核验。
