用 AI 画流程图、架构图甚至思维导图，现在有了一种更直接的方式——Next-AI-Draw.io。简单来说，它把大型语言模型（LLM）和传统的 draw.io 图表工具结合在了一起，你可以用自然语言直接“指挥”它生成图表，而不需要手动去一个个拖拽图形。

主要特点

这个工具的核心能力集中在几个点上：

• LLM 驱动的图表创建：这是最核心的功能。输入一段文字描述，AI 就能直接生成 draw.io 格式的图表，操作上很像是一个“图表领域的 ChatGPT”。
• 基于图像的图表复制：如果你手头有一张现有的图表截图或者设计图，可以直接上传，让 AI 去理解和复刻，甚至还能在此基础上做优化。
• 完整的图表历史记录：支持版本控制。每一次修改都会被记录，你可以随时回溯到之前的任何一个版本，对于迭代设计来说相当实用。
• 交互式聊天界面：AI 不仅仅是“生成一次就完事”。你可以通过对话的方式跟它实时沟通，对图表进行微调，比如“把第三个框的颜色改成红色”或者“在这两个节点之间加一条虚线箭头”。
• AWS 架构图支持：特别适合做云计算方向的设计，可以直接用自然语言生成 AWS 的架构图，省去了记一堆图标和模板的功夫。
• 动画连接器：能让图表里的连线动起来，对于演示或者汇报场景来说，视觉效果会更直观。
• 多模型支持：不仅限于某一家的大模型。它支持 AWS Bedrock、OpenAI、Anthropic、Google AI、Azure OpenAI 甚至本地的 Ollama，你可以根据自己的需求和预算自由切换。

应用场景

这类工具最适合什么场景？其实还挺广泛的：

• 头脑风暴：团队讨论的时候，快速把想法变成可视化的图表，AI 还能顺着你的思路给你补充一些分支创意。
• 软件设计：绘制系统架构图、UML 图、数据库 ER 图，几乎是程序员的必备场景。
• 产品原型：需要快速画出低保真的线框图或者用户流程图时，不用打开专门的原型工具，这里就能搞定。
• 项目管理：制作流程图、甘特图，用来规划项目进度和任务依赖关系。
• 个人笔记：把自己的读书笔记或者思考过程，用思维导图的形式组织起来。

总的来说，Next-AI-Draw.io 是一个将 AI 与专业图表工具结合的尝试，能让从想法到图表的路径变得非常短。

构建镜像

Dockerfile

官方并没有提供现成的 Docker 镜像，所以需要自己动手。下面是基于源代码构建的 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

Dockerfile 依赖 Next.js 的 standalone 模式，所以还需要修改项目根目录下的 next.config.ts 文件。

原始内容是这样的：

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，因为性价比比较高。

目前硅基流动注册就送 2000 万 Tokens，虽然不是永久免费，但用来测试和轻度使用完全够了。

如果你用的是其他服务商，环境变量可以参照官方仓库的 env.example 文件进行配置。

安装

在群晖上以 Docker 方式安装。在注册表中搜索 wbsu2003，找到 wbsu2003/next-ai-draw-io，版本选择 latest。

端口

本地端口只要不冲突即可。这里将容器的 3000 端口映射到本地的 3164 端口。

环境

为了让 AI 功能正常运作，需要配置环境变量。这里提供了一个 OpenAI 兼容的 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

运行

在浏览器中输入 https://群晖IP:3164 就能看到应用主界面。

如果遇到加载失败（比如一直转圈的情况），尝试刷新一下页面。

输入“画一个登录的流程图”，AI 会开始生成。

绘制过程：

绘制完成：

关闭侧边的聊天窗口后，界面和标准的 Draw.io 几乎一致，可以直接手动编辑。

最后看看 deepseek-ai/DeepSeek-V3.2-Exp 画的猫是什么样的：

参考文档