Excalidraw

用於繪製手繪風格圖表的虛擬白板 GitHub: https://github.com/excalidraw/excalidraw

---

總覽

Excalidraw 是一款免費、開源的虛擬白板應用程式，讓使用者能夠以獨特的手繪美學風格創建圖表、流程圖、線框圖和草圖。它以 React 組件的形式建構並作為 npm 套件發佈，可獨立使用於 excalidraw.com 或直接嵌入到其他應用程式中。

該專案最初由 Christopher Chedeau (vjeux) 創建，此後已發展成為一個蓬勃發展的開源社群，並被 Google Cloud、Meta、CodeSandbox、Replit、Notion 和 Obsidian 等公司採用。

---

核心功能

繪圖工具

• 基本形狀：矩形、圓形、菱形、箭頭、線條
• 手繪和橡皮擦
• 支援自訂字體的文字工具 (Excalifont)
• 箭頭綁定和標記箭頭
• 用於可重複使用組件的形狀庫

畫布與使用者介面

• 支援縮放和平移的無限畫布
• 深色模式
• 復原/重做歷史記錄
• 用於高效工作流程的鍵盤快捷鍵
• 可自訂的筆觸寬度、粗糙度、顏色和填充

協作與分享

• 透過可分享連結進行即時多人協作
• 端對端加密，確保安全會話
• 唯讀可分享連結，用於檢視
• PWA 支援 — 完全離線運作
• 本地優先：自動儲存至瀏覽器儲存

匯出與整合

• 匯出為 PNG、SVG 和剪貼簿
• 以 .excalidraw JSON 格式匯入/匯出 (開放、人類可讀)
• 可透過 npm 套件 @excalidraw/excalidraw 作為 React 組件嵌入
• 整合到 Obsidian、VS Code 擴充功能、Notion 等工具中

本地化

• 完整的 i18n (國際化) 支援，提供多種語言

---

技術堆疊

層級	技術
前端	React, TypeScript
畫布	HTML5 Canvas API
繪圖	Rough.js (手繪渲染)
字體	Excalifont (自訂), Virgil (舊版)
套件	在 npm 上發佈為 @excalidraw/excalidraw
授權	MIT

---

使用案例

• 系統架構圖 — 為技術團隊準備的非正式但具表現力的草圖
• 線框圖與 UI 模型 — 在 Figma 之前快速建立低保真原型
• 腦力激盪與發想 — 會議或異步中的視覺化思考
• 教學與簡報 — 手繪風格讓內容更易於親近
• 文件 — 在維基、Notion 頁面或 README 檔案中嵌入即時圖表

---

Excalidraw+ (付費版)

除了免費的開源版本，該團隊還提供付費雲端產品 Excalidraw+，增加了以下功能：

• 雲端儲存和有組織的工作區
• 持續的協作會話
• 在畫布內進行語音聊天
• 簡報模式 (基於幻燈片的 PPTX/PDF 匯出)
• 權限管理和訪客分享
• 提供 14 天免費試用

---

社群與採用

• 星標: 90,000+ GitHub 星標 (最受歡迎的白板工具之一)
• 貢獻者: 800+ 開源貢獻者
• 使用者: Google Cloud, Meta, CodeSandbox, Obsidian, Replit, Slite, Notion, HackerRank
• 整合: VS Code 擴充功能、Obsidian 外掛、Confluence 外掛等

---

開始使用

線上使用

前往 https://excalidraw.com — 無需註冊。

自行託管 / 嵌入

npm install @excalidraw/excalidraw

import { Excalidraw } from "@excalidraw/excalidraw";

export default function App() {
  return <Excalidraw />;
}

本地運行

git clone https://github.com/excalidraw/excalidraw.git
cd excalidraw
npm install
npm start

---

總結

Excalidraw 在圖表工具中脫穎而出，因為它刻意擁抱了手繪美學——粗糙的邊緣和流暢的線條，讓內容保持非正式，專注於想法而非精緻度。它結合了零摩擦的入門體驗 (無需登錄)、強大的協作功能、開放的格式以及作為 React 函式庫的可嵌入性，使其成為全球開發人員、設計師和團隊的首選。