阿超 > next-ai-draw-io

next-ai-draw-io

2026-01-04

ai

你热爱生命吗?那么别浪费时间，因为时间是组成生命的材料。——富兰克林

Next AI Draw.io：用自然语言“聊”出云架构图、流程图、甚至小猫素描的 AI 画板

这是一个把 AI 能力和 draw.io 图形深度结合的 Next.js 应用：你可以用“自然语言”对话来创建、修改、增强各种图表（flowchart、架构图、BPMN 等），还能上传图片/PDF/文本进行复刻与抽取，再让 AI 辅助可视化。简单说——你说，AI画，画完还能继续聊着改。

先看看它能画什么（来自 README 的示例提示词）

  • Transformers 架构图（还带“动画连接线”）
    • Prompt: “Give me an animated connector diagram of transformer’s architecture.”
  • 云厂商架构图
    • AWS Prompt: “Generate an AWS architecture diagram with AWS icons…”
    • GCP Prompt: “Generate a GCP architecture diagram with GCP icons…”
    • Azure Prompt: “Generate an Azure architecture diagram with Azure icons…”
  • 杂七杂八的小画
    • Prompt: “Draw a cute cat for me.”

它是“能听懂话、知道你想要什么、还能挑对图标库”的那类图表 AI。

功能一览（按 README 原文整理）

  • LLM 驱动的图表创建与编辑：用自然语言直达 draw.io 的 XML 表达
  • 图像类图表复刻：上传现有图或示意图，AI 自动复刻并可增改
  • PDF/文本上传：从文档中抽取结构信息并生成图表
  • AI 推理展示：支持查看模型思考过程（OpenAI o1/o3、Gemini、Claude 等）
  • 图表历史：完整的版本追踪，可回看和回滚 AI 编辑前的状态
  • 实时聊天式改图：边聊边改，边看边调
  • 云架构专精支持：AWS / GCP / Azure 等云图标与结构
  • 动画连接线：让连线“动起来”，更清晰地表达数据与关系

MCP Server（预览特性）：把“画图能力”接到 Claude、Cursor、VS Code

你可以把 Next AI Draw.io 当作 MCP（Model Context Protocol）服务，给 Claude Desktop、Cursor、VS Code 等 AI 客户端用。配置极简：

1
2
3
4
5
6
7
8
{
  "mcpServers": {
    "drawio": {
      "command": "npx",
      "args": ["@next-ai-drawio/mcp-server@latest"]
    }
  }
}

Claude Code CLI 一行命令：

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

然后你就能对 AI 说：

“Create a flowchart showing user authentication with login, MFA, and session management”

——图会实时在浏览器里出来。这种“即时预览 + 自然语言编辑”的感觉，真的很上头。

更多客户端配置见仓库里的 MCP Server README（VS Code / Cursor / Cline 等都支持标准 MCP 配法）。

快速体验（无需安装）

本地开发：三步走就能跑起来

1
2
3
4
5
6
7
8
9
10
11
12
# 1) 克隆仓库
git clone https://github.com/DayuanJiang/next-ai-draw-io
cd next-ai-draw-io

# 2) 安装依赖并准备环境变量
npm install
cp env.example .env.local

# 3) 启动开发服务
npm run dev

# 浏览器打开 http://localhost:6002

不同 AI Provider 的配置，请看文档：

一键部署（多平台支持）

  • Tencent EdgeOne Pages（可一键部署，且带每日 DeepSeek 模型免费额度）
    • 按 README 中的部署按钮进入即可
  • Vercel（推荐）
    • 一键 Clone & Deploy 按钮，记得在 Dashboard 设置环境变量
  • Cloudflare Workers

多模型/多平台支持（README 列表）

  • ByteDance Doubao（火山引擎 Ark）
  • AWS Bedrock（默认）
  • OpenAI
  • Anthropic
  • Google AI
  • Azure OpenAI
  • Ollama
  • OpenRouter
  • DeepSeek
  • SiliconFlow
  • SGLang
  • Vercel AI Gateway

除 AWS Bedrock 与 OpenRouter 外，其他 Provider 都支持自定义 Endpoint。
模型能力要求较高（长文本 + 严格格式化的 draw.io XML），README 推荐了如 Claude Sonnet 4.5 等模型。

Shape Libraries（图形库大全）

项目文档里还准备了大量 draw.io 图形库的索引与说明（云厂商、网络设备、BPMN、Kubernetes、电子电气、平面布局、Web 图标……应有尽有），例如：

  • AWS（aws4，1031 个形状）
  • Azure（azure2，608 个形状）
  • GCP（gcp2，297 个形状）
  • Alibaba Cloud（alibaba_cloud，273 个形状）
  • Cisco（cisco19，232 个形状）
  • BPMN（bpmn）
  • Kubernetes（kubernetes）
  • Web Icons（webicons）
  • ……

总计：33 个库、4,281 个形状。
详情见：docs/shape-libraries/README.md

它怎么工作？（架构概述）

  • 前端与路由：Next.js
  • AI 流式与多 Provider：Vercel AI SDK（ai + @ai-sdk/*）
  • 图形表示与操作：react-drawio
  • 图表本质是 draw.io 的 XML；AI 会生成或修改这份 XML，让图表直接渲染出来

在私有环境里部署 draw.io（给安全要求高的场景）

MCP Server 是自包含的（有嵌入式 HTTP 服务，无外部依赖），draw.io UI 默认从 https://embed.diagrams.net 加载。
需要私有化时，可以自己起一个 draw.io 服务并改配置：

1
docker run -d -p 8080:8080 jgraph/drawio

然后把 DRAWIO_BASE_URL 指到你的地址（如 http://localhost:8080）。
MCP 环境变量可直接在配置里写：

1
2
3
4
5
6
7
8
9
10
11
12
{
  "mcpServers": {
    "drawio": {
      "command": "npx",
      "args": ["@next-ai-drawio/mcp-server@latest"],
      "env": {
        "DRAWIO_BASE_URL": "https://drawio.your-company.com",
        "PORT": "6003"
      }
    }
  }
}

小结：这不是“把图做完”，而是“把改图变得好玩”

  • 你用话术沟通需求，AI 把图画出来；看不满意？继续聊着改
  • 云架构图的图标库丰富到“看花眼”，还支持动画连接线
  • 支持上传 PDF/文本/图片，能从现有资料快速复刻/抽取结构
  • MCP 接入后，Claude、Cursor、VS Code 都能“随叫随画”
  • Demo 一试即知，桌面应用/本地开发/云端部署都很顺滑

最后，向支持与协作致谢：

  • “特別感谢 ByteDance Doubao”在 README 里是明写的
  • 如果你觉得好用，也可以在 GitHub 上赞助作者，用爱发电让 Demo 长久在线

出发吧：把“画图”变成“聊天”，把“改图”变成“游戏”。
链接再放一次：