Next AI Draw.io
總覽
next-ai-draw-io 是一個開源的 Next.js 網頁應用程式，它結合了大型語言模型 (LLMs) 的強大功能與廣泛使用的繪圖工具 draw.io。它使用戶能夠透過聊天介面輸入自然語言指令，即可輕鬆創建、修改和增強專業圖表 — 無需手動拖放。
該專案旨在彌合對話式 AI 與視覺圖表創建之間的差距，讓開發人員、架構師和非技術用戶都能在幾秒鐘內輕鬆生成高品質圖表。
主要功能
🧠 由 LLM 驅動的圖表創建
用戶可以用簡單的英文（或其他語言）描述他們想要的內容，AI 會自動生成對應的 draw.io XML 圖表。指令可以從簡單的請求，如「繪製流程圖」，到複雜的請求，如「生成一個包含負載平衡器、EC2 實例和 RDS 資料庫的 AWS 架構」。
🖼️ 圖像式圖表複製
用戶可以上傳現有的圖表圖像或螢幕截圖，AI 將會分析並將其複製為可編輯的 draw.io 圖表。這對於數位化手繪草圖或重新創建文件中的圖表特別有用。
📜 圖表版本歷史
圖表的每一次變更都會被追蹤。用戶可以瀏覽完整的版本歷史記錄並恢復到任何先前狀態，為實驗 AI 生成的修改提供安全網。
💬 互動式聊天介面
即時聊天面板允許用戶迭代地完善他們的圖表。用戶可以說「讓箭頭動起來」或「添加一個連接到 API 伺服器的資料庫節點」，圖表就會相應更新。
☁️ 雲端架構支援
該工具專門支援為主要雲端供應商生成架構圖：
- AWS (使用官方 AWS 圖標)
- GCP (使用 GCP 圖標)
- Azure (使用 Azure 圖標)
🎨 動態連接器
支援創建圖表節點之間動態、動畫效果的連接器，使圖表更具表現力和視覺吸引力。
技術堆疊
| 技術 | 角色 |
|---|---|
| Next.js 15 | 前端框架與 API 路由 |
| TypeScript | 型別安全程式碼庫 |
| Vercel AI SDK | 流式 AI 回應、多供應商抽象 |
| react-drawio | 圖表渲染與操作 |
| Tailwind CSS + shadcn/ui | UI 組件與樣式 |
| Docker | 容器化部署 |
多供應商 LLM 支援
該應用程式抽象了 LLM 供應商的配置，允許用戶接入以下任何一種：
- AWS Bedrock (預設)
- OpenAI / OpenAI 相容 API
- Anthropic (Claude)
- Google AI (Gemini)
- Azure OpenAI
- Ollama (本地 LLM)
- OpenRouter
- DeepSeek
注意：特別推薦使用
claude-sonnet-4-5來生成 AWS 架構圖，因為它已經在包含 AWS 標誌的 draw.io 圖表上進行了訓練。
專案結構
app/
api/chat/ # 包含 AI 工具調用的聊天 API 端點
page.tsx # 主要應用程式頁面
components/
chat-panel.tsx # 聊天 UI 與圖表控制
chat-input.tsx # 支援檔案上傳的輸入框
history-dialog.tsx # 版本歷史檢視器
ui/ # 可重複使用的 UI 組件
contexts/
diagram-context.tsx # 全域圖表狀態管理
lib/
ai-providers.ts # 多供應商 AI 配置
utils.ts # XML 處理工具
public/ # 靜態資源與演示 SVG
開始使用
使用 Docker 快速啟動
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
然後在瀏覽器中打開 http://localhost:3000。
手動安裝
# 克隆儲存庫
git clone https://github.com/DayuanJiang/next-ai-draw-io
cd next-ai-draw-io
# 安裝依賴
npm install
# 配置環境
cp env.example .env.local
# 在 .env.local 中編輯您的 AI 供應商設定
# 運行開發伺服器
npm run dev
部署到 Vercel
點擊下方按鈕或遵循 Next.js 部署文件：
使用案例範例
| 提示 | 輸出 |
|---|---|
| "給我一個變壓器架構的動畫連接器圖。" | 帶有動畫連接器的變壓器架構圖 |
| "生成一個帶有 GCP 圖標的 GCP 架構圖。" | 完整的 GCP 雲端架構 SVG |
| "生成一個帶有 AWS 圖標的 AWS 架構圖。" | 帶有官方圖標的 AWS 雲端架構 |
| "生成一個帶有 Azure 圖標的 Azure 架構圖。" | Azure 雲端架構圖 |
| "為我畫一隻可愛的貓。" | draw.io 格式的插畫貓圖 |