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

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 模式。

将原始的内容

ts 复制代码

import type { NextConfig } from "next";  
  
const nextConfig: NextConfig = {  
  /* config options here */  
};  
  
export default nextConfig;

改为下面这样，确保其中包含 output: 'standalone' 配置

ts 复制代码

import type { NextConfig } from "next";  
  
const nextConfig: NextConfig = {  
  /* config options here */  
  output: 'standalone',  
};  
  
export default nextConfig;

构建和运行

构建镜像和容器运行的基本命令如下👇

bash 复制代码

# 下载代码
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 更快捷

bash 复制代码

# 运行容器
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 文件

yaml 复制代码

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 登录到您的群晖，执行下面的命令：

bash 复制代码

# 新建文件夹 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/