Next AI Draw.io 简介
Next AI Draw.io 是一个基于 Next.js 的 Web 应用程序，它将人工智能能力与 draw.io 图表深度集成。该应用允许用户通过自然语言命令和 AI 辅助可视化来创建、修改和增强图表。它旨在提供一个 AI 驱动的图表创建工具，支持聊天、绘图和可视化功能。
GitHub 仓库：https://github.com/DayuanJiang/next-ai-draw-io
特点
该项目具备以下核心特点：
- LLM 驱动的图表创建：利用大型语言模型（LLM）直接通过自然语言命令创建和操作 draw.io 图表。
- 基于图像的图表复制：用户可以上传现有图表或图片，AI 将自动复制并增强它们。
- PDF 和文本文件上传：支持上传 PDF 文档和文本文件，以提取内容并从现有文档生成图表。
- AI 推理过程显示：对于支持的模型（如 OpenAI o1/o3, Gemini, Claude 等），可以查看 AI 的思考过程。
- 图表历史记录：提供全面的版本控制，跟踪所有更改，允许用户在 AI 编辑之前查看和恢复图表的先前版本。
- 交互式聊天界面：与 AI 进行实时沟通，以优化和完善图表。
- 云架构图支持：专门支持生成云架构图，包括 AWS、GCP 和 Azure。
- 动画连接器：在图表元素之间创建动态和动画连接器，以实现更好的可视化效果。
- 多提供商支持：支持多种 AI 提供商，包括 AWS Bedrock、OpenAI、Anthropic、Google AI、Azure OpenAI、Ollama、OpenRouter、DeepSeek 和 SiliconFlow。除了 AWS Bedrock 和 OpenRouter 外，所有提供商都支持自定义端点。
安装和使用方法
安装
Next AI Draw.io 提供了多种使用和安装方式。
使用方法
T1、在线试用 (Try it Online)
无需安装，可直接访问项目的演示网站进行体验。
注意：由于流量较高，演示网站目前使用 minimax-m2 模型。为获得最佳效果，建议使用 Claude Sonnet 4.5 或 Claude Opus 4.5 进行自托管。
自带 API Key (Bring Your Own API Key)：用户可以在聊天面板的设置图标中配置自己的 AI 提供商和 API Key，以绕过演示网站的使用限制。您的密钥将本地存储在浏览器中，不会存储在服务器上。
T2、使用 Docker 运行 (推荐)
步骤 1：安装 Docker。
步骤 2：运行以下命令：
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
或者，复制 env.example 到 .env 并编辑配置，然后运行：
cp env.example .env # 编辑 .env 文件
docker run -d -p 3000:3000 --env-file .env ghcr.io/dayuanjiang/next-ai-draw-io:latest
步骤 3：在浏览器中打开 http://localhost:3000。
离线部署：如果 embed.diagrams.net 被阻止，可以查阅离线部署选项。
T3、本地安装 (Installation)
步骤 1：克隆仓库：
git clone https://github.com/DayuanJiang/next-ai-draw-io
cd next-ai-draw-io
步骤 2：安装依赖：
npm install
步骤 3：配置 AI 提供商：
复制 env.example 到 .env.local：cp env.example .env.local
编辑 .env.local 文件，配置以下变量：
AI_PROVIDER：设置为您选择的提供商（如 bedrock, openai, anthropic, google, azure, ollama, openrouter, deepseek, siliconflow）。AI_MODEL：设置为要使用的具体模型。- 添加所需提供商的 API 密钥。
TEMPERATURE：可选的温度设置（例如 0 用于确定性输出）。对于不支持此设置的模型（如推理模型），可不设置。ACCESS_CODE_LIST：可选的访问密码，可逗号分隔设置多个密码。警告：如果未设置此项，任何人都可以直接访问您的部署站点，可能导致令牌快速耗尽。强烈建议设置此选项。
查阅《详细提供商配置指南》获取每个提供商的详细设置说明。
步骤 4：运行开发服务器：
npm run dev
步骤 5：在浏览器中打开 http://localhost:3000。
部署 (Deployment)：
最简单的部署方式是使用 Next.js 官方推荐的 Vercel 平台。
确保在 Vercel 控制台中设置与本地 .env.local 文件中相同的环境变量。
案例应用
项目提供了一些示例提示词及其生成的图表，展示了其强大的功能：
动画转换器连接器 (Animated transformer connectors)
提示词：Give me a animated connector diagram of transformer's architecture. (给我一个带有动画连接器的 Transformer 架构图。)
GCP 架构图 (GCP architecture diagram)
提示词：Generate a GCP architecture diagram with GCP icons. In this diagram, users connect to a frontend hosted on an instance. (生成一个带有 GCP 图标的 GCP 架构图。在这个图中，用户连接到一个托管在实例上的前端。)
AWS 架构图 (AWS architecture diagram)
提示词：Generate a AWS architecture diagram with AWS icons. In this diagram, users connect to a frontend hosted on an instance. (生成一个带有 AWS 图标的 AWS 架构图。在这个图中，用户连接到一个托管在实例上的前端。)
Azure 架构图 (Azure architecture diagram)
提示词：Generate a Azure architecture diagram with Azure icons. In this diagram, users connect to a frontend hosted on an instance. (生成一个带有 Azure 图标的 Azure 架构图。在这个图中，用户连接到一个托管在实例上的前端。)
猫咪素描图 (Cat sketch prompt)
提示词：Draw a cute cat for me. (给我画一只可爱的猫。)
这些案例展示了该应用如何通过自然语言命令，结合特定图标和动画效果，生成各种复杂的架构图和简单的示意图。
