Next AI Draw.io由 AI 驱动的图表创建工具 - 聊天、绘图、可视化English | 中文 | 日本語Next AI Draw.io 是一款集成了 AI 能力与 draw.io 图表的 Next.js Web 应用程序。用户能通过自然语言命令创建、修改和优化图表还可借助 AI 辅助实现可视化。注意感谢字节跳动豆包的赞助演示站点目前使用强大的 glm - 4.7 模型[20251211_drawio.mp4](20251211_drawio.mp4)目录- Next AI Draw.io 目录- 示例- 特性- MCP 服务器- Claude 代码 CLI- 快速开始- 在线试用- 桌面应用程序- 使用 Docker 运行- 安装部署- 部署到 EdgeOne Pages- 部署到 Vercel- 部署到 Cloudflare Workers- 多供应商支持- 服务器端多模型配置- 管理面板- 工作原理- 支持与联系- 常见问题解答- Star 历史示例下面是一些示例提示及其生成的图表- “动画变压器连接器”提示“给我一个变压器架构的**动画连接器**图表”。- “RAG 技术图表”提示“为**聊天应用程序**生成一个 RAG 架构图”。- “使用 React 和 AWS 进行身份验证”提示“使用 React 和**AWS**生成身份验证流程采用无服务器架构”。- “开放式创新”提示“创建亨利·切萨布鲁夫Henry Chesbrough开放式创新模型的可视化图表”。- “猫咪草图”提示“为我画一只可爱的猫”。特性- 大语言模型驱动的图表创建借助大语言模型LLM直接用自然语言命令创建和操作 draw.io 图表。- 基于图像的图表复制上传现有的图表或图像AI 会自动复制并优化它们。- PDF 和文本文件上传上传 PDF 文档和文本文件提取内容并根据现有文档生成图表。- AI 推理展示对于支持的模型如 OpenAI o1/o3、Gemini、Claude 等能查看 AI 的思考过程。- 图表历史记录有全面的版本控制可跟踪所有更改能查看和恢复 AI 编辑前的图表旧版本。- 交互式聊天界面可与 AI 实时交流完善图表。- 云架构图支持专门支持生成云架构图如 AWS、GCP、Azure。- 动画连接器能在图表元素之间创建动态的动画连接器实现更好的可视化效果。MCP 服务器通过 MCP模型上下文协议可将 Next AI Draw.io 与 Claude Desktop、Cursor 和 VS Code 等 AI 代理结合使用。{mcpServers: {drawio: {command: npx,args: [next - ai - drawio/mcp - serverlatest]}}}Claude 代码 CLIclaude mcp add drawio -- npx next - ai - drawio/mcp - serverlatest之后让 Claude 创建图表比如“创建一个展示用户登录、多因素认证MFA和会话管理的流程图”图表会实时显示在浏览器中有关 VS Code、Cursor 和其他客户端配置可参阅 MCP 服务器的 README。快速开始- 在线试用不用安装可直接在演示站点试用该应用程序。能使用自己的 API 密钥绕过演示站点的使用限制点击聊天面板中的设置图标配置供应商和 API 密钥。密钥将本地存储在浏览器中不会存储在服务器上。- 桌面应用程序可从发布页面下载适用于自己平台的原生桌面应用程序支持的平台有 Windows、macOS 和 Linux。- 使用 Docker 运行请参考 Docker 指南。1. 克隆仓库git clone https://github.com/DayuanJiang/next - ai - draw - iocd next - ai - draw - ionpm installcp env.example .env.local请参阅供应商配置指南了解每个供应商的详细设置说明。2. 运行开发服务器npm run dev在浏览器中打开 http://localhost:6002 查看应用程序。部署- 部署到 EdgeOne Pages可以使用腾讯 EdgeOne Pages 一键部署。点击此按钮进行部署更多详细信息可查看腾讯 EdgeOne Pages 文档。此外通过腾讯 EdgeOne Pages 部署还将获得 DeepSeek 模型的每日免费配额。- 部署到 Vercel最简单的部署方式是使用 VercelNext.js 的创建者。要确保在 Vercel 控制台中设置环境变量就像在本地 .env.local 文件中设置的那样。更多详细信息请参阅 Next.js 部署文档。- 部署到 Cloudflare Workers请参考 Cloudflare 部署指南。多供应商支持支持的供应商有字节跳动豆包、AWS Bedrock默认、OpenAI、Anthropic、Google AI、Google Vertex AI、Azure OpenAI、Ollama、OpenRouter、AIHubMix、DeepSeek、SiliconFlow、ModelScope、SGLang、Vercel AI Gateway。除了 AWS Bedrock 和 OpenRouter 外所有供应商都支持自定义端点。[详细的供应商配置指南](链接) - 查看每个供应商的设置说明。服务器端多模型配置管理员可配置多个服务器端模型所有用户无需个人 API 密钥即可使用。可通过 AI_MODELS_CONFIG 环境变量JSON 字符串或 ai - models.json 文件进行配置。对于单供应商快速设置在 AI_MODEL 中列出用逗号分隔的模型 ID。管理面板设置 ADMIN_PASSWORD 环境变量访问 /admin 就能通过 Web 面板管理服务器设置模型、访问代码、功能、可观测性、配额而不用手动编辑 .env 文件。[管理面板指南](链接) - 设置、优先级规则和注意事项。模型要求此任务需要模型具备强大的能力能够生成具有严格格式约束draw.io XML的长文本。推荐的模型有 Claude Sonnet 4.5、GPT - 5.1、Gemini 3 Pro 和 DeepSeek V3.2/R1。要注意Claude 系列已经在包含 AWS、Azure、GCP 等云架构图标的 draw.io 图表上进行了训练所以若想创建云架构图它是最佳选择。工作原理该应用程序使用了以下技术- Next.js用于前端框架和路由。- Vercel AI SDKai ai - sdk/*用于流式传输 AI 响应和多供应商支持。- react - drawio用于图表的表示和操作。图表以 XML 格式表示可在 draw.io 中渲染。AI 处理命令并相应地生成或修改此 XML。支持与联系特别感谢字节跳动豆包赞助演示站点的 API 令牌使用在 ARK 平台注册所有模型可获得 500K 免费令牌若觉得这个项目有用请考虑赞助以帮助托管实时演示站点如需支持或咨询请在 GitHub 仓库中创建问题或通过以下方式联系维护者邮箱me[at]jiang.jp常见问题解答查看常见问题解答了解常见问题和解决方案。Star 历史