Next AI Draw.io：AI 驱动的智能图表绘制工具

Smoothcloud_润云
0 阅读3分钟

Next AI Draw.io：AI 驱动的智能图表绘制工具

项目简介

在当今 AI 技术飞速发展的背景下，Next AI Draw.io 是一个基于 Next.js 的 AI 驱动图表创建工具。

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

相关地址：

🚀 快速部署指南

在线体验

无需安装，可直接访问 演示网站。您可以在聊天面板的设置中配置自己的 API 密钥以绕过使用限制，密钥仅存储在浏览器本地。

桌面应用

可从 GitHub Releases 页面下载 Windows、macOS 或 Linux 的本地桌面应用。

Docker 一键部署（推荐）

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

# 使用 OpenAI GPT-4o 模型
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 部署

services:
  next-ai-draw-io:
    image: ghcr.io/dayuanjiang/next-ai-draw-io:latest
    container_name: next-ai-draw-io
    restart: unless-stopped
    ports:
      - "3100:3000"
    environment:
      - AI_PROVIDER=openai
      - AI_MODEL=kimi-k2-turbo-preview   # 模型名称
      - OPENAI_BASE_URL=https://api.moonshot.cn/v1 # 模型地址（如使用 Kimi）
      - OPENAI_API_KEY=_API_KEY # api key

启动命令：

docker-compose up -d

访问 http://<服务器IP>:<端口> 即可使用。

源码安装部署

  1. 克隆仓库并安装依赖：

    git clone https://github.com/DayuanJiang/next-ai-draw-io
cd next-ai-draw-io
npm install
cp env.example .env.local

  2. 配置环境变量（参考下文 支持的 AI 服务商）。

  3. 运行开发服务器：

    npm run dev

  4. 在浏览器中打开 http://localhost:6002。

🎨 使用示例

创建系统流程图

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

绘制网络拓扑

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

复制和优化现有图表 上传现有的架构图或设计草图，AI 会自动：

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

🔌 支持的 AI 服务商

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

服务商推荐模型特点
AnthropicClaude 3.5 Sonnet对 AWS 图表特别优化，逻辑推理能力强
OpenAIGPT-4o, GPT-4 Turbo通用性强，响应速度快
Google AIGemini 2.0多模态能力强
DeepSeekDeepSeek-R1 / V3.2性价比高，中文支持好
Ollama本地模型数据安全，完全离线
Azure OpenAIGPT-4企业级合规需求
ByteDance DoubaoK2-thinking由字节跳动豆包提供 API 赞助
AWS Bedrock(默认)
OpenRouter

通用配置： 如果你使用的模型兼容 OpenAI API 格式但不在上述列表中，可以使用以下通用配置：

AI_PROVIDER=openai
AI_MODEL=你的模型名称
OPENAI_BASE_URL=你的模型 API 地址
OPENAI_API_KEY=你的 api key

💡 使用技巧

  1. 提供明确的需求 越详细的描述，AI 生成的图表越精准。包括：

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

  2. 利用版本历史 每次 AI 修改都会创建新的版本，你可以：

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

  3. 渐进式优化 先让 AI 生成基础框架，然后通过对话逐步优化，例如：

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

🛠️ 开发者进阶

项目架构

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 工具集。
avatar
文章
阅读
粉丝