AI之Tool：Next AI Draw.io的简介、安装和使用方法、案例应用之详细攻略
AI之Tool：Next AI Draw.io的简介、安装和使用方法、案例应用之详细攻略
目录
Next AI Draw.io的简介
1、特点
Next AI Draw.io的安装和使用方法
1、安装
2、使用方法
T1、在线试用 (Try it Online)：
T2、使用 Docker 运行 (推荐)
T3、本地安装 (Installation)：
Next AI Draw.io的案例应用
动画转换器连接器 (Animated transformer connectors)：
GCP 架构图 (GCP architecture diagram)：
AWS 架构图 (AWS architecture diagram)：
Azure 架构图 (Azure architecture diagram)：
猫咪素描图 (Cat sketch prompt)：
Next AI Draw.io的简介
Next AI Draw.io 是一个基于 Next.js 的 Web 应用程序，它将人工智能能力与 draw.io 图表深度集成。该应用允许用户通过自然语言命令和AI 辅助可视化来创建、修改和增强图表。它旨在提供一个 AI 驱动的图表创建工具，支持聊天、绘图和可视化功能。
GitHub地址：https://github.com/DayuanJiang/next-ai-draw-io
1、特点
该项目具备以下核心特点：
>> LLM 驱动的图表创建 (LLM-Powered Diagram Creation)：利用大型语言模型（LLM）直接通过自然语言命令创建和操作 draw.io 图表。
>> 基于图像的图表复制 (Image-Based Diagram Replication)：用户可以上传现有图表或图片，AI 将自动复制并增强它们。
>> PDF 和文本文件上传 (PDF & Text File Upload)：支持上传 PDF 文档和文本文件，以提取内容并从现有文档生成图表。
>> AI 推理过程显示 (AI Reasoning Display)：对于支持的模型（如 OpenAI o1/o3, Gemini, Claude 等），可以查看 AI 的思考过程。
>> 图表历史记录 (Diagram History)：提供全面的版本控制，跟踪所有更改，允许用户在 AI 编辑之前查看和恢复图表的先前版本。
>> 交互式聊天界面 (Interactive Chat Interface)：与 AI 进行实时沟通，以优化和完善图表。
>> 云架构图支持 (Cloud Architecture Diagram Support)：专门支持生成云架构图，包括 AWS、GCP 和 Azure。
>> 动画连接器 (Animated Connectors)：在图表元素之间创建动态和动画连接器，以实现更好的可视化效果。
>> 多提供商支持 (Multi-Provider Support)：支持多种 AI 提供商，包括 AWS Bedrock、OpenAI、Anthropic、Google AI、Azure OpenAI、Ollama、OpenRouter、DeepSeek 和 SiliconFlow。除了 AWS Bedrock 和 OpenRouter 外，所有提供商都支持自定义端点。
Next AI Draw.io的安装和使用方法
1、安装
Next AI Draw.io 提供了多种使用和安装方式。
2、使用方法
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：克隆仓库：
bash git clone https://github.com/DayuanJiang/next-ai-draw-io cd next-ai-draw-io步骤 2：安装依赖：
bash 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：运行开发服务器：
bash npm run dev步骤 5：在浏览器中打开 http://localhost:3000。
部署 (Deployment)：
最简单的部署方式是使用 Next.js 官方推荐的 Vercel 平台。
确保在 Vercel 控制台中设置与本地 .env.local 文件中相同的环境变量。
Next AI Draw.io的案例应用
项目提供了一些示例提示词及其生成的图表，展示了其强大的功能：
动画转换器连接器 (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. (给我画一只可爱的猫。)
这些案例展示了该应用如何通过自然语言命令，结合特定图标和动画效果，生成各种复杂的架构图和简单的示意图。