【AI 提效】Next AI Draw.io：自然语言生成专业图表，效率直线飙升

还在为画流程图、架构图耗时伤脑而烦恼？Next AI Draw.io 把 AI 能力与专业绘图工具 draw.io 无缝结合，让你“用一句话”就能生成可编辑的图表，复杂修改也能通过对话完成。它既是提升个人效率的利器，也是团队统一图表风格与质量的最佳实践。

官方文档：README_CN｜开源地址：GitHub

为什么值得用：把“画图”变成“对话”

• 自然语言生成/修改：直接说“画一个含登录、MFA、会话管理的认证流程图”，AI 即刻生成可编辑图表。
• 图像/PDF/文本上传：上传截图或PDF，自动识别关键元素，复制为可编辑的 draw.io 图表并优化布局。
• 云架构支持：内置 AWS/GCP/Azure 图标库，快速产出规范统一的云架构图。
• 动画连接器：让数据流与链路“动起来”，提升演示与表达效果。
• 版本历史：完整记录每次 AI 编辑前后的差异，可回看与回滚。
• 可选强模型：兼容 OpenAI o1/o3、Claude、Gemini、DeepSeek 等，推荐 Claude Sonnet 4.5、GPT-5.1、Gemini 3 Pro、DeepSeek V3.2/R1。

真实场景：5分钟跑通两类高频图表

• 用户流程图：
  • 提示语示例：“绘制一个用户注册流程图，包含：访问注册页→填写信息→校验→成功创建账号→失败返回错误。”
  • 自动生成开始/结束、处理步骤、决策节点与连接线，结构清晰、样式专业。
• 云原生微服务架构图：
  • 提示语示例：“绘制微服务架构：API 网关、用户/订单/支付服务、消息队列、数据库，服务间通过异步通信；使用 AWS 图标。”
  • 自动布局、统一风格，支持跨云平台图标选择。

上手指南：0门槛尝鲜到本地私有化

• 在线试用：支持自带 API Key，本地存储不上传服务器，体验即开即用。
• 桌面应用：提供 Windows/macOS/Linux 原生客户端，开箱即用。
• 本地开发：

  git clone https://github.com/DayuanJiang/next-ai-draw-io
  cd next-ai-draw-io
  npm install
  cp env.example .env.local
  npm run dev
  # 浏览器打开 http://localhost:6002

• 部署推荐：
  • Vercel：Next.js 官方平台，按 .env.local 配置环境变量。
  • Cloudflare Workers：边缘部署，参考官方指南。
  • 腾讯云 EdgeOne Pages：一键部署，享每日 DeepSeek 模型额度。

多提供商支持与配置要点

• 支持：字节跳动豆包、AWS Bedrock（默认）、OpenAI、Anthropic、Google AI、Azure OpenAI、Ollama、OpenRouter、DeepSeek、SiliconFlow、SGLang、Vercel AI Gateway。
• 绝大多数提供商支持自定义端点（除 AWS Bedrock、OpenRouter）。
• 配置位置：应用内“设置”图标可选 Provider 与 API Key，Key 仅存于本地浏览器。

完全本地化：Ollama + Docker 一键起飞

如需离线/私有化运行，可使用 Ollama 本地大模型。示例 docker-compose.yml：

services:
  next-ai-draw-io:
    image: ghcr.io/dayuanjiang/next-ai-draw-io:latest
    container_name: next-ai-draw-io
    ports:
      - "3025:3000"
    environment:
      - AI_PROVIDER=openai
      - AI_MODEL=gpt-oss:20b
      - OPENAI_API_KEY=ollama
      - OPENAI_BASE_URL=http://host.docker.internal:11434/v1
    restart: always

Ollama 侧准备（在容器内或主机）：

ollama pull qwen2-vl:7b    # 视觉/工具调用能力示例
ollama run qwen2-vl:7b

提示词技巧：让 AI 更懂你的图表意图

• 明确类型：流程图/架构图/拓扑图/UML。
• 列出关键元素：组件、服务、数据存储、队列等。
• 描述关系：调用方向、同步/异步、数据流动。
• 设定风格：使用云平台图标、布局方向、主题色。
• 示例：
  • “使用 GCP 图标生成架构图：用户→负载均衡→前端实例→后端实例→数据库，连接线用动画虚线。”
  • “画一个带决策节点的故障处理流程：检测→判断是否恢复→是则结束→否则触发告警与回滚。”

工作原理与技术栈

• 前端：Next.js 用于路由与页面渲染。
• AI：Vercel AI SDK (ai + @ai-sdk/*) 实现流式响应与多模型接入。
• 绘图：与 draw.io (diagrams.net) 深度集成，生成/修改 XML 并渲染。
• 历史：完整的版本记录，支持回看与恢复。

适用人群与收益

• 架构师/研发：快速产出云架构与系统流程，统一风格与表达。
• 测试/运维：搭建故障流程与调用链路图，演示更直观。
• 产品/文档：降低绘图门槛，分钟级完成可发布图表。

立刻试用与收藏

• 演示站点：支持自带 API Key，随时体验。
• 开源仓库：欢迎 Star 与 Issue 交流最佳实践。
• 推荐模型：Claude Sonnet 4.5 / GPT-5.1 / Gemini 3 Pro / DeepSeek V3.2/R1。

现在就把“画图”交给 AI，把时间留给更重要的创造与决策。