十分钟搭建一个 AI 驱动的图表生成器——Next-AI-Draw.io｜好玩儿的 Docker 项目-我不是咕咕鸽

1. 唠嗑

好久没更新了，这周来和大家分享一个 AI 驱动的图表生成器——Next-AI-Draw.io

2. Next-AI-Draw.io 简介

Next-AI-Draw.io 是一个集成了 AI 功能的 Next.js 网页应用，与 draw.io 图表无缝结合。通过自然语言命令和 AI 辅助可视化来创建、修改和增强图表。

功能特性

LLM 驱动的图表创建：利用大语言模型通过自然语言命令直接创建和操作 draw.io 图表
基于图像的图表复制：上传现有图表或图像，让 AI 自动复制和增强
PDF 和文本文件上传：上传 PDF 文档和文本文件，提取内容并从现有文档生成图表
AI 推理过程显示：查看支持模型的 AI 思考过程（OpenAI o1/o3、Gemini、Claude 等）
图表历史记录：全面的版本控制，跟踪所有更改，允许您查看和恢复 AI 编辑前的图表版本
交互式聊天界面：与 AI 实时对话来完善您的图表
云架构图支持：专门支持生成云架构图（AWS、GCP、Azure）
动画连接器：在图表元素之间创建动态动画连接器，实现更好的可视化效果

3. 相关地址

官方 GitHub 地址：https://github.com/DayuanJiang/next-ai-draw-io （目前 13k 个 star，欢迎大家去给项目点星星！）

Demo 地址：https://next-ai-drawio.jiang.jp/

当然如果你体验完还想自己用 docker 搭建一个，那我们就继续往下！

4. 搭建环境

服务器：咕咕这边用的香港的莱卡云服务器，建议服务器内存 1G 以上，当然你也可以选择其他高性价比的服务器。
系统：Debian 11 （DD 脚本非必需 DD，用原来的系统也 OK，之后教程都是用 Debian 或者 Ubuntu 搭建～）
安装好 Docker、Docker-compose（相关脚本）
【必需】域名一枚，并做好解析到服务器上（域名购买、域名解析视频教程）
【非必需】提前安装好宝塔面板海外版本 aapanel，并安装好 Nginx（安装地址）
【非必需本教程选用】安装好 Nginx Proxy Manager（相关教程）

5. 搭建视频（过俩周补充 = =）

5.1 YouTube

视频地址：

5.2 哔哩哔哩

哔哩哔哩：

6. 搭建方式

6.1 安装 Docker 与 Nginx Proxy Manager

可以直接参考这篇内容：

https://blog.laoda.de/archives/nginxproxymanager/

6.2 创建安装目录

创建一下安装的目录：

sudo -i

mkdir -p /root/data/docker_data/drawioai

cd /root/data/docker_data/drawioai

接着我们来编辑下docker-compose.yml

vim docker-compose.yml

name: nextaidrawio
services:
    next-ai-draw-io:
        ports:
            - 3001:3000
        env_file:
            - .env
        image: ghcr.io/dayuanjiang/next-ai-draw-io:latest

其中的左边的3001可以改成服务器上没有用过的端口。

修改完成之后，可以在英文输入法下，按 i 修改，完成之后，按一下 esc，然后 :wq 保存退出。

接着我们来编辑下.env

cd /root/data/docker_data/drawioai
vim .env

粘贴如下内容：

# AI Provider Configuration
# AI_PROVIDER: Which provider to use
# Options: bedrock, openai, anthropic, google, azure, ollama, openrouter, deepseek, siliconflow, gateway
# Default: bedrock
AI_PROVIDER=bedrock

# AI_MODEL: The model ID for your chosen provider (REQUIRED)
AI_MODEL=global.anthropic.claude-sonnet-4-5-20250929-v1:0

# AWS Bedrock Configuration
# AWS_REGION=us-east-1
# AWS_ACCESS_KEY_ID=your-access-key-id
# AWS_SECRET_ACCESS_KEY=your-secret-access-key
# Note: Claude and Nova models support reasoning/extended thinking
# BEDROCK_REASONING_BUDGET_TOKENS=12000  # Optional: Claude reasoning budget in tokens (1024-64000)
# BEDROCK_REASONING_EFFORT=medium        # Optional: Nova reasoning effort (low/medium/high)

# OpenAI Configuration
# OPENAI_API_KEY=sk-...
# OPENAI_BASE_URL=https://api.openai.com/v1  # Optional: Custom OpenAI-compatible endpoint
# OPENAI_ORGANIZATION=org-...  # Optional
# OPENAI_PROJECT=proj_...      # Optional
# Note: o1/o3/gpt-5 models automatically enable reasoning summary (default: detailed)
# OPENAI_REASONING_EFFORT=low   # Optional: Reasoning effort (minimal/low/medium/high) - for o1/o3/gpt-5
# OPENAI_REASONING_SUMMARY=detailed  # Optional: Override reasoning summary (none/brief/detailed)

# Anthropic (Direct) Configuration
# ANTHROPIC_API_KEY=sk-ant-...
# ANTHROPIC_BASE_URL=https://your-custom-anthropic/v1
# ANTHROPIC_THINKING_TYPE=enabled            # Optional: Anthropic extended thinking (enabled)
# ANTHROPIC_THINKING_BUDGET_TOKENS=12000     # Optional: Budget for extended thinking in tokens

# Google Generative AI Configuration
# GOOGLE_GENERATIVE_AI_API_KEY=...
# GOOGLE_BASE_URL=https://generativelanguage.googleapis.com/v1beta  # Optional: Custom endpoint
# GOOGLE_CANDIDATE_COUNT=1                   # Optional: Number of candidates to generate
# GOOGLE_TOP_K=40                            # Optional: Top K sampling parameter
# GOOGLE_TOP_P=0.95                          # Optional: Nucleus sampling parameter
# Note: Gemini 2.5/3 models automatically enable reasoning display (includeThoughts: true)
# GOOGLE_THINKING_BUDGET=8192                # Optional: Gemini 2.5 thinking budget in tokens (for more/less thinking)
# GOOGLE_THINKING_LEVEL=high                 # Optional: Gemini 3 thinking level (low/high)

# Azure OpenAI Configuration
# Configure endpoint using ONE of these methods:
#   1. AZURE_RESOURCE_NAME - SDK constructs: https://{name}.openai.azure.com/openai/v1{path}
#   2. AZURE_BASE_URL - SDK appends /v1{path} to your URL
# If both are set, AZURE_BASE_URL takes precedence.
# AZURE_RESOURCE_NAME=your-resource-name
# AZURE_API_KEY=...
# AZURE_BASE_URL=https://your-resource.openai.azure.com/openai  # Alternative: Custom endpoint
# AZURE_REASONING_EFFORT=low                 # Optional: Azure reasoning effort (low, medium, high)
# AZURE_REASONING_SUMMARY=detailed

# Ollama (Local) Configuration
# OLLAMA_BASE_URL=http://localhost:11434/api  # Optional, defaults to localhost
# OLLAMA_ENABLE_THINKING=true                 # Optional: Enable thinking for models that support it (e.g., qwen3)

# OpenRouter Configuration
# OPENROUTER_API_KEY=sk-or-v1-...
# OPENROUTER_BASE_URL=https://openrouter.ai/api/v1  # Optional: Custom endpoint

# DeepSeek Configuration
# DEEPSEEK_API_KEY=sk-...
# DEEPSEEK_BASE_URL=https://api.deepseek.com/v1  # Optional: Custom endpoint

# SiliconFlow Configuration (OpenAI-compatible)
# Base domain can be .com or .cn, defaults to https://api.siliconflow.com/v1
# SILICONFLOW_API_KEY=sk-...
# SILICONFLOW_BASE_URL=https://api.siliconflow.com/v1  # Optional: switch to https://api.siliconflow.cn/v1 if needed

# Vercel AI Gateway Configuration
# Get your API key from: https://vercel.com/ai-gateway
# Model format: "provider/model" e.g., "openai/gpt-4o", "anthropic/claude-sonnet-4-5"
# AI_GATEWAY_API_KEY=...

# Langfuse Observability (Optional)
# Enable LLM tracing and analytics - https://langfuse.com
# LANGFUSE_PUBLIC_KEY=pk-lf-...
# LANGFUSE_SECRET_KEY=sk-lf-...
# LANGFUSE_BASEURL=https://cloud.langfuse.com  # EU region, use https://us.cloud.langfuse.com for US

# Temperature (Optional)
# Controls randomness in AI responses. Lower = more deterministic.
# Leave unset for models that don't support temperature (e.g., GPT-5.1 reasoning models)
# TEMPERATURE=0

# Access Control (Optional)
# ACCESS_CODE_LIST=your-secret-code,another-code

# Draw.io Configuration (Optional)
# NEXT_PUBLIC_DRAWIO_BASE_URL=https://embed.diagrams.net  # Default: https://embed.diagrams.net
# Use this to point to a self-hosted draw.io instance

# PDF Input Feature (Optional)
# Enable PDF file upload to extract text and generate diagrams
# Enabled by default. Set to "false" to disable.
# ENABLE_PDF_INPUT=true
# NEXT_PUBLIC_MAX_EXTRACTED_CHARS=150000  # Max characters for PDF/text extraction (default: 150000)

这里头有很多选项可以开启，当然你也可以不管它，到网页端输入，这样的话就保存在本地浏览器里了，如果在这边输入，所有知道这个网址的人都能用你的 AI 模型。

假设我们用的 OPEN AI 的，其实.env里面只要这仨：

AI_PROVIDER=openai
AI_MODEL=gpt-4o
OPENAI_API_KEY=your_api_key

your_api_key改成你的 API 密钥。

修改完成之后，可以在英文输入法下，按 i 修改，完成之后，按一下 esc，然后 :wq 保存退出。

6.3 查看端口是否被占用

查看端口是否被占用（以 3001 为例），输入：

lsof -i:3001  #查看 3001 端口是否被占用，如果被占用，重新自定义一个端口

如果啥也没出现，表示端口未被占用，我们可以继续下面的操作了～

如果出现：

-bash: lsof: command not found

运行：

apt install lsof  #安装 lsof

如果端口没有被占用（被占用了就修改一下端口，比如改成 8381，注意 docker 命令行里和防火墙都要改）

6.4 启动 drawioai

cd /root/data/docker_data/drawioai

docker compose up -d   # 注意，老版本用户用 docker-compose up -d

耐心等待拉取好镜像，出现 done的字样之后，

理论上我们就可以输入 http://ip:3001 访问了。

但是我们部署在公网一定要考虑使用反向代理工具配置 SSL！

做反向代理前，你需要一个域名！

namesilo 上面 xyz 后缀的域名一年就 7 块钱，可以年抛。（冷知识，namesilo 上 6 位数字的 xyz 续费永远都是 0.99 美元 = =）

如果想要长期使用，还是建议买 com 后缀的域名，更加正规一些，可以输入 laodade 来获得 1 美元的优惠（不知道现在还有没有）

namesilo 自带隐私保护，咕咕一直在用这家，价格也是这些注册商里面比较低的，关键是他家不像其他家域名注册商，没有七七八八的套路！（就是后台界面有些丑古老 = =）

【域名购买】Namesilo 优惠码和域名解析教程（附带服务器购买推荐和注意事项）

我们接着往下看！

7. 反向代理

7.1 利用 Nginx Proxy Manager

在添加反向代理之前，确保你已经完成了域名解析，不会的可以看这个：域名一枚，并做好解析到服务器上（域名购买、域名解析视频教程）（名称改成你自己想要的域名前缀即可）

之后，登陆 Nginx Proxy Manager（不会的看这个：安装 Nginx Proxy Manager（相关教程））

注意：

Nginx Proxy Manager（以下简称 NPM）会用到 80、443 端口，所以本机不能占用（比如原来就有 Nginx）

直接丢几张图：

注意填写对应的 域名、IP 和 端口，按文章来的话，应该是 3001

IP 填写：

如果 Nginx Proxy Manager 和 drawioai 在同一台服务器上，可以在终端输入：

ip addr show docker0

查看对应的 Docker 容器内部 IP。

否则直接填 drawioai 所在的服务器 IP 就行。

然后访问域名就可以访问了！

7.2 利用宝塔面板

发现还是有不少小伙伴习惯用宝塔面板，这边也贴一个宝塔面板的反代配置：

直接新建一个站点，不要数据库，不要 php，纯静态即可。

然后打开下面的配置，修改 Nginx 的配置。

代码如下：

location / {
      proxy_pass http://127.0.0.1:3001/;       # 注意改成你实际使用的端口
      rewrite ^/(.*)$ /$1 break;
      proxy_redirect off;
      proxy_set_header Host $host;
      proxy_set_header X-Forwarded-Proto $scheme;
      proxy_set_header X-Real-IP $remote_addr;
      proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
      proxy_set_header Upgrade-Insecure-Requests 1;
      proxy_set_header X-Forwarded-Proto https;
    }

此方法对 90% 的反向代理都能生效，然后就可以用域名来安装访问了。

有同学可能会问，为什么不直接用宝塔自带的反向代理功能。

也可以，不过咕咕自己之前遇到过当有多个网站需要反代的时候，在这边设置会报错的情况 = =

所以后来就不用了，直接用上面的方法来操作了。

8. 使用教程

非常简单，所见即所得。

登录页，

语言设置，改成中文，

简单展示

右边可以输入提示词，比如让它画一只猫猫，

画的熊猫不太像……

当然你也可以隐藏掉这个提示词输入框，把它当成一个普通的画图软件来用，

如果用默认的，其实是用的项目作者的 API，速率可能会有限制，当然用自己的 API 就没有这个问题了，如果手上富裕，也可以考虑捐赠作者，支持开源项目长久发展。

8.1 更新 drawioai

这个项目后续会持续有更新，所以提供一个更新的方式。

cd /root/data/docker_data/drawioai

docker compose pull

docker compose up -d    # 请不要使用 docker compose stop 来停止容器，因为这么做需要额外的时间等待容器停止；docker compose up -d 直接升级容器时会自动停止并立刻重建新的容器，完全没有必要浪费那些时间。

docker image prune  # prune 命令用来删除不再使用的 docker 对象。删除所有未被 tag 标记和未被容器使用的镜像

提示：

WARNING! This will remove all dangling images.
Are you sure you want to continue? [y/N]

输入 y

利用 Docker 搭建的应用，更新非常容易～

8.2 卸载 drawioai

同样进入安装页面，先停止所有容器。

cd /root/data/docker_data/drawioai

docker compose down

cd ..

rm -rf /root/data/docker_data/drawioai  # 完全删除

可以卸载得很干净。

9. 使用问题

那个保存按钮点了似乎没有任何反馈……

不过画的图导出是没问题的。

大家使用上有什么心得或者问题，欢迎评论区交流～

10. 结尾

祝大家用得开心，有问题可以去 GitHub 提 Issues，也可以在评论区互相交流探讨。

同时，有能力给项目做贡献的同学，也欢迎积极加入到项目中来，贡献自己的一份力量！

最后，感谢作者 @DayuanJiang 的辛苦付出，让我们能用到这么优秀的项目！欢迎大家都去给这个项目点个 star。

参考资料

官方 GitHub：https://github.com/DayuanJiang/next-ai-draw-io