Next AI Draw.io：draw.io 的 AI fork，畫布在本機、生圖走雲端

Facebook Line Messenger Telegram

Next AI Draw.io 是開源的 AI 架構圖產生器，把自然語言 prompt 直接轉成可編輯的 draw.io 圖檔。它本身是 draw.io 的 fork（Apache-2.0 授權），加上一層 AI 生圖能力。要判斷它適不適合你團隊自架，最關鍵的一條邊界要先講清楚：draw.io 的畫布編輯是本機的（繼承自 draw.io），AI 生圖則是雲端的，你的 BYOK API key 雖然只存在瀏覽器、不落地伺服器，但每次生圖都會以 request header 傳到你自己的 Next.js 伺服器，再由 Vercel AI SDK 呼叫你選的 LLM 供應商。「key 不存伺服器」與「AI 處理在雲端」這兩句同時為真，這條邊界決定了它能不能放進你的合規框架。

下面我會用倉庫原始碼與官方 README 釐清三件讀者最常搞混的事：它跟 draw.io 到底是什麼關係、API key 與你的繪圖內容實際流到哪裡、預設到底用哪個模型。需要先說明的是，我這次只讀了原始碼與文件、沒有實際 clone 跑起來生圖，所以文中只講能力存在與架構事實，不替它的產圖品質或速度背書。

它跟 draw.io 的關係：fork 加 AI 層，不是新引擎

很多人把 Next AI Draw.io 想成「用 AI 重寫的畫圖工具」，但從倉庫描述與 README 的 fork 標示來看，它直接基於 draw.io，保留了原本的畫布、圖形庫與 XML 格式，再在上面接一層用 Vercel AI SDK 驅動的 AI 生圖。這件事對採用決策有兩個直接影響：一方面，draw.io 既有的編輯能力、匯出格式、模板都還在，團隊的學習成本與資料可攜性等同 draw.io；另一方面，AI 生出來的圖是標準 draw.io XML，可以接著手改，不是只能看不能動的圖片。對已經把 draw.io 嵌進文件流程的團隊，這代表不需要換工具、只是多一個產圖入口，移植風險很低。

把兩者放在一起比，差異會清楚很多：

面向	draw.io（原版）	Next AI Draw.io
定位	手動繪圖編輯器	draw.io fork ＋ AI 自然語言生圖
產圖方式	拖拉圖形	輸入 prompt 生成可編輯圖，再手改
模型依賴	無	需自帶或由管理員設定 LLM 供應商
預設供應商	不適用	AWS Bedrock（Claude 系列）
雲端架構圖支援	手動放 logo	主打 AWS／GCP／Azure 模板生成
授權	Apache-2.0	Apache-2.0（fork 保留）

資料來源：Next AI Draw.io GitHub README 與 draw.io 官方文件，整理於 2026 年 8 月。

換句話說，它沒有要取代 draw.io 的編輯器定位，而是在 draw.io 之上多開一條「用講的把圖生出來」的入口。會手畫的人可以繼續手畫，需要快速起草雲端架構圖的人則多了一個 AI 產圖入口。

BYOK 的兩層邊界：key 只存瀏覽器，但 AI 處理走雲端

這是整個工具最容易被誤解的地方，也是評估時最該看的一條誠實軸。README 明確寫著「你的 key 存在本機瀏覽器，永遠不會被存在伺服器上」，這句話屬實，但只講了一半。我把倉庫裡 app/api/chat/route.ts 這支伺服器端 API 打開來看，AI 請求的流程是這樣的：

使用者在瀏覽器設定 BYOK provider 與 key，key 留在瀏覽器端。
每次生圖時，key 透過 request header（x-ai-api-key，AWS Bedrock 則是 x-aws-access-key-id 與 x-aws-secret-access-key 一組）送到你自架的 Next.js 伺服器。
伺服器用 Vercel AI SDK 的 streamText 在伺服器端呼叫你選的 LLM 供應商，再把串流結果傳回瀏覽器渲染成 draw.io 圖。

所以真正的邊界是兩層拆開看的：key 的「儲存」確實在本機、伺服器不落地；但 key 的「使用」與你輸入的 prompt（也就是你想畫的架構描述）都會經過你的伺服器、再送到外部模型。這跟那種 key 與內容端到端都在瀏覽器裡、完全不過伺服器的純前端工具是不同等級的。如果你在找的是運算過程絕對不離開本機的方案，可以參考我們整理過的 osaurus 這類本機 AI agent，兩者的隱私邊界剛好落在不同位置。

這條邊界對自架場景特別重要。當你把 Next AI Draw.io 部署在自己的伺服器或 Vercel 上，等於由你這端扮演中繼：使用者的 prompt 先進你的伺服器、再轉給 LLM 供應商，生成的 draw.io XML 再原路傳回。也就是說，機敏的架構描述會短暫出現在你的伺服器記憶體與日誌範圍裡（取決於你怎麼設日誌），合規評估時要把這一跳算進去，而不能只用「key 不存伺服器」就當成全程本機。

另外還有一條容易被忽略：README 寫到管理員可以用 AI_MODELS_CONFIG 環境變數或 ai-models.json 設定「共享伺服器端模型」，讓使用者不必自帶 key。這對應到 route.ts 裡的 server-model 查找邏輯，此時 key 存的是伺服器環境變數（apiKeyEnv），責任與成本都落在管理員身上。所以團隊部署有兩種模式可選：每人 BYOK、或管理員統一一把 key，後者要算清楚誰扛帳單與合規責任。

預設是 AWS Bedrock Claude，不是 OpenAI

文件裡 Docker 範例常出現 OpenAI，容易讓人以為預設就是 OpenAI，但 README 的 multi-provider 清單把 AWS Bedrock 列為預設，對應模型是 global.anthropic.claude-sonnet-4-5。這對台灣讀者有兩個實際影響：一是想用預設最省事，但你得另外開 AWS Bedrock 帳號、處理區域與計費；二是如果組織對特定雲端供應商有合規偏好，這個預設值得在部署前先調整。

官方 demo 站走的路線又不一樣。README 註明 demo 使用 glm-4.7 模型，而這個 demo 的 token 用量由字節跳動旗下的 Doubao（火山引擎）贊助。這是一個需要誠實標出來的利益關係：你看到的線上 demo 不是預設的 Bedrock 配置，而是贊助商模型的呈現，自己架出來的結果會因為你選的模型不同而有差異。

供應商選擇算豐富，README 列出的支援名單涵蓋 AWS Bedrock、OpenAI、Anthropic、Google、Vertex AI、Azure OpenAI、Ollama、OpenRouter、DeepSeek、SiliconFlow，以及豆包、GLM、智譜、通義千問、Kimi、MiMo 等中國系模型，加起來近二十個。要注意的是 AWS Bedrock 與 OpenRouter 兩個不支援自訂 endpoint，其餘供應商都可以指定自己的 endpoint。如果你想完全走本機模型，可以接 Ollama，但那就不是預設、需要自己切換。

有一段 README 的說明要小心引用。原文是「claude 系列模型已經在 draw.io 圖表上訓練、含 AWS／Azure／GCP 雲端架構 logo，因此最適合畫雲端架構圖」。這句話指的是 Anthropic 的 Claude 模型本身的訓練特性，是作者的模型選擇建議，不是說這個工具自己被拿去訓練過。要逐字理解才不會誤以為 Next AI Draw.io 內建了某個專屬模型。

自架起手：env 檔名與 port 容易踩的小坑

部署管道不少，README 列出 Docker（ghcr.io/dayuanjiang/next-ai-draw-io:latest）、Vercel 一鍵部署、騰訊 EdgeOne Pages、Cloudflare Workers，以及 Windows／macOS／Linux 的 Electron 桌面版。門檻不高，但有兩個文件細節容易踩坑，值得先記下來：

環境範本檔叫 env.example（沒有前綴點），複製指令是 cp env.example .env.local，不是常見的 .env.example。
本機開發的 port 是 6002（http://localhost:6002），文件裡出現的 3000 是 Docker container 內部 port，不是本機 dev 預設值。

部署到 Vercel 時，README 提醒要把 .env.local 裡的環境變數同步到 Vercel 後台，這對 BYOK 邊界很重要：因為 AI 呼叫本來就過伺服器，部署平台的 serverless 函式設定（例如 Vercel 的 maxDuration）會直接影響生圖能不能在逾時內完成，原始碼裡 chat route 的 maxDuration 設為 120 秒，可作為預期上限的參考。

環境變數本身有兩條思路。如果走管理員統一設定，README 提供兩種寫法：把多個模型用 JSON 字串寫進 AI_MODELS_CONFIG，或在 ai-models.json 檔裡列；只接單一供應商時，也可以把模型 ID 用逗號分隔塞進 AI_MODEL。如果走每人 BYOK，這些伺服器端變數可以不設，讓使用者在聊天面板的設定圖示裡自己填 provider 與 key。兩種模式可以混用，但混用時要先把「誰出錢、誰扛日誌責任」想清楚，這通常是一人團隊最容易忽略的部署細節。

MCP server：把生圖嵌進 Claude Code 與 Cursor

除了網頁與桌面版，這個專案還提供 MCP server（Model Context Protocol），套件是 @next-ai-drawio/mcp-server，可以接 Claude Desktop、Cursor 與 VS Code。用法是一行指令：claude mcp add drawio -- npx @next-ai-drawio/mcp-server@latest，之後就能在編輯器裡用自然語言請 AI 畫圖。對已經把 AI 編輯器當日常工具的開發者，等於多了一個可直接呼叫的繪圖節點，不需要切換到瀏覽器。如果你對 MCP 工具的實際玩法有興趣，可以搭配我們寫過的 Browserwing 這類 MCP 瀏覽器自動化一起看，兩者把 MCP 接到不同用途。

同樣要誠實講：MCP 的整合體驗我沒有實際跑過，這裡只陳述 README 與 npm 套件表明存在的能力，能不能穩定嵌進你的工作流要自己驗證。

會改變結論的幾條限制

把工具放進正式評估前，有幾條限制會實際影響你的判斷。維護結構方面，到 2026 年 8 月初為止，這個專案在 GitHub 有約 34,464 顆星、3,713 個 fork，18 個 release、最新版 v0.4.16（2026-05-21），最近一次 commit 在 2026 年 8 月，看得出活躍，但作者是單人維護（Dayuan Jiang，東京），長期延續性是必須接受的變數，這也是大多數明星開源工具共同的風險。

模型門檻也值得算進去。README 自己也說明，產出 draw.io XML 是「需要強模型能力的長文格式受限任務」，推薦的模型是 Claude Sonnet 4.5、GPT-5.1、Gemini 3 Pro 與 DeepSeek V3.2／R1 這個等級，這代表用便宜小模型自架，產圖成功率很可能不如預期，選模型時要把帳單與能力一起算進去。

demo 站的用量追蹤是另一條。原始碼裡有一套以 AWS DynamoDB 為基礎的配額管理（dynamo-quota-manager），demo 會記錄使用次數與 token 用量，自帶 key 才會繞過配額。換句話說，公開 demo 不是無限免費，自架時這套配額邏輯要不要開、怎麼設上限，是管理員要另外決定的事。

議題樣貌我另外翻過倉庫 issues，目前沒有集中在可靠性或 AWS logo 顯示錯誤的 bug 叢集，多數是功能請求（例如 diagram-engine、主題、pnpm 支援、Electron 自動更新），整體屬於「持續在長功能」而非「在救火」的狀態。這不算背書，但至少不是一堆人回報生圖壞掉的訊號。

適合誰，與自架的第一步

綜合上面的邊界，這個工具比較適合：已經在用 draw.io、想用 AI 加速起草雲端架構圖的開發團隊；願意自己開 LLM 供應商帳號、且能接受「prompt 會過伺服器送到外部模型」這條雲端邊界的人。相對地，如果你的需求是處理機敏架構、要求運算全程不離開本機，那它雲端生圖這一層就不符，要嘛接 Ollama 自己繞、要嘛改看真正端到端本機的方案，例如前面提到的 osaurus，或我們整理過的 Coworker 這種開源 AI 桌面 agent。

想自己跑跑看，最直接的起手式是官方 Docker image：docker pull ghcr.io/dayuanjiang/next-ai-draw-io:latest，跑起來後到設定面板填入你的供應商與 key，先用一個明確的雲端架構 prompt（例如「generate authentication process using React with AWS, use serverless architecture」）驗證生圖流程，再決定要不要往下整合。下圖是官方示範的 AI 產出結果，左邊是 AWS 認證流程、右邊是 RAG 架構，可以參考它實際畫出來的樣子。

Next AI Draw.io 官方示範：用 prompt 生成 AWS 認證流程的 draw.io 架構圖 — 官方 README 示範輸出（Authentication Architecture Diagram，prompt 指定 React ＋ AWS Serverless）。來源：dayuanjiang/next-ai-draw-io 倉庫。

Next AI Draw.io 官方示範：用 prompt 生成 RAG 檢索增強生成架構的 draw.io 圖 — 官方 README 示範輸出（RAG Architecture Diagram）。來源：dayuanjiang/next-ai-draw-io 倉庫。

三個讀者常問的問題

它跟 draw.io 是什麼關係，會取代 draw.io 嗎？ 它是 draw.io 的 fork，保留了 draw.io 的編輯器與 XML 格式，再增加 AI 自然語言生圖。兩者是疊加關係，draw.io 既有的手繪、模板、匯出功能都還在，AI 只是多一個產圖入口，不會取代原本的編輯流程。

我的 API key 會被作者伺服器存下來嗎？ 以原始碼來看，BYOK 的 key 只存在你的瀏覽器，伺服器端不落地儲存；但每次生圖時 key 會以 request header 傳到你自架的 Next.js 伺服器、再由伺服器呼叫 LLM 供應商。所以「不落地儲存」為真，「不經過伺服器」不成立，這條邊界在合規評估時要分清楚。

可以完全離線、用本機模型跑嗎？ 可以接 Ollama 走本機模型，但那不是預設、要自己切換供應商。而且即使接 Ollama，AI 呼叫仍然過 Next.js 伺服器這一層（只是供應商端點在本機），並不是純前端工具。要做到運算完全不過伺服器，這個工具的架構並不保證。

一句話總結：Next AI Draw.io 把 draw.io 變成「會聽人話畫圖」的版本，畫布編輯留在本機、AI 生圖交給雲端，自架前把這條邊界和你願意用的模型算清楚，它就會是個實用的 AI 架構圖起點；反過來說，如果機敏架構要求全程本機，它的雲端生圖層就是你要先排除的那一塊。