让 AI 帮你画图：Next AI Draw.io 改变图表创作方式

前端小小栈
176 阅读5分钟

还记得第一次打开 draw.io 或 Visio 时的感觉吗？拖拽、连接、调整、再调整...画个架构图比写代码还累。现在，你只需要说句话，AI 就能帮你搞定。这是我给他一个txt 文档，帮我生成的一个效果图

image.png

什么是 Next AI Draw.io？

简单说，它是"懂语言的 draw.io"。一个基于 Next.js 和 React 19 的 Web 应用，把传统图表工具和 AI 能力无缝融合。你想画什么，说句话就行。

比如：

  • "给我画个 AWS 架构图，用户通过 ALB 访问 EC2 上的前端"
  • "创建一个用户认证流程图，包含登录、MFA 和会话管理"
  • "画只可爱的猫"

系统会自动生成标准 draw.io XML 格式的图表，你可以继续编辑、导出或分享。

它能做什么？

1. 自然语言生成图表

这是核心功能。利用大语言模型（LLM）理解你的自然语言描述，直接生成图表。支持 10 多种 AI 提供商：OpenAI、Anthropic、Google AI、AWS Bedrock、Azure OpenAI，甚至本地运行的 Ollama。

2. 图像复制与增强

上传一张截图或图片，AI 能识别其中的图表元素并重建。这意味着你可以把别人的架构图"学习"过来，再按需修改。

3. 文档转图表

上传 PDF 或文本文件，AI 提取关键信息自动生成可视化图表。技术文档、系统设计说明，一键转换。

4. 云架构图专家

AI 特别擅长画云架构图。为什么？因为 Claude 系列模型在训练时学习过大量 draw.io 云架构图表，内置了 AWS、GCP、Azure 的图标库和最佳实践。你说的 "VPC"、"EC2"、"S3"，它都能准确理解并用标准图标表示。

5. 动画连接器

在图表元素之间创建动态动画连接线，让架构图"活"起来，演示效果更震撼。

6. 版本历史追踪

每次 AI 修改都会自动保存，你可以随时回退。这是比传统工具强的地方——AI 说"我试试改改"时，你心里有底。

它是怎么工作的？

技术栈很现代：

  • Next.js 16.x：提供前端框架和路由
  • Vercel AI SDK：处理流式 AI 响应和多提供商支持
  • react-drawio：负责图表的渲染和操作

核心技术原理是：AI 理解你的需求 → 生成 draw.io XML → 渲染成图表。

draw.io 图表本质上是一种 XML 格式。AI 经过训练，能理解这种格式的约束和结构，所以能生成符合规范的 XML 代码。这也是为什么推荐使用 Claude Sonnet 4.5、GPT-5.1 等强模型的原因——生成严格的 XML 格式需要强大的逻辑能力。

怎么使用？

最简单：在线试用

不用安装，直接去 官网 体验。用你自己的 API Key 就能避免用量限制。

本地运行：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

桌面应用

原生应用，支持离线运行，API Key 加密存储在系统密钥链中。去 Releases 页面 下载对应的安装包。

开发者：从源码运行

git clone https://github.com/DayuanJiang/next-ai-draw-io
cd next-ai-draw-io
npm install
cp env.example .env.local
# 编辑 .env.local 配置 AI 提供商
npm run dev

详细配置说明见 快速开始。

MCP 集成：AI 助手的插件

这是最酷的功能之一。通过 MCP（Model Context Protocol），你可以把 Next AI Draw.io 当作 Claude Desktop、Cursor、VS Code 的插件。

配置很简单：

{
  "mcpServers": {
    "drawio": {
      "command": "npx",
      "args": ["@next-ai-drawio/mcp-server@latest"]
    }
  }
}

然后你就能在 VS Code 或 Cursor 里直接说： "帮我画个微服务架构图，用户先通过 API Gateway，然后到订单服务..."

浏览器会实时显示生成的图表。这感觉就像你的 IDE 内置了一个画图助手。

谁需要它？

  • 技术架构师：快速草拟系统设计，和团队讨论时动态调整
  • 产品经理：把用户故事、流程需求可视化
  • 开发人员：画 API 时序图、数据流图，代码评审时解释架构
  • 教师/培训师：制作课程图表，根据反馈快速迭代
  • 创业团队：向投资人展示架构设计，专业且高效

它不是什么？

它不会替代所有场景：

  • 需要精确像素级控制的设计图，还是用专业工具
  • 超大规模的企业级架构，手动建模可能更可控
  • 需要高度定制化样式的图表，AI 的审美可能不够

但它完美解决了 80% 的日常图表需求——快速表达想法，及时调整方案。

未来会怎样？

项目目前活跃开发中，GitHub Star 数量持续增长。可能的演进方向：

  • 支持更多图表类型（UML、数据库 ER 图等）
  • 团队协作功能
  • 与 Figma、Sketch 等设计工具集成
  • 更强的 AI 推理能力展示

总结

Next AI Draw.io 代表了一个趋势：AI 正在从"生成文本"向"生成结构化内容"演进。图表、代码、配置文件——这些需要严格格式的领域，AI 正在逐步掌握。

对开发者来说，它展示了如何用现代技术栈（Next.js + Vercel AI SDK + React）构建复杂的 AI 应用。对用户来说，它让图表创作变得像说话一样自然。

下次需要画图时，试试让 AI 帮你画吧。也许你会发现，有些事情，AI 确实比人做得更好。

avatar
文章
阅读
粉丝