一句話生成拓?fù)鋱D！AI+Draw.io 封神開(kāi)源組合，工具讓你的效率爆炸 前言

作為天天跟架構(gòu)圖、拓?fù)鋱D死磕的技術(shù)人，誰(shuí)沒(méi)為畫一張規(guī)范的圖表頭禿過(guò)？手動(dòng)拖拽組件、調(diào)整布局、對(duì)齊線條，動(dòng)輒半小時(shí)起步，要是需求改了還得推倒重來(lái) —— 直到我挖到 next-ai-draw-io 這個(gè)寶藏開(kāi)源項(xiàng)目，直接把 AI 塞進(jìn)了 Draw.io，一句話就能生成復(fù)雜圖表，舊圖截圖還能秒變可編輯文件，徹底解放雙手！

如果你沒(méi)有大模型API，本篇文章星哥再推薦兩個(gè)免費(fèi)獲取大模型的渠道，還請(qǐng)多多點(diǎn)贊。。。

了解next-ai-draw-io

一個(gè)集成了AI功能的Next.js網(wǎng)頁(yè)應(yīng)用，與draw.io圖表無(wú)縫結(jié)合。通過(guò)自然語(yǔ)言命令和AI輔助可視化來(lái)創(chuàng)建、修改和增強(qiáng)圖表。

效果如下圖：

前期準(zhǔn)備

搭建next-ai-draw-io需要準(zhǔn)備

1. 1. 一臺(tái)服務(wù)器或者NAS

2. 2. 安裝了Docker 或者Docker compose

3. 3. 有自己申請(qǐng)的大模型API

1. 1. 開(kāi)源項(xiàng)目：GPT_API_free

2. 2. openrouter提供的免費(fèi)接口

獲取免費(fèi)的OpenAI的key： https://github.com/chatanywhere/GPT_API_free，限制：有的模型每天只有5次，可以選擇deepseek。

可以參考星哥之前寫的文章，申請(qǐng)一個(gè)KEY，大模型名稱“openai/gpt-oss-20b:free”或者其他。deepseek/deepseek-r1-distill-llama-70b:free[不能用了]

模型要求：此任務(wù)需要強(qiáng)大的模型能力，因?yàn)樗婕吧删哂袊?yán)格格式約束的長(zhǎng)文本（draw.io XML）。推薦使用Claude Sonnet 4.5、GPT-4o、Gemini 2.0和DeepSeek V3/R1。

注意：claude-sonnet-4-5 已在帶有AWS標(biāo)志的draw.io圖表上進(jìn)行訓(xùn)練，因此如果您想創(chuàng)建AWS架構(gòu)圖，這是最佳選擇。

安裝next-ai-draw-io

安裝next-ai-draw-io有很多種，這里星哥就采用最簡(jiǎn)單的docker方式，如果想繼續(xù)可以參考開(kāi)源項(xiàng)目：https://github.com/DayuanJiang/next-ai-draw-io/blob/main/docs/README_CN.md

1.準(zhǔn)備

建立目錄，編輯配置文件

                                                           mkdir -p /data/docker/ai-draw
cd /data/docker/ai-draw
wget https://raw.githubusercontent.com/DayuanJiang/next-ai-draw-io/refs/heads/main/env.example
mv env.example .env
編輯
vim .env
這步可以忽略，等鏡像成功之后，可以在設(shè)置中填寫。
# 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


 改成
OPENAI_API_KEY= 
 <你申請(qǐng)的免費(fèi)的key>
_BASE_URL=https://api.chatanywhere.tech/v1 #(國(guó)內(nèi))
OPENAI_BASE_URL=https://api.chatanywhere.org/v1 #(國(guó)外)

                                                           docker run -d -p 3000:3000 --env-file .env ghcr.io/dayuanjiang/next-ai-draw-io:latest


 或者：
docker run -d -p 3000:3000 \
  -e AI_PROVIDER=openai \
  -e AI_MODEL=gpt-4o \
  -e OPENAI_API_KEY=your_api_key \
  ghcr.io/dayuanjiang/next-ai-draw-io:latest 

ip+端口訪問(wèn)，如下圖

設(shè)置大模型并生成圖

點(diǎn)擊右上角的設(shè)置按鈕

如圖，設(shè)置Provider、Model ID、API Key、 Base URL

輸入之后，再到對(duì)話框中，填入自己想要的生成的網(wǎng)絡(luò)圖、拓?fù)鋱D等。

發(fā)號(hào)施令

左側(cè)生成的圖片

使用OepnRouter再試試。

最后

對(duì)技術(shù)人來(lái)說(shuō)，工具的核心價(jià)值就是 “把時(shí)間花在核心邏輯上，而非重復(fù)勞動(dòng)”。next-ai-draw-io 恰好戳中了圖表創(chuàng)作的痛點(diǎn)，用 AI 降低了專業(yè)圖表的創(chuàng)作門檻，而且基于 Docker 部署在自己的服務(wù)器 / NAS 上，數(shù)據(jù)不跑路，用著更放心。

如果你也經(jīng)常跟各類圖表打交道，真心建議試試這個(gè)項(xiàng)目，相信我，會(huì)打開(kāi)新世界的大門～ 覺(jué)得好用的話，別忘了給作者點(diǎn)個(gè) star 支持下開(kāi)源！

GitHub 地址：https://github.com/DayuanJiang/next-ai-draw-io