liujuntao123/smart-excalidraw-next

Smart Excalidraw – AI 驅動的圖表產生器

這是什麼 – 一個網頁應用程式，讓您可以用自然語言描述圖表，並立即獲得一個完全可編輯的 Excalidraw 畫布。它使用大型語言模型 (LLM) 來理解請求、選擇正確的圖表類型，並透過「智慧箭頭」演算法放置元素，避免雜亂的線條交叉。

主要功能

• 自然語言轉圖表 – 輸入如 “draw a user-login flow” 或 “show a micro-service architecture with gateway, auth, and business services”，AI 就會產生整個圖表。
• 20+ 內建圖表樣式 – 流程圖、架構圖、時序圖、ER 圖、心智圖、網路拓撲等。模型也能自動判斷最適合的樣式。
• Excalidraw 原生輸出 – 結果為 Excalidraw JSON，可直接在畫布上編輯、設定樣式或擴充。
• 智慧連接路由 – 專有演算法會自動計算箭頭的最佳錨點，保持佈局整潔。
• 兩種提供 LLM 的方式
  1. 伺服器端 LLM – 管理員可設定 存取密碼 並配置共享的 Anthropic 或 OpenAI 金鑰。使用者只需輸入密碼即可。
  2. 個人 LLM – 使用者可輸入自己的 OpenAI 或 Anthropic API 金鑰並選擇模型（README 建議使用 Claude sonnet-4.5）。
• 隱私優先 – API 金鑰和密碼僅儲存在瀏覽器中（或伺服器端的 .env 檔案）；不會發送至任何第三方後端。

如何嘗試

1. 開啟託管演示 https://ai-draw-nexus.aizhi.site (或本地執行)。
2. 點擊 “配置 LLM” 加入您的 API 金鑰，或若伺服器管理員已提供，請使用 “访问密码” 按鈕。
3. 在輸入框中輸入描述，觀察圖表出現。
4. 在 Excalidraw 畫布上編輯結果 – 移動元素、更改顏色、新增註釋。

自行執行

# clone
git clone <repo-url>
cd smart-excalidraw-next

# install (pnpm recommended)
pnpm install

# start dev server
pnpm dev   # then open http://localhost:3000

若要使用共享 LLM 模式，請將 .env.example 複製為 .env 並填寫：

• ACCESS_PASSWORD
• SERVER_LLM_TYPE (openai 或 anthropic)
• SERVER_LLM_BASE_URL
• SERVER_LLM_API_KEY
• SERVER_LLM_MODEL

技術堆疊 – Next.js 16, React 19, Excalidraw, Tailwind CSS 4, 用於提示框的 Monaco editor。

授權 – MIT。

適用對象 – 產品設計師、工程師、教育工作者，或任何需要快速、乾淨圖表而無需學習繪圖工具的人。AI 處理佈局，讓使用者專注於內容。