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

news2024/11/26 16:37:29

如今远程办公盛行，一个好用的在线白板工具对于团队协作至关重要。然而，市面上的大多数白板应用要么功能单一，要么操作复杂，难以满足用户的多样化需求。尤其是在进行头脑风暴、流程设计或产品原型绘制时，我们常常会遇到以下痛点：

绘图工具不够直观，学习成本高；
缺乏协作功能，难以实时沟通；
无法保护隐私，敏感信息容易泄露；
界面单调，缺乏表现力和创意激发。

那么，有没有一款白板工具能够兼顾易用性、协作性、安全性和创造力呢？今天给大家推荐一个强大的开源项目 - 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>
  );
}