Next AI Draw.io

一个将AI能力与draw.io图表集成的Next.js Web应用。通过自然语言指令和AI辅助可视化，创建、修改和增强图表。

注意：感谢 字节跳动豆包 的赞助，演示站点现在使用强大的glm-4.7模型！

https://github.com/user-attachments/assets/9d60a3e8-4a1c-4b5e-acbb-26af2d3eabd1

目录

• Next AI Draw.io
  • 目录
  • 示例
  • 特性
  • MCP服务器
    • Claude Code CLI
  • 开始使用
    • 在线试用
    • 桌面应用
    • 使用 Docker 运行
    • 安装
  • 部署
    • 部署到 EdgeOne Pages
    • 在 Vercel 上部署
    • 在 Cloudflare Workers 上部署
  • 多提供商支持
  • 工作原理
  • 支持与联系
  • 常见问题
  • 星标历史

示例

以下是一些示例提示及其生成的图表：

特性

• 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-server@latest"]
    }
  }
}

Claude Code CLI

claude mcp add drawio -- npx @next-ai-drawio/mcp-server@latest

然后您可以要求 Claude 创建图表：

“创建一个展示用户认证流程的流程图，包括登录、MFA 和会话管理。”

图表会实时出现在您的浏览器中！

有关 VS Code、Cursor 等客户端配置，请参阅 MCP 服务器 README。

开始使用

在线试用

无需安装！直接在我们的演示网站上试用该应用：

自备 API 密钥：您可以使用自己的 API 密钥来绕过演示站点的使用限制。点击聊天面板中的设置图标，即可配置您的提供商和 API 密钥。您的密钥仅存储在本地浏览器中，绝不会存储在服务器上。

桌面应用

从 发布页面 下载适用于您平台的原生桌面应用：

支持的平台：Windows、macOS、Linux。

使用 Docker 运行

前往 Docker 指南

安装

1. 克隆仓库：

git clone https://github.com/DayuanJiang/next-ai-draw-io
cd next-ai-draw-io
npm install
cp env.example .env.local

有关每个提供商的详细设置说明，请参阅 提供商配置指南。

2. 运行开发服务器：

npm run dev

3. 在浏览器中打开 http://localhost:6002 即可看到应用程序。

部署

部署到 EdgeOne Pages

您可以使用 腾讯 EdgeOne Pages 一键部署。

通过此按钮进行部署：

更多详情请参阅 腾讯 EdgeOne Pages 文档。

此外，通过腾讯 EdgeOne Pages 部署还将为您提供 DeepSeek 模型的每日免费配额。

在 Vercel 上部署

最简单的部署方式是使用 Next.js 的创建者 Vercel。请务必在 Vercel 控制台中像在本地 .env.local 文件中一样 设置环境变量。

更多详情请参阅 Next.js 部署文档。

在 Cloudflare Workers 上部署

前往 Cloudflare 部署指南

多提供商支持

• 字节跳动 DouBao (Doubao)
• AWS Bedrock（默认）
• OpenAI
• Anthropic
• Google AI
• Google Vertex AI
• Azure OpenAI
• Ollama
• OpenRouter
• DeepSeek
• SiliconFlow
• ModelScope
• SGLang
• Vercel AI Gateway

除 AWS Bedrock 和 OpenRouter 外，所有提供商均支持自定义端点。

📖 详细提供商配置指南 - 查看各提供商的设置说明。

服务器端多模型配置

管理员可以配置多个对所有用户可用的服务器端模型，而无需个人 API 密钥。可通过 AI_MODELS_CONFIG 环境变量（JSON 字符串）或 ai-models.json 文件进行配置。

模型要求：此任务需要强大的模型能力，以生成具有严格格式约束（draw.io XML）的长文本。推荐的模型包括 Claude Sonnet 4.5、GPT-5.1、Gemini 3 Pro 以及 DeepSeek V3.2/R1。

请注意，claude 系列模型曾接受过 draw.io 图表训练，其中包括 AWS、Azure、GCP 等云架构标志。因此，如果您希望创建云架构图，这是最佳选择。

工作原理

该应用使用以下技术：

• Next.js：用于前端框架和路由
• Vercel AI SDK (ai + @ai-sdk/*)：用于流式传输 AI 响应及多提供商支持
• react-drawio：用于图表的表示与操作

图表以可在 draw.io 中渲染的 XML 格式表示。AI 会处理您的指令，并相应地生成或修改此 XML。

支持与联系

特别感谢 字节跳动 DouBao 对演示站点 API Token 使用的赞助！ 在 ARK 平台上注册即可获得所有模型的 50 万次免费调用额度！

如果您觉得这个项目很有用，请考虑 赞助，以帮助我托管实时演示站点！

如需支持或咨询，请在 GitHub 仓库中提交问题，或联系维护者：

• 邮箱：me[at]jiang.jp

常见问题解答

常见问题及解决方案请参阅 FAQ。

星标历史

---

Next AI Draw.io 快速上手指南

Next AI Draw.io 是一款基于 Next.js 的开源工具，支持通过自然语言对话创建、修改和增强 draw.io 流程图。它集成了多种大模型（如 Doubao、Claude、GPT 等），可将文本描述直接转换为专业的架构图或示意图。

环境准备

在开始之前，请确保您的开发环境满足以下要求：

• 操作系统：Windows, macOS, 或 Linux
• Node.js：建议安装 LTS 版本 (推荐 v18.x 或更高)
• 包管理器：npm 或 pnpm
• API Key：准备一个大模型服务商的 API Key（项目默认支持字节跳动豆包、AWS Bedrock、OpenAI、DeepSeek 等）。
  • 国内开发者推荐：可使用 字节跳动豆包 (Doubao) 或 DeepSeek，注册即可获得免费额度。

安装步骤

1. 克隆项目

打开终端，执行以下命令获取源代码：

git clone https://github.com/DayuanJiang/next-ai-draw-io
cd next-ai-draw-io

2. 安装依赖

安装项目所需的 Node.js 依赖包：

npm install

3. 配置环境变量

复制示例配置文件并创建本地环境变量文件：

cp env.example .env.local

编辑 .env.local 文件，填入您的 API Key 和选定的模型提供商。例如，若使用字节跳动豆包或 OpenAI 兼容接口：

# 示例：配置 API Key (具体变量名请参考 env.example 或文档)
OPENAI_API_KEY=your_api_key_here
OPENAI_BASE_URL=https://api.doubao.com/v1 # 如果使用豆包或其他兼容接口
NEXT_PUBLIC_DEFAULT_MODEL=glm-4-flash # 根据实际选择的模型填写

提示：详细的各厂商配置指南可参考项目内的 docs/en/ai-providers.md。

4. 启动开发服务器

运行以下命令启动应用：

npm run dev

启动成功后，在浏览器中访问：http://localhost:6002

基本使用

启动应用后，您将看到一个集成的聊天与绘图界面。以下是三种最核心的使用方式：

1. 自然语言生成图表

在对话框中输入您的需求，AI 将自动生成 draw.io XML 并渲染出图表。

• 示例提示词：

  "Generate a RAG architecture diagram for chat application. Use connected diagram for data ingestion" （为聊天应用生成一个 RAG 架构图，数据摄入部分使用连接图表示）

• 示例提示词：

  "Create a flowchart showing user authentication with login, MFA, and session management" （创建一个包含登录、多因素认证和会话管理的用户认证流程图）

2. 图片/文件上传复刻

您可以直接上传现有的流程图截图、PDF 文档或文本文件。

• 操作：点击输入框旁的上传按钮，选择文件。
• 效果：AI 会分析文件内容，自动复刻并重绘为可编辑的 draw.io 图表，或基于文档内容生成新的架构图。

3. 交互式修改

生成图表后，您可以继续通过对话进行微调。

• 示例：

  "Change the database icon to AWS RDS style and add an animated connector between API and Database." （将数据库图标改为 AWS RDS 风格，并在 API 和数据库之间添加动态连接线。）

其他运行方式

如果不希望本地安装，也可以选择以下方式：

• 在线体验：访问 Live Demo（支持在设置中填入自己的 API Key 以解除限制）。
• 桌面客户端：前往 Releases 页面 下载 Windows/macOS/Linux 原生应用。
• Docker 运行：参考项目根目录下的 docs/en/docker.md 指南。