DayuanJiang/next-ai-draw-io

📌 用自然語言畫圖：Next AI Draw.io 讓 AI 直接生成 draw.io 流程圖

TL;DR：整合 LLM 與 draw.io 的 Next.js 應用，可透過對話直接生成、修改與視覺化複雜系統架構圖。

還在為了畫一張系統架構圖，在 draw.io 裡反覆拖拉方塊與連線線嗎？如果能用一句話「生成一個 React 與 AWS 的 Serverless 認證流程圖」，AI 直接幫你排版完成，開發效率將大幅提升。

🧩 將 LLM 的理解力轉化為視覺化圖表

Next AI Draw.io 是一個基於 Next.js 開發的 Web 應用，其核心理念是將大型語言模型 (LLM) 的自然語言處理能力與 draw.io 的圖表繪製能力結合。使用者不需要手動操作圖形介面，而是透過自然語言指令來建立、修改或強化圖表。

💡 從 Transformer 到 RAG，多樣化的生成範例

根據專案提供的範例，該工具能處理從技術架構到簡單草圖的不同需求：

• 複雜技術架構：例如生成具有「動畫連線線 (animated connector)」的 Transformer 架構圖，或針對聊天應用的 RAG 技術流程圖。
• 雲端部署流程：例如使用 React 與 AWS 實作的 Serverless 認證流程。
• 理論模型視覺化：例如將 Henry Chesbrough 的「開放創新 (Open Innovation)」模型視覺化。
• 非技術繪圖：甚至能根據指令畫出一隻可愛的貓。

🛠️ 靈活的部署與模型支援

該專案提供了極高的部署靈活性與模型擴充套件性，方便開發者快速搭建自己的繪圖服務：

• 多平臺部署：支援 Vercel、Cloudflare Workers 以及 EdgeOne Pages。
• 容器化部署：提供 Docker 支援，方便在私有伺服器執行。
• 模型配置：支援多模型配置 (Multi-Model Configuration) 與伺服器端多提供者支援 (Multi-Provider Support)。值得注意的是，目前的 Demo 站點由字節跳動 (ByteDance) 贊助，使用 glm-4.7 模型。
• 擴充套件能力：專案中提及包含 MCP Server 與 Claude Code CLI 的整合。

🎯 實務啟示

對於 AI 工程師或系統設計師來說，這類工具的價值在於「快速原型化」。在設計階段，先用自然語言快速產出初步架構圖，再透過 draw.io 的介面進行微調，能大幅縮短從「想法」到「視覺化檔案」的距離。

🔗 來源

• 標題：next-ai-draw-io
• 作者／機構：DayuanJiang
• 連結：https://github.com/DayuanJiang/next-ai-draw-io

#AI #Nextjs #drawio #LLM #DataVisualization #RAG #AWS #OpenSource #SystemDesign #Productivity