Excalidraw

Excalidraw 是什么

Excalidraw 是一款开源的手绘风格虚拟白板，用 TypeScript 编写、基于 Canvas 渲染。它可以把矩形、圆形、菱形、箭头、自由绘制等元素画成「手绘草图」的样子，非常适合快速表达想法，而不是追求精确制图。

项目同时提供两种使用方式：

• 在线应用：excalidraw.com，支持 PWA 离线、实时协作、端到端加密与本地优先自动保存。
• npm 组件：@excalidraw/excalidraw，可嵌入任意 React 应用。

核心功能

• 无限画布，支持缩放与平移
• 手绘风格渲染，内置暗色模式
• 矩形、圆形、菱形、箭头、直线、自由绘制、橡皮擦等工具
• 箭头绑定与带标签箭头
• 图片插入与形状库（Shape libraries）
• 导出 PNG、SVG 或复制到剪贴板
• 开放格式：导出为 .excalidraw JSON 文件
• 撤销/重做、国际化（i18n）

在 React 项目中集成

安装依赖（需要 React 环境）：

npm install react react-dom @excalidraw/excalidraw
# 或
yarn add react react-dom @excalidraw/excalidraw

然后在组件中引入并使用：

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

export default function Whiteboard() {
  return (
    <div style={{ height: 600 }}>
      <Excalidraw />
    </div>
  );
}

更详细的安装、属性与 API 说明可查阅官方文档 docs.excalidraw.com。

协作与数据安全

官方站点实现了实时协作与端到端加密，数据默认保存在浏览器本地（local-first），并支持导出只读分享链接。需要注意：这些能力目前主要由 excalidraw.com 应用提供，npm 包集成时若需要协作，需要自行搭建后端或等待官方以插件形式开放。

生态与采用者

Excalidraw 被大量产品集成，包括 Google Cloud、Meta、CodeSandbox、Obsidian、Replit、Notion、HackerRank 等；同时提供 VS Code 扩展与 npm 包两种接入形态。

适合谁

• 想在自家产品中内嵌白板/绘图能力的开发者
• 需要快速画架构图、流程图、线框图的工程师与产品经理
• 希望学习 Canvas 交互、协同编辑架构的前端同学

参与贡献

项目采用 MIT 协议，欢迎提交 Issue 与 PR；翻译工作通过 Crowdin 协作，贡献指南见官方文档。