Next AI Draw.io：当AI遇见Draw.io图表绘制

在AI技术重塑应用格局的时代，智能图表绘制工具正逐渐成为技术文档编写、系统设计与团队协作中不可或缺的利器。过去我常使用 draw.io 制作图表，而最近在 GitHub 上发现了一个为 draw.io 集成 AI 能力的项目------这无疑是为这款工具插上了智能的翅膀。今天，就让我们一起来了解这个令人期待的项目。

17153200_30108ea40e.png

🌟 项目简介

在当今AI技术飞速发展的背景下，Next AI Draw.io 正是一款将人工智能与专业图表绘制完美融合的开源项目。这个基于Next.js的AI驱动图表创建工具，通过自然语言交互，让复杂的技术图表绘制变得前所未有的简单和高效。

想象一下，你只需说"给我画一个云原生微服务架构图"，AI就能在draw.io画布上为你生成专业的架构图表------这正是Next AI Draw.io带给我们的魔法体验。

当前项目在github上已有5.6k star

github地址：github.com/DayuanJiang...

演示地址：next-ai-drawio.jiang.jp/

_20251209_190422.png

✨ 核心特性

🤖 AI驱动的智能图表创建

自然语言生成图表：用对话的方式描述你的需求，AI自动生成相应的draw.io图表
多云架构图支持：特别优化了AWS、GCP、Azure等云服务架构图的生成
图像转图表功能：上传现有图表或截图，AI帮你自动复制和增强

🎯 专业级图表功能

动画连接器：在图表元素间创建动态的连接线，让数据流动和关系更直观
完整的版本历史：每次AI修改都有记录，可以随时回退到之前的版本
多提供商支持：兼容市面上主流的大语言模型服务

🔧 开发者友好设计

本地API密钥管理：你的API密钥只保存在浏览器本地，确保数据安全
模块化架构：清晰的代码结构便于二次开发和定制
完整的类型支持：基于TypeScript开发，提供优秀的开发体验

🚀 快速部署指南

Docker一键部署（推荐）

对于想要快速体验的用户，Docker是最佳选择：

ini 复制代码

# 使用OpenAI GPT-4o模型，如果使用代理地址，指定OPENAI_BASE_URL
docker run -d -p 3000:3000 \
  -e AI_PROVIDER=openai \
  -e AI_MODEL=gpt-4o \
  -e OPENAI_API_KEY=your_openai_key \
  -e OPENAI_BASE_URL=your_proxy_url \
  ghcr.io/dayuanjiang/next-ai-draw-io:latest

我本地使用的是docker-compose部署，一下是yml内容

ini 复制代码

services:
  next-ai-draw-io:
  # 若官方镜像下载慢，可以使用博主转存的镜像 registry.cn-hangzhou.aliyuncs.com/xjpublic/next-ai-draw-io:latest
    image: ghcr.io/dayuanjiang/next-ai-draw-io:latest 
    container_name: next-ai-draw-io
    restart: unless-stopped
    ports:
      - "3100:3000"
      # 我使用的是kimi的模型，OPENAI_BASE_URL改为kimi的地址即可
    environment:
      - AI_PROVIDER=openai
      - AI_MODEL=kimi-k2-turbo-preview
      - OPENAI_BASE_URL=https://api.moonshot.cn/v1
      - OPENAI_API_KEY=_API_KEY

若官方镜像下载慢，可以使用博主转存的镜像 registry.cn-hangzhou.aliyuncs.com/xjpublic/next-ai-draw-io:latest

使用以下命令启动项目

复制代码

docker-compose up -d

访问 http://ip:port 即可使用

🎨 使用示例

创建系统流程图

复制代码

提示词：设计一个用户登录系统的流程图，包含验证、session管理和错误处理

ScreenShot_2025-12-09_192048_443.png

绘制网络拓扑

复制代码

提示词：绘制一个企业级网络拓扑图，包含防火墙、交换机、路由器和服务器集群

ScreenShot_2025-12-09_192735_685.png

复制和优化现有图表

上传现有的架构图或设计草图，AI会自动：

识别图中的元素和结构
生成规范的draw.io图表
根据需求进行优化和增强

🔌 支持的AI服务商

Next AI Draw.io支持几乎所有的主流AI服务，让你的选择更加灵活：

服务商	推荐模型	特点
Anthropic	Claude 3.5 Sonnet	对AWS图表特别优化，逻辑推理能力强
OpenAI	GPT-4o, GPT-4 Turbo	通用性强，响应速度快
Google AI	Gemini 2.0	多模态能力强
DeepSeek	DeepSeek-R1	性价比高，中文支持好
Ollama	本地模型	数据安全，完全离线
Azure OpenAI	GPT-4	企业级合规需求

如果你使用的模型不在支持列表中，则可以使用通用openai参照以下配置

ini 复制代码

- AI_PROVIDER=openai     # 使用openai，几乎所有模型都兼容openai格式
- AI_MODEL=kimi-k2-turbo-preview   # 模型名称
- OPENAI_BASE_URL=https://api.moonshot.cn/v1 # 模型地址
- OPENAI_API_KEY=_API_KEY # api key

💡 使用技巧

1. 提供明确的需求

越详细的描述，AI生成的图表越精准。包括：

图表类型（架构图、流程图、时序图等）
使用的图标库（AWS、Azure、GCP或通用）
具体的组件和连接关系

2. 利用版本历史

每次AI修改都会创建新的版本，你可以：

查看每次修改的具体内容
比较不同版本间的差异
随时回退到之前的版本

3. 渐进式优化

先让AI生成基础框架，然后通过对话逐步优化：

arduino 复制代码

"添加监控告警组件"
"将所有存储改为SSD"
"增加灾备恢复流程"

🛠️ 开发者进阶

项目架构

bash 复制代码

app/
├── api/chat/          # AI聊天API端点
├── page.tsx           # 主页面
components/
├── chat-panel.tsx     # 聊天界面
├── history-dialog.tsx # 历史记录查看器
lib/
├── ai-providers.ts    # AI服务商配置
└── utils.ts           # 工具函数

添加自定义功能

如果你想扩展功能，可以：

在lib/ai-providers.ts中添加新的AI服务商
修改components/chat-panel.tsx增强用户界面
扩展app/api/chat/route.ts中的AI工具集

📊 性能优化建议

模型选择策略

复杂架构图：推荐使用Claude 3.5 Sonnet或GPT-4
简单流程图：可以使用GPT-4o或DeepSeek-R1节省成本
本地部署：考虑使用Ollama+本地模型保证数据安全

成本控制

设置访问密码，防止未授权访问
对于团队使用，考虑配置使用限额
定期检查API使用情况，优化提示词

🔮 未来展望

随着AI技术的不断发展，Next AI Draw.io也在持续进化：

实时协作：多用户同时编辑和AI辅助
模板库：预置行业标准图表模板
智能分析：基于图表内容的智能建议
插件生态：支持第三方扩展和集成

🎯 结语

在AI重塑应用的时代，Next AI Draw.io为我们展示了AI如何与传统工具结合，创造出1+1>2的价值。无论你是系统架构师、技术文档工程师，还是项目经理，这个工具都能大幅提升你的工作效率。

通过简单的部署步骤，你就能拥有一个强大的AI图表助手。开源的力量让每个人都能享受到最前沿的技术红利。

✅ 附: draw-io部署

docker-compose.yml

yaml 复制代码

services:
  draw:
    image: jgraph/drawio
    container_name: draw
    restart: always
    environment:
      TZ: Asia/Shanghai
    ports:
      - 3000:8080