AI Feeds
开源项目

next-ai-draw-io

next-ai-draw-io

AI 驱动的 draw.io 图表创建工具，通过自然语言对话生成、修改和增强技术图表。亮点在于同时支持在线演示、Docker 部署和 MCP 服务器集成，兼容多家 LLM 供应商（OpenAI/Claude/Ollama 等），并提供图表历史版本管理和云端架构图专项支持。适合需要快速将想法可视化的开发者和架构师。

README

Next AI Draw.io

AI 驱动的图表创建工具 - 聊天、绘图、可视化

English | 中文 | 日本語

TrendShift

License: Apache 2.0 Next.js React Sponsor

Live Demo

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

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

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

目录

示例

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

动画 Transformer 连接线

提示词：给我一个 Transformer 架构的 **动画连接线** 图。

Transformer Architecture with Animated Connectors
RAG 技术架构图

提示词：为 **聊天应用** 生成一个 RAG 架构图。使用连接线图表示数据摄入流程。

RAG Architecture Diagram 		使用 React 和 AWS 的身份认证

提示词：生成使用 React 与 **AWS** 的身份认证流程。采用 Serverless 架构。

Authentication Architecture Diagram
开放式创新

提示词：创建 Henry Chesbrough 开放式创新模型的可视化图。

Open Innovation Diagram 		猫咪素描

提示词：给我画一只可爱的猫。

Cat Drawing

功能特性

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

MCP 服务器

通过 MCP（模型上下文协议）将 Next AI Draw.io 与 Claude Desktop、Cursor、VS Code 等 AI agent 一起使用。

{
  "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 服务器说明。

快速开始

在线试用

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

Live Demo

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

桌面应用

从 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

各提供商的详细配置说明请参见 提供商配置指南。

  1. 运行开发服务器：
npm run dev
  1. 在浏览器中打开 http://localhost:6002 查看应用。

部署

部署到 EdgeOne Pages

你可以通过 腾讯 EdgeOne Pages 一键部署。

点击以下按钮部署：

Deploy to EdgeOne Pages

更多详情请查看 腾讯 EdgeOne Pages 文档。

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

部署到 Vercel

Deploy with 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：用于图表的表示和操作

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

支持与联系

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

如果你觉得这个项目有用，请考虑 赞助 以帮助我托管在线演示站点！

如有支持需求或疑问，请在 GitHub 仓库中提交 issue，或通过以下方式联系维护者：

  • 邮箱：me[at]jiang.jp

常见问题

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

Star 历史

Star History Chart

开源项目DayuanJiang2026-07-11原文

相关内容