简介
什么是 Next-AI-Draw.io ？
Next-AI-Draw.io 是一个开源的、支持自托管的在线绘图应用。它结合了传统绘图工具的灵活性和人工智能的强大能力，让你不仅可以自由创作流程图、线框图、思维导图，还能通过 AI 指令一键生成内容，极大地提升了创作效率。
主要特点
- LLM 驱动的图表创建：利用大型语言模型（LLM）通过自然语言命令直接创建和操作 draw.io 图表。
- 基于图像的图表复制：上传现有图表或图像，让 AI 自动复制并增强它们。
- 图表历史记录：全面的版本控制，跟踪所有更改，允许您查看和恢复图表的先前版本。
- 交互式聊天界面：与 AI 进行交流，实时优化您的图表。
- AWS 架构图支持：专门支持生成 AWS 架构图。
- 动画连接器：在图表元素之间创建动态和动画连接器，以实现更好的可视化效果。
- 多模型支持：支持多个 AI 提供者（如 AWS Bedrock、OpenAI 等），用户可以根据需要选择不同的模型。
应用场景
- 头脑风暴：快速记录和组织团队的想法，利用 AI 扩展创意。
- 软件设计：绘制系统架构图、UML 图和数据库模型。
- 产品原型：创建低保真线框图和用户流程图。
- 项目管理：制作流程图和甘特图，可视化项目进度。
- 个人笔记：将笔记和想法以思维导图的形式组织起来。
Next AI Draw.io 是一个功能强大且灵活的工具，用户可以使用 AI 技术有效地创建和编辑专业图表。
构建镜像
如果你不想自己构建，可以跳过，直接阅读下一章节
Dockerfile
官方没有提供 Docker 镜像，下面是老苏基于源代码，在 AI 协助下构建的 Dockerfile
# 阶段 1: 依赖安装与构建
# 这个阶段安装所有依赖（包括 devDependencies）来构建项目
FROM node:20-alpine AS deps
WORKDIR /app
# 复制 package.json 和 lock 文件
COPY package*.json ./
# 安装所有依赖
RUN npm ci
# —————————————————————-
# 阶段 2: 构建阶段
# 这个阶段使用上一步安装的依赖来构建应用
FROM node:20-alpine AS builder
WORKDIR /app
# 从 'deps' 阶段复制 node_modules
COPY –from=deps /app/node_modules ./node_modules
# 复制源码
COPY . .
# 确保 next.config.js 中已设置 output: 'standalone'
# 构建应用
RUN npm run build
# —————————————————————-
# 阶段 3: 运行时阶段
# 这是最终运行应用的最小化镜像
FROM node:20-alpine AS runner
WORKDIR /app
# 设置生产环境变量
ENV NODE_ENV=production
# Next.js 在 standalone 模式下会自动设置 HOSTNAME 为 0.0.0.0
# 创建非 root 用户以提升安全性
RUN addgroup –system –gid 1001 nodejs
RUN adduser –system –uid 1001 nextjs
USER nextjs
# 从构建阶段复制 standalone 输出
# standalone 目录包含了所有运行应用所需的文件
COPY –from=builder –chown=nextjs:nodejs /app/.next/standalone ./
# 复制 public 和 .next/static 目录
COPY –from=builder –chown=nextjs:nodejs /app/public ./public
COPY –from=builder –chown=nextjs:nodejs /app/.next/static ./.next/static
# 暴露端口
EXPOSE 3000
# 设置 Next.js 默认端口
ENV PORT 3000
# 启动服务器
# standalone 模式会生成一个 server.js 入口文件
CMD ["node", "server.js"]
next.config.ts
除此之外，还需要修改项目根目录下的 next.config.ts 文件，因为上面的 Dockerfile 依赖 Next.js 的 standalone 模式。
将原始的内容
import type { NextConfig } from "next";
const nextConfig: NextConfig = {
/* config options here */
};
export default nextConfig;
改为下面这样，确保其中包含 output: 'standalone' 配置
import type { NextConfig } from "next";
const nextConfig: NextConfig = {
/* config options here */
output: 'standalone',
};
export default nextConfig;
构建和运行
构建镜像和容器运行的基本命令如下👇
# 下载代码
git clone https://github.com/DayuanJiang/next-ai-draw-io.git
# 进入目录
cd next-ai-draw-io
# 构建镜像
docker build -t wbsu2003/next-ai-draw-io:v1 .
# 运行容器
docker run -d \\
–restart unless-stopped \\
–name next-ai-draw-io \\
-p 3164:3000 \\
-e AI_PROVIDER=openai \\
-e AI_MODEL=deepseek-ai/DeepSeek-V3.2-Exp \\
-e OPENAI_BASE_URL=https://api.siliconflow.cn/v1 \\
-e OPENAI_API_KEY=sk-xxxxxxxxxxxx \\
wbsu2003/next-ai-draw-io:v1
准备
Next-AI-Draw.io 支持主流的大模型
- AWS Bedrock (default)
- OpenAI / OpenAI-compatible APIs (via OPENAI_BASE_URL)
- Anthropic
- Google AI
- Azure OpenAI
- Ollama
不同的模型能力存在差异，有条件的可以试试 claude-sonnet-4-5 或者 claude-opus-4-5，判别的标准很简单，就是让它画一只猫
本文还是以 硅基流动 为例：
- AI_PROVIDER：硅基流动 为 OpenAI-compatible，所以设为 openai
- OPENAI_API_KEY： sk-xxxxxxxxxxxx 改为自己的 API key
- OPENAI_BASE_URL： https://api.siliconflow.cn/v1 是
- AI_MODEL： 可以试了 deepseek-ai/DeepSeek-V3.2-Exp ，因为比较便宜
目前硅基流动（SiliconFlow），注册就送 2000 万 Tokens，虽然不是免费，但也够用一阵子的
注册地址：
https://cloud.siliconflow.cn/i/NkUiXVhQ
如果你使用的不是 硅基流动，环境变量可以参考官方的 https://github.com/DayuanJiang/next-ai-draw-io/blob/main/env.example 文件
安装
在群晖上以 Docker 方式安装。
在注册表中搜索 wbsu2003 ，翻页、下拉找到 wbsu2003/next-ai-draw-io，版本选择 latest。
本文写作时， latest 版本对应的软件版本为 v0.2.0；
端口
本地端口只要不与现有端口冲突即可。
| 3164 | 3000 |
环境
为了让 AI 功能正常工作，老苏提供了一个 OpenAI 兼容的 API 服务，详细说明参考上一个章节
| AI_PROVIDER | openai | 必须。你的大语言模型提供商，支持 bedrock, openai, anthropic, google, azure, ollama, openrouter |
| AI_MODEL | deepseek-ai/DeepSeek-V3.2-Exp | 必须。你使用的大语言模型 |
| OPENAI_API_KEY | sk-xxxxxxxxxxxx | 必须。你的大语言模型的密钥 |
| OPENAI_API_BASE_URL | https://api.openai.com/v1 | 可选。如果你使用第三方代理或自建的 API 服务，请修改此地址。 |
命令行安装
如果你熟悉命令行，可能用 docker cli 更快捷
# 运行容器
docker run -d \\
–restart unless-stopped \\
–name next-ai-draw-io \\
-p 3164:3000 \\
-e AI_PROVIDER=openai \\
-e AI_MODEL=deepseek-ai/DeepSeek-V3.2-Exp \\
-e OPENAI_BASE_URL=https://api.siliconflow.cn/v1 \\
-e OPENAI_API_KEY=sk-xxxxxxxxxxxx \\
wbsu2003/next-ai-draw-io
也可以用 docker-compose 安装，将下面的内容保存为 docker-compose.yml 文件
version: '3'
services:
next-ai-draw-io:
image: wbsu2003/next–ai–draw–io
container_name: next–ai–draw–io
restart: unless–stopped
ports:
– 3164:3000
environment:
– AI_PROVIDER=openai
– AI_MODEL=deepseek–ai/DeepSeek–V3.2–Exp
– OPENAI_BASE_URL=https://api.siliconflow.cn/v1
– OPENAI_API_KEY=sk–xxxxxxxxxxxx
然后通过 SSH 登录到您的群晖，执行下面的命令：
# 新建文件夹 next-ai-draw-io 和 子目录
mkdir -p /volume1/docker/next-ai-draw-io
# 进入 next-ai-draw-io 目录
cd /volume1/docker/next-ai-draw-io
# 将 docker-compose.yml 放入当前目录
# 一键启动
docker-compose up -d
运行
在浏览器中输入 http://群晖IP:3164 就能看到应用主界面
如果遇到加载失败（像下图一样，一直转圈），重新刷新一下页面
画一个登录的流程图
绘制过程
绘制完成
关闭侧边的聊天窗口后，和 Draw.io 是一样的
最后看看 deepseek-ai/DeepSeek-V3.2-Exp 画的猫
参考文档
DayuanJiang/next-ai-draw-io: A next.js web application that integrates AI capabilities with draw.io diagrams. This app allows you to create, modify, and enhance diagrams through natural language commands and AI-assisted visualization. 地址：https://github.com/DayuanJiang/next-ai-draw-io
Next AI Draw.io – AI-Powered Diagram Generator 地址：https://next-ai-draw-io.vercel.app/
