跳到主要内容
极客日志极客日志面向AI+效率的开发者社区
首页博客我的书AI学习GitHub 精选镜像AI工具UI配色美学关于
搜索内容 / 工具 / 仓库 / 镜像...⌘K搜索
注册
博客列表
TypeScriptNode.jsAI大前端

Next AI Draw.io 简介、安装与使用指南

介绍 Next AI Draw.io,一款集成 AI 能力的 Web 绘图工具。支持自然语言生成图表、图像复制、文档解析及云架构图绘制。提供在线试用、Docker 及本地安装方式,兼容多种 AI 模型。包含 Transformer 架构、AWS/GCP/Azure 架构图等案例展示,适用于技术文档可视化需求。

山野来信发布于 2026/3/28更新于 2026/10/21101 浏览
Next AI Draw.io 简介、安装与使用指南

Next AI Draw.io 简介

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 . ghcr.io/dayuanjiang/next-ai-draw-io:latest
env

步骤 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 架构图。)

Transformer Architecture

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. (给我画一只可爱的猫。)

这些案例展示了该应用如何通过自然语言命令,结合特定图标和动画效果,生成各种复杂的架构图和简单的示意图。

目录

  1. Next AI Draw.io 简介
  2. 特点
  3. 安装和使用方法
  4. 安装
  5. 使用方法
  6. T1、在线试用 (Try it Online)
  7. T2、使用 Docker 运行 (推荐)
  8. T3、本地安装 (Installation)
  9. 案例应用
  10. 动画转换器连接器 (Animated transformer connectors)
  11. GCP 架构图 (GCP architecture diagram)
  12. AWS 架构图 (AWS architecture diagram)
  13. Azure 架构图 (Azure architecture diagram)
  14. 猫咪素描图 (Cat sketch prompt)

更多推荐文章

查看全部
  • 构建基于 Agent 的 GitHub 自动化工作流实战指南
  • 大模型产品经理面试指南:AIGC 核心概念与高频问题解析
  • 基于 Whisper-large-v3 的多语言翻译系统开发
  • 大模型微调技术分类与 LoRA 实践指南
  • Android 开发中 Kotlin 架构演进:从 MVC 到 MVVM
  • AKSHARE 结合 AI 的金融数据爬取与分析实践
  • Google AI Studio 创建 GitHub 仓库权限不足错误解决
  • 大语言模型智能体 (LLM Agents) 核心原理与实战指南
  • 无人机视角山区泥石流与滑坡图像识别数据集
  • OpenAI Whisper 模型版本详解及官方下载链接
  • 2015 款 MacBook Pro 运行最新 macOS 技术指南
  • Git 核心操作命令速查手册
  • SpringBoot 自动配置原理深度解析与实战
  • Qt 与 Web 混合编程:CEF 与 QCefView 深度解析
  • AI 编程工具 Codex 全面上手指南
  • FPGA 工程应用经验解析:软件程序与通信协议
  • 二叉树算法实战:美国血统与公共祖先求解
  • Kubernetes Ingress Webhook 验证机制:原理与故障排查
  • 华为 OD 机考真题解析:挑选宝石问题(多语言实现)
  • 利用腾讯云 HAI 与 DeepSeek 快速构建个人网页

相关免费在线工具

  • RSA密钥对生成器

    生成新的随机RSA私钥和公钥pem证书。 在线工具,RSA密钥对生成器在线工具,online

  • Mermaid 预览与可视化编辑

    基于 Mermaid.js 实时预览流程图、时序图等图表,支持源码编辑与即时渲染。 在线工具,Mermaid 预览与可视化编辑在线工具,online

  • 随机西班牙地址生成器

    随机生成西班牙地址(支持马德里、加泰罗尼亚、安达卢西亚、瓦伦西亚筛选),支持数量快捷选择、显示全部与下载。 在线工具,随机西班牙地址生成器在线工具,online

  • Base64 字符串编码/解码

    将字符串编码和解码为其 Base64 格式表示形式即可。 在线工具,Base64 字符串编码/解码在线工具,online

  • Base64 文件转换器

    将字符串、文件或图像转换为其 Base64 表示形式。 在线工具,Base64 文件转换器在线工具,online

  • Markdown转HTML

    将 Markdown(GFM)转为 HTML 片段,浏览器内 marked 解析;与 HTML转Markdown 互为补充。 在线工具,Markdown转HTML在线工具,online