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 天免费试用

---

社区与采用

• Star: 90,000+ GitHub Star (最受欢迎的白板工具之一)
• 贡献者: 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 库的可嵌入性，使其成为全球开发者、设计师和团队的首选。