Excalidraw:快速畫清關係,也留好可編輯檔案

用瀏覽器畫手繪風格流程圖、關係圖和線框草圖。先從一個小場景開始,把可編輯圖稿與圖片預覽分別保存。

創作者:Excalidraw contributors0.18.12026年10月25日MIT原始碼儲存庫
開啟網站
Web

快速開始

用現代瀏覽器打開 https://excalidraw.com/ ,網頁編輯器無需本地安裝。先放幾個圖形,用箭頭連接並添加標籤;保存可編輯的 .excalidraw 場景,再按需要匯出 PNG 或 SVG 給只需預覽的人。要在 React 應用中整合編輯器,應另讀官方 npm 套件文件;編輯器套件與線上協作服務的功能範圍不同。

先把一件事畫清楚

當幾個方框、箭頭和標籤比一段文字更能說明流程時,Excalidraw 很適合作為起點。官方編輯器支援手繪風格圖形、匯入圖片、形狀庫和 PNG/SVG 匯出。線上網站另有即時協作和瀏覽器本地保存;可嵌入的 React 編輯器套件並不自動包含線上服務的全部功能。

先確定一個問題:哪些步驟或元件需要連起來?只畫這些對象,給箭頭寫清關係,別人看得懂之後再分享預覽。下面的官方手機示例展示圖形和樣式控制,不是一份已經交付的產品設計。

Excalidraw 官方倉庫提供的手機圖形與樣式示例。這是專案配圖,不是 Boloop 的裝置實測,當前介面可能不同。來源:Excalidraw contributors,MIT。
Excalidraw 官方倉庫提供的手機圖形與樣式示例。這是專案配圖,不是 Boloop 的裝置實測,當前介面可能不同。來源:Excalidraw contributors,MIT。 圖片來源

圖片和可編輯圖稿分開保留

PNG 或 SVG 便於查看,.excalidraw 場景檔案則用於繼續編輯,兩者應作為不同的交付物。瀏覽器本地保存很方便,但清理儲存或換裝置時不能只靠它;另存場景檔案並檢查能否重新開啟,會更穩妥。

ToolBrivio Editorial 在 10 月 13 日的瀏覽器使用記錄提供了一個具體但有限的例子:三行分鏡文字修改後,經一次重新整理仍保留,也能複製成 PNG。其檔案下載路徑受到測試瀏覽器的檔案選擇器策略限制。作者沒有完成可編輯場景的保存再開啟,也沒有驗證協作。這份記錄支援簡單文字與預覽的使用場景,不能證明所有環境的所有匯出路徑都可用。

看清版本,也看清場景規模

截至 2026 年 10 月 24 日核對的最新編輯器套件標籤是 v0.18.1,於 4 月 21 日發佈安全修復;這個套件版本不代表持續部署的線上網站版本。issue 12437 中,sethmart15-34 用約 3000 個元素的場景比較 Electron/Chromium 整合,報告 next 建構 0.18.0-17d8904 的平移(panning)和框內自由繪製比 0.18.1 慢。問題仍未關閉,這是該使用者特定環境的報告,不能當作所有 Excalidraw 部署的效能結論。

如果你要快速解釋一個流程或畫線框草圖,易上手的畫布和開放場景格式值得考慮;如果要嵌入大型編輯器或交付重要圖稿,應核對自己實際使用的建構、場景和匯出路徑。Boloop 的判斷來自所列資料,並未親測這些應用操作。獲取入口與版本說明請以官方倉庫為準;Excalidraw+ 是另一個託管服務,不能從原始碼 MIT 授權推斷它的服務條款。

資料來源與延伸閱讀

  1. Excalidraw README: editor, web app and open scene format官方資料 · Excalidraw contributors
  2. v0.18.1 security patch release官方資料 · Excalidraw contributors
  3. Revise a storyboard note before trusting the handoff使用紀錄 · ToolBrivio Editorial
  4. Large-scene next-build performance regression report #12437評論 · sethmart15-34
  5. Excalidraw MIT copyright and permission notice官方資料 · Excalidraw contributors