安卿辰博客前言
在日常生活和工作中，流程图、架构图以及思维导图早已成为不可或缺的助手。而 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
示例
以下是一些示例提示及其对应的生成图表：
提示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 地址
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.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
有任何问题可以直接留言或向我咨询
有任何问题可以直接留言或向我咨询
有任何问题可以直接留言或向我咨询
欢迎关注我们的微信公众号！
