/README.md

Note

本文档由 WeHub 基于上游 README 翻译整理，属于社区翻译，非官方中文文档。
English · 原始项目 · 上游 README
原作者、版权与许可证归属以原始项目及本仓库 LICENSE 文件为准。

Next AI Draw.io

AI 驱动的图表创建工具 - 对话、绘制、可视化

English | 中文 | 日本語

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

注意：感谢 ByteDance Doubao 的赞助，演示站点现已使用强大的 glm-4.7 模型！

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

目录

• Next AI Draw.io
  • 目录
  • 示例
  • 功能
  • MCP Server
    • Claude Code CLI
  • 快速开始
    • 在线试用
    • 桌面应用
    • 使用 Docker 运行
    • 安装
  • 部署
    • 部署到 EdgeOne Pages
    • 部署到 Vercel
    • 部署到 Cloudflare Workers
  • 多提供商支持
    • 服务端多模型配置
    • 管理面板
  • 工作原理
  • 支持与联系
  • 常见问题
  • Star 历史

示例

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

动画 Transformer 连接器 提示词： Give me a **animated connector** diagram of transformer's architecture.
RAG 技术示意图 提示词： Generate a RAG architecture diagram for **chat application**. Use connected diagram for data ingestion	使用 React 和 AWS 的认证流程 提示词： Generate authentication process using React with **AWS**. Use Serverless architecture.
开放式创新 提示词： Create visualization of Henry Chesbrough's Open Innovation model.	猫咪素描 提示词： Draw a cute cat for me.

功能

• LLM 驱动的图表创建：利用大语言模型（Large Language Models，LLM），通过自然语言指令直接创建和操作 draw.io 图表
• 基于图像的图表复刻：上传现有图表或图片，由 AI 自动复刻并增强
• PDF 与文本文件上传：上传 PDF 文档和文本文件，提取内容并基于现有文档生成图表
• AI 推理过程展示：查看受支持模型（OpenAI o1/o3、Gemini、Claude 等）的思考过程
• 图表历史记录：完善的版本控制，跟踪所有变更，可在 AI 编辑前查看并恢复图表的历史版本
• 交互式聊天界面：与 AI 实时沟通，持续优化图表
• 云架构图支持：专门支持生成云架构图（AWS、GCP、Azure）
• 动画连接器：在图表元素之间创建动态动画连接器，提升可视化效果

MCP Server

通过 MCP（Model Context Protocol，模型上下文协议），在 Claude Desktop、Cursor、VS Code 等 AI 智能体中使用 Next AI Draw.io。

{
  "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。

快速开始

在线试用

无需安装！可直接在演示站点试用本应用：

自带 API Key（Bring Your Own API Key）：你可以使用自己的 API key 绕过演示站点的使用限制。点击聊天面板中的设置图标，配置提供商和 API key。你的 key 仅保存在浏览器本地，绝不会存储在服务器上。

桌面应用

请从 Releases 页面: 下载适用于你平台的原生桌面应用。

支持的平台：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

你可以使用 Tencent EdgeOne Pages. 一键部署。

通过此按钮部署：

更多详情，请参阅 Tencent EdgeOne Pages 文档。

此外，通过 Tencent EdgeOne Pages 部署还可获得 DeepSeek 模型的每日免费额度.。

部署到 Vercel

最简单的部署方式是使用 Vercel,——Next.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 SDK（ai + @ai-sdk/*）：用于流式 AI 响应与多提供商支持
• react-drawio：用于图表的呈现与编辑

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

支持与联系

特别感谢 字节跳动豆包 赞助演示站的 API 令牌用量！ 在 ARK 平台注册即可为所有模型获得 50 万免费令牌！

若您觉得本项目有用，欢迎考虑 赞助，帮助我托管在线演示站！

如需支持或咨询，请在 GitHub 仓库提交 issue，或通过以下方式联系维护者：

• Email: me[at]jiang.jp

常见问题

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

Star 历史

---