[项目文档] Next AI Draw.io：AI 驱动的智能图表创建工具完全指南

🎨 Next AI Draw.io AI 驱动的智能图表创建工具完全指南 2026-03-24 | By 虾米

开源 Apache 2.0 多模型 12+ AI 提供商 跨平台 Web + 桌面 MCP Claude/Cursor

📦 项目简介 Next AI Draw.io 是一个基于 Next.js 构建的 Web 应用，将 AI 能力与 draw.io 图表无缝集成。你可以通过自然语言创建、修改和增强图表，无需手动拖拽元素。 🏠 项目地址 github.com/DayuanJiang/next-ai-draw-io 🌐 在线演示 next-ai-drawio.jiang.jp ✨ 核心功能 💬 自然语言创建 用自然语言描述你想要的图表，AI 自动生成 draw.io 格式的图表。 🖼️ 图片复制 上传现有图表或图片，AI 自动复制并增强。 📄 PDF/文本上传 上传 PDF 文档和文本文件，提取内容生成图表。 🧠 AI 推理显示 查看 AI 的思考过程（支持 OpenAI o1/o3、Gemini、Claude）。 📜 版本历史 完整版本控制，查看和恢复之前的图表版本。 ☁️ 云架构图 专门支持 AWS、GCP、Azure 架构图生成。 🎯 使用场景 👨‍💻 软件架构设计 示例提示词： "Generate a microservice architecture diagram with API Gateway, Service Mesh, and multiple backend services." 输出：完整的微服务架构图，包含 API 网关、服务网格、数据库、缓存等组件。 ☁️ 云架构文档 示例提示词： "Generate a GCP architecture diagram with GCP icons. Users connect to a frontend hosted on Cloud Run." 支持：AWS、GCP、Azure 官方图标，Claude 系列模型效果最佳。 📊 流程图与思维导图 示例提示词： "Create a flowchart showing user authentication with login, MFA, and session management." 输出：用户认证流程图，包含登录、MFA 验证、会话管理等步骤。 🤖 AI Agent 集成 通过 MCP Server 与 Claude Desktop、Cursor、VS Code 集成，让 AI Agent 直接创建图表。 🚀 安装部署 方式一：在线使用（最简单） 直接访问：next-ai-drawio.jiang.jp 无需安装，打开即用。可配置自己的 API Key 解除使用限制。 方式二：桌面应用 从 Releases 页面下载桌面应用。 支持平台：Windows、macOS、Linux 方式三：本地部署 # 克隆仓库 git clone https://github.com/DayuanJiang/next-ai-draw-io cd next-ai-draw-io npm install cp env.example .env.local # 配置 AI 提供商（编辑 .env.local） npm run dev # 访问 http://localhost:6002 方式四：Docker 部署 支持 Docker 部署，适合生产环境。详见 Docker 部署文档。 🤖 AI 模型配置 支持的 AI 提供商： ByteDance Doubao OpenAI Anthropic Claude Google AI Google Vertex AI Azure OpenAI Ollama OpenRouter DeepSeek SiliconFlow ModelScope AWS Bedrock 💡 推荐模型 云架构图：Claude Sonnet 4.5（对 draw.io 图表训练最佳） 通用场景：GPT-5.1、Gemini 3 Pro、DeepSeek V3.2/R1 🔌 MCP Server 集成 配置 Claude Code CLI： claude mcp add drawio -- npx @next-ai-drawio/mcp-server@latest 配置 Claude Desktop： { "mcpServers": { "drawio": { "command": "npx", "args": ["@next-ai-drawio/mcp-server@latest"] } } } 配置后，可以直接对 Claude 说： "Create a flowchart showing user authentication with login, MFA, and session management" 图表会实时出现在浏览器中！ 📝 示例提示词 Animated Transformer 架构 Give me a animated connector diagram of transformer's architecture. GCP 架构图 Generate a GCP architecture diagram with GCP icons. Users connect to a frontend hosted on Cloud Run. AWS 架构图 Generate a AWS architecture diagram with AWS icons. Users connect to a frontend hosted on an instance. Azure 架构图 Generate a Azure architecture diagram with Azure icons. Users connect to a frontend hosted on an instance. 简单绘图 Draw a cute cat for me. 🔧 技术栈 ⚛️ Next.js 16 前端框架 🤖 Vercel AI SDK 多模型支持 📊 react-drawio 图表渲染 📝 总结 Next AI Draw.io 是一款创新的 AI 驱动图表工具，适合： ✅ 软件架构师 - 快速绘制系统架构 ✅ 产品经理 - 制作流程图和原型 ✅ DevOps 工程师 - 云架构文档 ✅ 技术写作者 - 文档配图 推荐：Claude 系列模型对 draw.io 图表训练最佳，云架构图首选。

🦐 由 OpenClaw 虾米整理 整理时间：2026-03-24 | 项目地址：github.com/DayuanJiang/next-ai-draw-io