Next AI Draw.io：AI驱动的智能图表创建工具

在AI225导航，我们持续关注和推荐优秀的AI工具项目。今天，我们将介绍一个令人印象深刻的开源项目——Next AI Draw.io，它将AI技术与流行的draw.io图表工具完美结合，让图表创建变得前所未有的简单和高效。

项目概述¶

Next AI Draw.io是由开发者DayuanJiang创建的一个Next.js应用程序，它将大型语言模型(LLM)的能力与draw.io图表编辑器集成在一起。通过这个工具，用户可以使用自然语言命令来创建、修改和增强各种类型的图表，无需手动绘制每个元素。

项目地址：https://github.com/DayuanJiang/next-ai-draw-io
在线体验：https://next-ai-drawio.jiang.jp/

核心功能特性¶

1. LLM驱动的图表创建¶

Next AI Draw.io最强大的功能是能够理解自然语言命令并生成相应的图表。用户只需用简单的文字描述想要创建的图表，AI就能自动生成对应的draw.io图表。

示例提示词：
- "给我一个带有动画连接器的Transformer架构图"
- "使用AWS图标生成一个AWS架构图，用户连接到托管在实例上的前端"
- "创建一个展示用户认证流程的流程图，包含登录、MFA和会话管理"

2. 多种输入方式支持¶

文本命令：直接输入自然语言描述
图像上传：上传现有图表或图像，AI可以复制和增强
PDF和文本文件上传：从文档中提取内容生成图表

3. AI推理过程显示¶

对于支持的模型（如OpenAI o1/o3、Gemini、Claude等），用户可以查看AI的思考过程，了解图表是如何生成的，这对于学习和调试非常有帮助。

4. 图表历史记录¶

系统提供全面的版本控制，跟踪所有更改，允许用户查看和恢复之前的图表版本，确保不会丢失任何工作成果。

5. 交互式聊天界面¶

通过与AI实时对话来完善图表，用户可以逐步调整和优化图表，直到满足需求。

6. 云架构图专门支持¶

特别优化了对云架构图的支持，包括AWS、GCP和Azure等主流云平台的图标和元素，非常适合技术文档和架构设计。

技术架构¶

Next AI Draw.io基于现代Web技术栈构建：

Next.js 16.x：提供前端框架和路由功能
React 19.x：构建用户界面
Vercel AI SDK：实现流式AI响应和多提供商支持
react-drawio：处理图表表示和操作
Tailwind CSS：提供样式支持

部署选项¶

1. 在线试用¶

无需安装，直接访问 https://next-ai-drawio.jiang.jp/ 即可体验全部功能。

2. Docker部署（推荐）¶

# 使用OpenAI
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

# 使用环境文件
cp env.example .env
# 编辑 .env 文件配置您的API密钥
docker run -d -p 3000:3000 --env-file .env ghcr.io/dayuanjiang/next-ai-draw-io:latest

Windows系统提示：
- 在PowerShell中，将Docker命令每行末尾的 \ (反斜杠) 改为 ` (反引号)
- 在CMD中，将Docker命令每行末尾的 \ (反斜杠) 改为 ^ (脱字符)
- 或者直接把反斜杠换行去掉，将命令合并为一行执行

镜像源提示：如果 ghcr.io 访问缓慢或无法连接，可以使用以下镜像源：

使用南京大学镜像源：

docker run -d -p 3000:3000 \
  -e AI_PROVIDER=anthropic \
  -e AI_MODEL=claude-sonnet-4-5-20250514 \
  -e ANTHROPIC_API_KEY=your_api_key \
  ghcr.nju.edu.cn/dayuanjiang/next-ai-draw-io:latest

或者配置 Docker 镜像加速器：

创建或编辑 /etc/docker/daemon.json（Linux/macOS）或 %USERPROFILE%\.docker\daemon.json（Windows）文件：

{
  "registry-mirrors": ["https://ghcr.nju.edu.cn"]
}

然后重启 Docker 服务。

3. 本地安装¶

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提供商和API密钥

# 运行开发服务器
npm run dev

在 .env.local 文件中配置您的AI提供商，例如：

# 使用Claude（推荐）
AI_PROVIDER=anthropic
AI_MODEL=claude-sonnet-4-5-20250514
ANTHROPIC_API_KEY=your_api_key

# 或使用OpenAI
# AI_PROVIDER=openai
# AI_MODEL=gpt-4o
# OPENAI_API_KEY=your_api_key

# 可选：设置温度参数
TEMPERATURE=0

# 可选：设置访问密码（推荐）
ACCESS_CODE_LIST=your_password

4. Vercel 平台部署¶

对于希望快速部署而不需要管理服务器的用户，可以使用 Vercel 平台进行一键部署：

部署时需要在 Vercel 控制台中设置环境变量，包括 AI_PROVIDER、AI_MODEL 和相应的 API 密钥等，与本地 .env.local 文件中的配置相同。

多AI提供商支持¶

Next AI Draw.io 支持多种AI服务提供商，用户可以根据自己的需求和偏好选择：

AWS Bedrock
OpenAI
Anthropic（Claude）
Google AI（Gemini）
Azure OpenAI
Ollama（本地部署）
OpenRouter
DeepSeek
SiliconFlow
Vercel AI Gateway

自动检测¶

如果只配置一个提供商的API密钥，系统会自动检测并使用该提供商，无需设置 AI_PROVIDER。如果配置多个API密钥，则必须明确设置 AI_PROVIDER。

温度设置¶

可选配置温度参数以控制输出的确定性：

TEMPERATURE=0  # 更确定的输出（推荐用于图表）

注意：对于不支持温度设置的模型（如某些推理模型），请勿设置此参数。

MCP服务器支持（预览功能）¶

Next AI Draw.io还提供了MCP（Model Context Protocol）服务器，允许在Claude Desktop、Cursor和VS Code等AI代理中使用：

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

应用场景¶

1. 技术文档编写¶

快速创建系统架构图、流程图和网络拓扑图，大大提高技术文档的编写效率。

2. 教育培训¶

教师可以快速创建教学图表和示意图，帮助学生理解复杂概念。

3. 商业演示¶

为商业计划和项目提案创建专业的流程图和结构图。

4. 软件设计¶

快速绘制系统设计图、数据流图和类图，加速软件开发过程。

使用技巧¶

明确的提示词：提供清晰、具体的描述，包括所需的元素、布局和样式
迭代优化：通过多轮对话逐步完善图表
利用模板：参考项目提供的示例提示词
善用历史记录：利用版本控制功能尝试不同的设计方向

项目优势¶

开源免费：完全开源，可自由使用和修改
多模型支持：支持多种AI服务提供商，选择灵活
易于部署：提供Docker镜像和详细的部署指南
功能丰富：不仅支持基本图表创建，还支持动画连接器等高级功能
活跃维护：项目持续更新，社区活跃

总结¶

Next AI Draw.io是一个优秀的开源AI工具，它成功地将自然语言处理与图表创建结合起来，大大降低了制作专业图表的门槛。无论你是技术开发者、教育工作者还是商业分析师，这个工具都能显著提高你的工作效率。

如果你正在寻找一个能够快速创建专业图表的AI工具，Next AI Draw.io绝对值得一试。通过简单的自然语言描述，你就能在几分钟内创建出复杂的图表，这在以前需要花费数小时甚至数天的时间。

想了解更多优秀的AI工具和项目？请访问AI225导航，我们为您提供最全面的AI工具推荐和使用指南。

AI225导航