Figma 替代品 Excalidraw 安裝和使用教程

米开朗基杨發表於2024-07-22

如今遠端辦公盛行，一個好用的線上白板工具對於團隊協作至關重要。然而，市面上的大多數白板應用要麼功能單一，要麼操作複雜，難以滿足使用者的多樣化需求。尤其是在進行頭腦風暴、流程設計或產品原型繪製時，我們常常會遇到以下痛點：

繪圖工具不夠直觀，學習成本高；
缺乏協作功能，難以實時溝通；
無法保護隱私，敏感資訊容易洩露；
介面單調，缺乏表現力和創意激發。

那麼，有沒有一款白板工具能夠兼顧易用性、協作性、安全性和創造力呢？今天給大家推薦一個強大的開源專案 - Excalidraw。

Excalidraw 簡介

Excalidraw 是一個開源的虛擬手繪風格白板工具，使用 React 構建，上線於 2020 年 1 月，非常年輕。它提供了實時協作和端到端加密功能，讓你的遠端協作更有創意、更安全。Excalidraw 旨在為開發者和終端使用者提供一個簡單、直觀且功能強大的繪圖體驗。

一個優秀的白板工具不僅要滿足基本的繪圖需求，更要為使用者提供愉悅的創作體驗。Excalidraw 的設計始終圍繞著以下核心理念：

簡單直觀：上手即用，無需學習複雜操作。
手繪風格：獨特的視覺效果，激發創意思維。
實時協作：多人同時編輯，ideas 即時碰撞。
隱私至上：端到端加密，保護你的創意成果。

從 2020 年開源開始，Excalidraw 的 Star 數量一路猛漲，目前 Excalidraw 在 GitHub 上已經獲得了超過 7.7 萬顆星。

Excalidraw 誕生背景

2020 年初的一個週末，Facebook 工程師 Vojtech Rinik 注意到 zwibbler.com/demo 移除了一些基本的繪圖功能，便突發奇想，決定重新建立一個簡單的繪圖工具。

Vjeux 除了是 Excalidraw 的作者之外，還是 React Native、Prettier 的聯合創始人，也是 CSS-IN-JS、Yoga、React Conf 的建立者。

Vojtech 在 Twitter 上分享了他的進展：

在短短几個小時內，他就實現了基本的繪圖功能，包括橢圓、文字輸入，以及按住 Shift 鍵繪製完美圓形或正方形的功能。隨後，他又新增了自定義字型、選擇和刪除功能。

這個專案最初被命名為 “Excalibur”，這個名字是由知名開發者 Ken Wheeler 提議的。Vojtech 繼續完善專案，增加了移動元素、滑鼠移出視窗、取消文字輸入等功能，並將程式碼提交到了 GitHub 上。

很快，這個專案就引起了開發者社群的關注。人們被其簡潔的介面和手繪風格所吸引，紛紛參與到專案的開發中來。隨著功能的不斷完善和社群的持續貢獻，Excalidraw 逐漸發展成為了今天我們所看到的強大工具。

Excalidraw 的功能特色

Excalidraw 提供了豐富的功能，滿足各種繪圖和協作需求。核心功能如下：

繪圖體驗

手繪風格：獨特的視覺效果，讓你的圖表更有個性。
豐富工具：矩形、圓形、箭頭、自由畫筆等多種繪圖工具。
無限畫布：自由繪製，不受空間限制。
圖形庫：提供常用圖形集合，快速插入。

協作功能

實時多人協作：多人同時編輯，激發創意火花。
端到端加密：保護你的創意和隱私。
分享連結：一鍵生成只讀連結，方便分享。

使用便利性

離線支援：PWA 技術，支援離線使用。
本地優先：自動儲存到瀏覽器，不怕資料丟失。
匯出功能：支援 PNG、SVG 和剪貼簿匯出。
深色模式：保護眼睛，適合夜間使用。

開發者友好

npm 包：提供 React 元件，方便整合到自己的應用。
開源開放：可以自由定製和擴充套件功能。
詳細文件：提供全面的開發文件和示例。

多語言支援

國際化：支援多種語言介面，滿足全球使用者需求。

Excalidraw vs. 其他白板工具

為了更直觀地展示 Excalidraw 的優勢，我們可以將其與市面上的其他主流白板工具進行對比：

特性	Excalidraw	Miro	Whimsical	Figma
價格	免費開源	付費	付費	付費
手繪風格	✅	❌	✅	❌
實時協作	✅	✅	✅	✅
端到端加密	✅	❌	❌	❌
離線使用	✅	❌	❌	❌
開源可定製	✅	❌	❌	❌
學習曲線	低	中	低	高
適用場景	通用	專業團隊協作	快速原型	專業設計

雖然 Miro 在專業團隊協作方面略勝一籌，Figma 則在設計專業度上有優勢，但 Excalidraw 在易用性、隱私保護和開源友好度上獨樹一幟。特別是對於小型團隊和個人使用者來說，Excalidraw 提供了一個完美的平衡點。

Excalidraw 的安裝使用

Excalidraw 的安裝和使用相對簡單，提供了多種方式以適應不同的需求。

整合到其他工具中

如果你想將 Excalidraw 整合到自己的專案中，可以按以下步驟操作：

首先，確保你的系統已安裝 Node.js (版本 >= 12)。

然後，使用 npm 安裝 Excalidraw 包：

npm install @excalidraw/excalidraw

或者使用 yarn：

yarn add @excalidraw/excalidraw

在你的 React 元件中使用 Excalidraw：

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

function App() {
  return (
    <div style={{ height: "500px" }}>
      <Excalidraw />
    </div>
  );
}