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

# 暴露端口
EXPOSE3000

# 设置 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)AnthropicGoogle AIAzure OpenAIOllama

不同的模型能力存在差异，有条件的可以试试 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: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.
地址：https://github.com/DayuanJiang/next-ai-draw-io

Next AI Draw.io - AI-Powered Diagram Generator
地址：https://next-ai-draw-io.vercel.app/

@所有人：写文不易，如果你都看到了这里，请点个赞和在看，分享给更多的朋友；为确保你能收到每一篇文章，请主页右上角设置星标。