Excalidraw：开源手绘风格白板工具，实时协作与端到端加密

在技术沟通中，一张清晰的图往往胜过千言万语。但传统的绘图工具——无论是 Visio、draw.io 还是 Figma——都有一个共同的问题：画出来的图太"正式"了，反而给人一种"定稿"的压力，不利于头脑风暴和快速迭代。Excalidraw 另辟蹊径，它的手绘风格让每张图都自带"这只是个草案"的暗示，反而鼓励了更自由的思考和讨论。这款 MIT 许可的开源工具已经成为全球开发者最喜爱的白板应用之一。

为什么选择 Excalidraw？

Excalidraw 的核心吸引力可以概括为四个字：简单好用。

零门槛上手：打开 excalidraw.com 就能开始画图，不需要注册账号、不需要安装软件、不需要学习复杂的操作。左侧工具栏提供了矩形、圆形、箭头、文本等基础图形，拖拽即可绘制。

手绘风格：这是 Excalidraw 最具辨识度的特点。所有图形都带有轻微的手绘抖动效果，看起来像是在纸上随手画的草图。这种风格在技术文档和演示文稿中出奇地受欢迎——它传达出"这是一个概念图"的信号，而非"这是最终设计"。

端到端加密：当你使用实时协作功能时，所有数据在浏览器端加密后才传输到服务器，服务器无法读取你的画板内容。对于涉及商业机密的架构图讨论，这一点尤为重要。

完全开源：MIT 许可证意味着你可以自由使用、修改和分发，包括商业用途。你甚至可以将 Excalidraw 的编辑器作为 React 组件嵌入到自己的产品中。

核心功能详解

实时协作

点击工具栏的"分享"按钮即可生成一个协作链接。任何拥有该链接的人都可以实时参与编辑，所有参与者的光标位置和编辑操作都会实时同步。

协作功能的技术实现基于 WebSocket 和 CRDT（无冲突复制数据类型），即使在网络不稳定的情况下也能正确处理并发编辑。每个协作会话支持的参与者数量没有硬性限制，但实际体验在 10 人以内最佳。

丰富的图形库

除了基础图形，Excalidraw 还提供了大量社区贡献的图形库（Libraries）。你可以一键导入预制的图标集，包括 AWS 架构图标、网络拓扑符号、UI 组件等。

# 导入图形库的方式
1. 点击工具栏的"图形库"图标
2. 浏览社区贡献的图形库
3. 点击"添加到 Excalidraw"一键导入
4. 从左侧面板拖拽使用

社区库的地址是 libraries.excalidraw.com，目前已有数百个图形库可供选择。

快捷键操作

Excalidraw 提供了丰富的快捷键，熟练使用后可以极大提升绘图效率：

文件格式与导出

Excalidraw 使用 .excalidraw 格式保存文件（实际上是 JSON），支持导出为 PNG、SVG 和剪贴板。SVG 导出特别有用——你可以将手绘风格的图表直接嵌入到技术文档或博客文章中。

// .excalidraw 文件结构（简化）
{
  "type": "excalidraw",
  "version": 2,
  "elements": [
    {
      "type": "rectangle",
      "x": 100,
      "y": 100,
      "width": 200,
      "height": 100,
      "strokeColor": "#1e1e1e",
      "backgroundColor": "#a5d8ff",
      "roughness": 1
    }
  ]
}

roughness 属性控制手绘风格的程度：0 表示平滑（无手绘效果），1 是默认值，2 表示更强烈的手绘效果。

作为 React 组件嵌入

Excalidraw 提供了官方的 React 组件包，你可以将完整的白板编辑器嵌入到自己的 Web 应用中：

npm install @excalidraw/excalidraw

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

function WhiteboardPage() {
  const handleChange = (elements, state) => {
    // 保存到数据库或本地存储
    console.log('画板内容变更:', elements.length, '个元素');
  };

  return (
    <div style={{ height: '600px', width: '100%' }}>
      <Excalidraw
        onChange={handleChange}
        initialData={{
          elements: [],
          appState: { viewBackgroundColor: '#ffffff' },
        }}
        UIOptions={{
          canvasActions: {
            export: true,
            loadScene: true,
            saveToActiveFile: true,
          },
        }}
      />
    </div>
  );
}

export default WhiteboardPage;

组件支持丰富的配置项，包括自定义工具栏、限制可用图形、设置只读模式等。这使得 Excalidraw 可以被深度集成到知识管理系统、在线教育平台或项目管理工具中。

与同类工具的对比

2026 年的在线白板工具市场已经相当成熟，以下是 Excalidraw 与两个主要竞品的对比：

tldraw 是 Excalidraw 最直接的竞争对手，它的绘图引擎更现代，支持更多高级功能（如无限画布的平滑缩放），但缺少 Excalidraw 标志性的手绘风格和端到端加密。

WBO（Web-based Online Whiteboard） 是一个更轻量的选择，适合简单的在线涂鸦和教学场景，但功能和生态远不如 Excalidraw 丰富。

根据 CheckCharm 2026 年的评测，Excalidraw 在"易用性"和"开发者体验"两个维度上均排名第一，tldraw 在"功能丰富度"上略胜一筹。

自托管部署

如果你需要将 Excalidraw 部署在自己的服务器上（例如公司内网），可以使用 Docker 快速搭建：

# 克隆仓库
git clone https://github.com/excalidraw/excalidraw.git
cd excalidraw

# 使用 Docker 构建和运行
docker build -t excalidraw .
docker run -d -p 3000:80 --name excalidraw excalidraw

# 访问 http://localhost:3000

需要注意的是，自托管版本的实时协作功能需要额外部署协作服务器（excalidraw-room），该服务器负责 WebSocket 连接的中转。

总结

Excalidraw 用一个看似"不正经"的手绘风格，解决了技术沟通中一个非常"正经"的问题——如何降低绘图的心理门槛，让团队成员更愿意用图来表达想法。它的开源特性、端到端加密和 React 组件嵌入能力，使其不仅是一个好用的在线工具，更是一个可以深度集成到产品中的基础设施。

无论你是需要画一张快速的架构草图、准备一场技术分享的配图，还是在团队中推广"以图代文"的沟通方式，Excalidraw 都是一个值得尝试的选择。