要畫一張流程圖或系統架構圖，最花時間的常常不是想清楚邏輯，而是跟工具搏鬥。一個框一個框慢慢拉、箭頭接來接去，好不容易排整齊，主管一句「這裡順序調一下」，整張圖又得重排。next-ai-draw-io 想解決的就是這件事：你用打字把想要的圖描述出來，AI 直接幫你在 draw.io 裡生出來，畫得不滿意、想改，再補一句話叫它改就好，不用自己回去拉線。
next-ai-draw-io 到底是什麼
next-ai-draw-io（GitHub 帳號 DayuanJiang）是一個把 AI 接進 draw.io 的網頁 app。draw.io 大家應該不陌生，就是那個免費、很多人拿來畫流程圖跟架構圖的線上工具。這個專案做的事情很單純：在 draw.io 上面加一層對話框，讓你不用一格一格手動拉，改成用自然語言（講人話）描述你要的圖，AI 幫你畫、也幫你改。
它用 Next.js 寫成，程式語言是 TypeScript，2025 年 3 月才開的專案，採 Apache-2.0 授權，商用、自架都可以。開出來沒多久就在 GitHub 衝破 3.3 萬顆星，以一個「做圖工具」來說，這個熱度算是相當誇張，也看得出來很多人真的被手動畫圖煩到了。
它能做什麼
- 打字生流程圖、架構圖：把要的圖用一段話描述，AI 直接生成一張可編輯的 draw.io 圖，不是一張死圖片。
- 上傳現有圖或截圖來重畫：丟一張既有的圖或圖片進去，讓 AI 照著結構重建成可以繼續編輯的版本。
- 接續修改：圖生出來後直接在對話框補一句「把這個節點搬到左邊」「多加一條失敗的回頭箭頭」，它就在原圖上改。
- 讀 PDF、文字檔生圖：丟一份文件進去，讓它抓內容幫你整理成圖，適合把一段流程說明快速視覺化。
- 雲端架構圖：內建 AWS、GCP、Azure 的圖示，畫雲端架構這種題目特別順手。
- 匯出多種格式：draw.io 本身支援 PNG、JPEG、SVG、PDF，也能匯出原始 draw.io XML 檔，方便丟回別的工具接著改。
- 可以自架：不想用線上 demo，可以自己 clone 下來跑，官方也有 Windows、macOS、Linux 桌面版可下載。
怎麼開始用（實操）
- 先玩官方 demo 試手感。最快的方式是直接開作者架好的線上版 next-ai-drawio.jiang.jp，不用安裝，打開就能打字畫圖，先確認這個路子適不適合你再說。
- 要無限用、或不想把內容丟別人的站，就自架。指令很單純：
git clone專案、cd進資料夾、npm install、把env.example複製成.env.local、再npm run dev，瀏覽器開localhost:6002就跑起來了。 - 填 LLM API key。它支援很多家，OpenAI、Anthropic 的 Claude、Google Gemini、DeepSeek、AWS Bedrock、甚至本地跑的 Ollama 都行，把你手上有的那家金鑰填進
.env.local。官方建議用能力強一點的模型，像 Claude Sonnet 4.5、GPT-5.1、Gemini 3 Pro 或 DeepSeek，因為畫圖背後其實是在生一長串格式很嚴格的 XML，弱模型容易畫壞。用線上 demo 的話，你填的金鑰只存在自己瀏覽器、不會上傳到伺服器。 - 下第一個 prompt 把圖講清楚。在對話框把你要的圖描述具體一點，例如「畫一張使用者註冊流程圖：填資料、寄驗證信、點連結、啟用帳號，驗證失敗要有一條回頭的箭頭」。講得越具體，出來的圖越貼近你想要的。
- 叫它改，別自己動手。圖出來後不滿意，直接打「把驗證那步拆成兩個節點」「整張改成由上到下的方向」，它會在原本那張圖上調整。想玩進階一點，還能透過 MCP 把它接進 Claude Desktop、Cursor、VS Code 裡直接使喚。
| 比較維度 | 手動拉 draw.io | 用 next-ai-draw-io |
|---|---|---|
| 出圖速度 | 從空白畫布一格格拉，簡單的圖也要花好幾分鐘 | 打一段描述，幾秒到幾十秒生出一張草圖 |
| 學習曲線 | 要摸熟圖形、連線、排版那一整套操作 | 會打字把需求講清楚就能開始 |
| 大圖細節 | 自己畫，接線精準、完全可控 | 節點一多容易接錯線，需要回頭手動收尾 |
| 成本 | 免費 | 軟體免費，但要自備 LLM API key，按 token 用量計費 |
誰適合、誠實缺點
適合的人其實很好抓：常要畫系統架構圖、ERD 的工程師，要畫流程圖跟業務流程的 PM，寫文件或做簡報需要配圖的上班族，還有做教學圖的老師。共通點是「圖的邏輯我心裡有數，只是懶得手動拉」。這種情境它幫你省的時間最明顯。
但要講白幾個缺點，先看清楚再決定要不要用：
- 大圖容易畫歪。節點一多，AI 可能接錯箭頭或放錯圖示，作者自己在專案裡也承認會出現「不合邏輯的連線或圖示錯誤」，複雜的圖還是得靠你手動收尾。
- 要自備 API key，會花錢。軟體本身免費，但每次生圖都是在燒你的 API token，用得越兇，帳單就越高，這筆成本要先算進去。
- 自架有技術門檻。要會 clone、跑 npm、設環境變數，不是完全零基礎的人開箱就能弄，怕麻煩就先用線上 demo。
- 細節排版還是手動。AI 幫你把骨架搭好，但間距、對齊、配色這種細活，最後仍要自己回 draw.io 裡調。
- 它的定位是加速起稿，不是取代 draw.io。它讓你從「一片空白」到「一張堪用草圖」變很快，真正精修還是回到 draw.io 本體來做。
結論
說白了，next-ai-draw-io 的價值不在於幫你一次畫出完美的圖，而在於把最痛苦的「從零開始」那一段砍掉。以前對著空白畫布發呆、慢慢拉框的時間，現在打幾句話就換來一張堪用草圖，剩下的微調反而是最輕鬆的部分。如果你三天兩頭要畫流程圖或架構圖，又受夠了手動接線，拿官方 demo 花五分鐘試一輪，大概就知道它能不能幫你省事。它不會取代你對一張圖該長怎樣的判斷，但確實能把你從排版打雜裡放出來。
延伸閱讀
- Dify：開源 LLM 應用開發平台，不會寫程式也能拉出 AI 工作流
- Cline：開源的 Claude Code 替代方案，把 AI 工程師接進 VS Code
- Awesome LLM Apps：上百個 RAG 與 Agent 範例的開源寶庫
- GitHub 熱門開源 AI 專案精選 2026（總表）
※ 本文為工具介紹與使用心得整理，資訊（功能、授權）截至 2026 年 7 月，AI 工具更新極快，star 數與功能請以官方 GitHub 當下為準。文中不含任何投資建議。
發表迴響