AI驱动的图表生成器Next-AI-Draw.io
简介
什么是 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 模式。
将原始的内容
importtype{ NextConfig }from"next";const nextConfig: NextConfig ={/* config options here */};exportdefault nextConfig;改为下面这样，确保其中包含 output: 'standalone' 配置
importtype{ NextConfig }from"next";const nextConfig: NextConfig ={/* config options here */ output:'standalone',};exportdefault 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，所以设为openaiOPENAI_API_KEY：sk-xxxxxxxxxxxx改为自己的API keyOPENAI_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:3000environment:- 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/
