前言

在日常工作与学习中，流程图、架构图、思维导图早已成为不可或缺的工具，而 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
或者自己下载客户端-免部署使用
next-ai-draw-io的windows/MAC客户端下载

我部署的
demo

示例

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

提示1：

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

变压器架构

提示2：

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

提示3：

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

提示4：

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

提示5：

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

提示6：

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

部署方法

使用Docker安装

本教程使用docker的方式安装部署,简单便捷
164b6ac419e23bc5390dc46601a202bf

准备条件

1）一台服务器

我们使用莱卡云VPS和飞牛云NAS来演示

需要vps的可以看以下信息配置,可以参考以下资源占用情况
莱卡云官网

本期docker容器占用资源情况如下仅供参考不到100M

2）本项目使用到的项目

本教程使用的官方dockerhub地址
https://github.com/DayuanJiang/next-ai-draw-io

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.2docker-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

有任何问题可以直接留言或者问我
有任何问题可以直接留言或者问我
有任何问题可以直接留言或者问我

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

目录CONTENT

飞牛NAS/VPS使用docker部署基于AI的画图软件next-ai-draw-io

前言

特征

官网

示例