DayuanJiang / next-ai-draw-io

DayuanJiang/next-ai-draw-io

open_in_new前往仓库

一个集成了AI能力的draw.io图表Next.js网页应用，支持通过自然语言命令创建、修改和增强图表，并提供AI辅助可视化功能。

项目概览

项目概述

Next AI Draw.io 是一个基于 Next.js 的 Web 应用，将 AI 能力与 draw.io 图表编辑功能深度集成。用户可以通过自然语言指令创建、修改和增强图表，实现 AI 辅助的图表可视化。项目支持多种 AI 模型提供商，并提供在线演示、桌面应用和 Docker 部署等多种使用方式。

核心功能

  • LLM 驱动的图表创建：利用大语言模型通过自然语言命令直接创建和操作 draw.io 图表。
  • 基于图像的图表复制：上传现有图表或图像，AI 自动复制并增强。
  • PDF 与文本文件上传：从 PDF 和文本文件中提取内容并生成图表。
  • AI 推理过程显示：支持查看 OpenAI o1/o3、Gemini、Claude 等模型的思考过程。
  • 图表历史记录：版本控制，可查看和恢复 AI 编辑前的图表版本。
  • 交互式聊天界面：与 AI 实时对话以完善图表。
  • 云架构图支持：专门支持 AWS、GCP、Azure 云架构图生成。
  • 动画连接器：创建动态动画连接器以增强可视化效果。

适用与不适用场景

适用场景：

  • 需要快速生成流程图、架构图、思维导图等图表的个人或团队。
  • 希望利用 AI 辅助进行图表设计和修改的用户。
  • 需要从文档或图片中提取信息并转化为图表的场景。
  • 支持云架构图设计，适合云服务架构师。

不适用场景：

  • 对图表格式有严格定制需求且 AI 无法满足的场景。
  • 需要完全离线且无 AI 模型服务的环境（除非自托管模型）。
  • 对数据隐私要求极高，且不允许数据发送至外部 AI 服务的场景。

技术架构与依赖

  • 前端框架：Next.js（版本 16.x）
  • UI 库：React（版本 19.x）
  • AI SDK：Vercel AI SDK（ai + @ai-sdk/*）
  • 图表库：react-drawio
  • 部署适配：支持 Vercel、Cloudflare Workers（通过 OpenNext）、腾讯 EdgeOne Pages、Docker
  • MCP 服务器：提供 @next-ai-drawio/mcp-server 包，支持 Claude Desktop、Cursor、VS Code 等客户端

安装与快速开始

在线试用

无需安装，直接访问 演示站点。

本地安装

  1. 克隆仓库： 
    git clone https://github.com/DayuanJiang/next-ai-draw-io
cd next-ai-draw-io
npm install
cp env.example .env.local
  2. 配置 AI 提供商（参考 docs/en/ai-providers.md）。
  3. 运行开发服务器： 
    npm run dev
  4. 打开 http://localhost:6002 查看应用。

Docker 运行

docker run -d -p 3000:3000 \
  -e AI_PROVIDER=openai \
  -e AI_MODEL=gpt-4o \
  -e OPENAI_API_KEY=your_api_key \
  ghcr.io/dayuanjiang/next-ai-draw-io:latest

典型使用方法

  1. 创建图表：在聊天界面输入自然语言指令，如“创建一个用户认证流程图”。
  2. 修改图表：上传现有图表或图片，让 AI 复制并增强。
  3. 从文档生成：上传 PDF 或文本文件，AI 提取内容并生成图表。
  4. 云架构图：使用支持云架构的模型（如 Claude 系列）生成 AWS/Azure/GCP 架构图。
  5. MCP 集成：在 Claude Code 中运行 claude mcp add drawio -- npx @next-ai-drawio/mcp-server@latest，然后让 Claude 创建图表。

配置与部署要点

  • 环境变量：配置 AI 提供商 API 密钥、模型 ID 等，参考 env.example。
  • 多模型配置：通过 AI_MODELS_CONFIG 环境变量或 ai-models.json 文件配置服务端多模型。
  • 管理面板：设置 ADMIN_PASSWORD 后访问 /admin 可管理模型、访问码、配额等。
  • 部署平台：支持 Vercel、Cloudflare Workers、腾讯 EdgeOne Pages、Docker。
  • 离线部署：自托管 draw.io 并设置 NEXT_PUBLIC_DRAWIO_BASE_URL（构建时变量）。

限制、风险与许可证

  • 许可证：Apache-2.0。
  • 模型要求：需要强大的模型能力以生成符合 draw.io XML 格式的长文本，推荐 Claude Sonnet 4.5、GPT-5.1、Gemini 3 Pro 等。
  • 已知限制：
    • Web 版无法直接导出 PDF，需先导出 PNG 再打印。
    • 离线部署时需自托管 draw.io，且 NEXT_PUBLIC_* 变量为构建时变量。
    • 小模型可能无法正确遵循 tool calling 指令，导致只思考不画图。
    • 部分模型不支持视觉功能，上传图片可能报错。
  • 风险：API 密钥存储在浏览器本地或服务器配置中，需妥善保管；管理面板密钥以明文存储。

官方链接

信息来源和分析时间

  • 信息来源：GitHub 仓库 README、docs 目录下的文档（英文、中文、日文）、最新 Release 信息。
  • 分析时间：2026年5月21日（基于最新 Release 发布时间）。