前言

在日常生活和工作中，流程图、架构图以及思维导图早已成为不可或缺的助手。而 draw.io（现更名为 diagrams.net）凭借其开源、免费且功能强大的特性，始终是众多用户首选的绘图平台。

然而，传统绘图方式仍有一个明显短板：需要手动拖拽元素、逐步搭建，效率不高。随着 AI 技术的迅猛发展，这一现状正在被彻底颠覆。

今天要介绍的这款项目——next-ai-draw-io，正是在此背景下应运而生。它基于 Next.js 构建，将 AI 能力深度整合进 draw.io 图表系统中，让“用语言画图”的愿景成为现实。

借助这个项目，你可以：

🧠 通过自然语言直接生成流程图、架构图
✨ 借助 AI 自动优化和补全图表结构
⚡ 快速修改、扩展现有图形，大幅提高效率
🌐 在浏览器中完成所有操作，无需复杂客户端

对于运维工程师、开发者以及自媒体创作者而言，这不仅仅是一个绘图工具，更是一个生产力倍增器。

本教程将带领你在飞牛 NAS 或 VPS 环境中，通过 Docker 一键部署 next-ai-draw-io，快速搭建属于你自己的 AI 绘图平台 🚀

特征

• 利用大型语言模型创建图表：通过自然语言指令直接创建和操作 draw.io 图表
• 基于图像的图表复制：上传现有图表或图像，让 AI 自动复制并增强它们
• PDF 和文本文件上传：上传 PDF 文档和文本文件，从现有文档中提取内容并生成图表
• AI 推理显示：查看支持的模型（如 OpenAI o1/o3、Gemini、Claude 等）的 AI 思维过程
• 图表历史记录：提供全面的版本控制功能，可追踪所有更改，支持查看和恢复 AI 编辑前的图表版本
• 交互式聊天界面：与 AI 实时互动，持续优化图表内容
• 云架构图支持：支持生成 AWS、GCP、Azure 等云架构图
• 动态连接线：在图表元素之间创建动态动画连接线，提升可视化效果

官网

官方demo
如果不想自行部署，可以直接使用官方的演示版本
或者下载客户端，免去部署步骤直接使用

我部署的版本
demo

示例

以下是一些示例提示及其对应的生成图表：

提示1：

给我一个变压器架构的**动画连接器**图。

提示2：

生成一个包含**GCP图标**的GCP架构图。在此图中，用户连接到托管在实例上的前端。

提示3：

生成一个包含**AWS图标**的AWS架构图。在此图中，用户连接到托管在实例上的前端。

提示4：

画一个家庭标准的网络拓扑图，要求有实体logo，字体汉字，整体有条例，并且有动画效果

提示5：

画一个电商卖货，退货流程，要求有logo,字体汉字，有动画效果
，条例清晰

提示6：

帮我画一幅网络架构图用来展示nginx的负载均衡功能，最好是动态的，更直观,各个server之间是如何数据同步的也展示出来

部署方法

使用Docker安装

本教程采用 Docker 方式进行安装部署，操作简单便捷

准备条件

1）一台服务器

我们将使用莱卡云 VPS 和飞牛云 NAS 进行演示。

需要 VPS 的用户可以参考以下信息配置，资源占用情况如下
莱卡云官网

本期 Docker 容器的资源占用情况如下（仅供参考，不到 100M）

2）本项目使用到的项目

本教程使用的官方 Docker Hub 地址

3).自行准备大模型 API

（本教程以硅基流动的免费 API 方法作为体验演示
还有其他多个平台提供免费的 API 可供使用）
例如智谱实名认证用户也可获得 2000 万 tokens 的体验包


有兴趣的可以自行获取
硅基流动为新用户提供 2000 万免费 tokens
我们打开
硅基流动官网
注册好账号

这是我的邀请码

FDAbEsxU

登录成功后，需要完成实名认证才能成功领取

点击认证，使用支付宝扫码认证即可

使用各种 API 时，默认直接扣抵用金

申请 API 密钥，以备后续使用

有多种大模型 API 可供选择

硅基流动的 URL 地址如下，后面会用到
API Base URL

https://api.siliconflow.cn/v1

4）域名（可选）

根据个人需求决定

① VPS部署

一、Docker环境部署

在 VPS 上安装 Docker 和 Docker-Compose
Docker 官方安装文档（英文）
https://duan.yyzq.eu.org/docker-001
Docker-Compose 官方安装文档（英文）
https://duan.yyzq.eu.org/docker-002
CentOS 安装 Docker 和 Docker-Compose（中文）
https://duan.yyzq.eu.org//03
Ubuntu 安装 Docker 和 Docker-Compose（中文）
https://duan.yyzq.eu.org//04

推荐直接使用一键脚本

Docker 安装脚本

bash <(curl -sSL https://cdn.jsdelivr.net/gh/SuperManito/LinuxMirrors@main/DockerInstallation.sh)

Docker-Compose 安装脚本

curl -L "https://github.com/docker/compose/releases/latest/download/docker-compose-$(uname -s)-$(uname -m)" -o /usr/local/bin/docker-compose && chmod +x /usr/local/bin/docker-compose

二、部署命令

登录服务器，使用 root 账户执行以下步骤

2.2 Docker-Compose 命令

创建一个目录，并进入该目录

mkdir  next-ai-draw-io ;cd next-ai-draw-io

然后新建 docker-compose.yml 文件

vim docker-compose.yml

services:
  next-ai-draw-io:
    image: ghcr.io/dayuanjiang/next-ai-draw-io:latest  # 使用最新的 next-ai-draw-io 镜像
    ports:
      - "3210:3000"  # 映射容器的 3000 端口到主机的 3210 端口
    environment:
      - AI_PROVIDER=openai  # 设置 AI 提供者为 OpenAI
      - AI_MODEL=gpt-4o  # 设置 AI 模型为 gpt-4o
      - OPENAI_API_KEY=你的API Key  # 设置 OpenAI API 密钥
      - TZ=Asia/Shanghai  # 设置时区为上海时间
    restart: always  # 容器崩溃时自动重启

关于默认的模型，我们也可以不填写，直接在网页上手动输入模型名称即可

三、执行容器运行命令

docker-compose up -d #运行容器

docker-compose ps  #查看是否启动成功

正常启动后效果如下所示

docker-compose ps
NAME                                IMAGE                                        COMMAND                  SERVICE           CREATED       STATUS       PORTS
next-ai-draw-io-next-ai-draw-io-1   ghcr.io/dayuanjiang/next-ai-draw-io:latest   "docker-entrypoint.s…"   next-ai-draw-io   5 hours ago   Up 5 hours   0.0.0.0:3210->3000/tcp, [::]:3210->3000/tcp

四、Web 界面

打开 Web 页面进行访问
成功启动后，需要开放相应的端口（3210），并在防火墙中进行设置，即可通过 Web 端访问

主界面

http://ip:3210

打开 Web 页面后，需要自行配置 AI 大模型，然后即可使用

如果需要动态图片，记得导出为 SVG 格式

② 飞牛云 NAS 部署

我们直接复制上述 VPS 的 Compose 配置即可

启动成功

然后在浏览器中输入 NAS 的 IP 地址加上端口号 3210，即可打开界面
其他配置与 VPS 上完全一致

绑定域名

建议在 VPS 上绑定域名，以便于管理。
绑定域名的教程请参考以下内容

绑定域名视频教程

B 站

YouTube

绑定域名可以参考
NginxProxyManager
https://duan.yyzq.eu.org//npm-ch

有任何问题可以直接留言或向我咨询
有任何问题可以直接留言或向我咨询
有任何问题可以直接留言或向我咨询

欢迎关注我们的微信公众号！