Excalidraw

工具信息

支持平台Web 浏览器（含 PWA 离线） / React / npm 生态（@excalidraw/excalidraw） / VS Code 扩展 / Windows / macOS / Linux（浏览器内使用）

版本0.18.1

收录时间2026/10/09 17:25:14

Excalidraw 是一款开源的手绘风格虚拟白板，主打“打开浏览器就能画”的轻量体验：线条带轻微手绘抖动，画出的流程图、线框图和架构草图天然带上草稿感，适合在需求讨论与方案评审阶段表达尚未定型的想法。它由两部分组成——托管在 excalidraw.com 的免费在线白板应用，以及可嵌入 React 项目的 @excalidraw/excalidraw 编辑器组件，两者的代码都放在同一个 MIT 许可的开源仓库里。

核心功能

编辑器本体是一个基于 Canvas 的无限画布，官方 README 列出的能力覆盖了从绘制、整理到导出的完整链路，工具数量不多但都指向快速表达。

Excalidraw 官方 README 的作品展示图：用手绘风格线条绘制的图表与线框示例（来源：github.com/excalidraw/excalidraw）

手绘风格绘制：矩形、圆形、菱形、箭头、直线、自由绘制、橡皮擦等工具齐备，支持箭头绑定形状以及带标签的箭头。
无限画布与视图控制：Canvas 版无限画布，支持缩放、平移以及撤销与重做。
素材与主题：支持插入图片、加载形状库（shape libraries）、深色模式与外观自定义。
导出与开放格式：可导出 PNG、SVG 或直接复制到剪贴板，也能导出为 .excalidraw JSON 文件，方便版本管理与二次处理。
多语言：内置 i18n 本地化支持，翻译通过 Crowdin 平台协作维护。

托管版还额外提供协作类能力：PWA 离线支持、实时协作、端到端加密、local-first 自动保存（存到浏览器本地）以及可分享的只读链接。README 说明，这些特性未来会以插件形式进入 npm 包。

界面与体验

进入编辑器后，绘制入口集中在顶部中央的横向工具栏，从左到右依次是锁定、激光笔（多人跟随）、矩形、菱形、圆形、箭头、线条、画笔、文本、图片与橡皮擦；顶部右侧是协作成员头像以及评论、菜单等入口。画布本身占据绝大部分面积，缩放、撤销与重做控件都收在左下角，分享、导出、主题切换等入口则在顶部菜单中。

Excalidraw 编辑器界面：绘图工具集中在顶部中央工具栏，顶部右侧是协作头像与评论入口，选中对象后左侧展开属性面板，缩放与撤销/重做位于左下角（来源：plus.excalidraw.com）

面板按需出现而不是常驻：选中某个图形后，画布左侧才展开属性面板，集中提供 Stroke、Background、Fill、描边宽度与样式、Sloppiness（手绘抖动强度）、Edges（圆角/直角）、透明度、图层、对齐和动作等设置；协作场景下右侧是评论面板。对日常画草图的人来说，多数时间只需要顶部工具栏和画布两个区域。

协作相关交互只在托管版出现：场景默认自动保存到浏览器本地，可导出一个只读分享链接发给他人，同一房间内的改动实时同步，传输内容端到端加密。自己嵌入 npm 组件时并不会自动获得这些能力。

完整使用流程

Excalidraw 有两条使用路径：直接使用官方托管的在线编辑器，或把编辑器组件集成进自己的 React 应用。前者不需要任何安装步骤，后者需要 Node.js 与包管理器环境。

路径一：在线白板（零安装）

用浏览器打开 excalidraw.com，官方描述为无需注册即可直接绘制。
在顶部工具栏选择矩形、箭头等工具画出第一张草图，用文本工具补上标注。
通过分享或导出入口复制只读协作链接，或导出 PNG / SVG / .excalidraw 文件。
验证结果：刷新页面后内容仍在（local-first 自动保存到浏览器）；打开导出的 PNG 或 JSON 文件确认内容完整。

路径二：嵌入自己的 React 项目

准备支持 React 的前端工程，以及 npm 或 yarn 环境。
按官方 README 的 Quick start 安装依赖：

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

安装完成后按官方文档 Installation 引入 Excalidraw 组件，并在需要嵌入白板的页面中渲染。验证方式是在本地开发服务器打开该页面，能看到手绘风格的工具栏与画布即表示组件加载成功；导出、主题、自定义 UI 等可用接口以文档的 API 说明为准。若要在仓库本地跑开发环境，需参考官方的 Development Guide，而不是 README 里的安装命令。

亮点与差异

与 Figma、Miro 这类重型协作画布相比，Excalidraw 的差异点集中在“低保真优先”和开放格式上：它不追求像素级精致，而是让讨论快速聚焦到结构本身，同时用 MIT 许可证和 JSON 文件格式把数据和实现都交还给使用者。

手绘风格在这里不是视觉噱头，而是刻意降低产出物的完成度，让评审关注结构而不是外观细节。

真正开源：MIT 许可证，README 明确标注，编辑器与托管应用源码在同一仓库。
可嵌入：以 npm 组件形式发布，被 Notion、Obsidian、Replit、CodeSandbox 等产品以插件或集成方式使用，Google Cloud 与 Meta 也在公开页面中用到它。
格式开放：.excalidraw JSON 可自由保存、比对与转换，不锁在专有云端。

典型使用场景

从官方资料看，它主要服务于三类使用者：工程师画架构图、时序图与流程草图，产品与设计师画低保真线框和用户流程，以及团队在会议中做共享白板。

技术方案讨论：用框图和箭头快速对齐模块边界与调用关系。
需求评审：用手绘线框表达交互草案，避免视觉细节分散注意力。
会议白板：开一个协作房间，多人同时补充。
文档与知识库：通过 Obsidian 插件或嵌入方式把图放进笔记与技术文档。
产品集成：在自己的 React 应用内提供白板功能。

定价

开源编辑器与官方托管版本身免费使用，增值订阅 Excalidraw+ 按用户按月计费，官方定价页写明提供 14 天免费试用。

方案	价格	适合谁
Free	免费（永久）	个人快速画草图、希望数据留在本地或自行集成的开发者
Excalidraw+	$6 / 用户 / 月（14 天免费试用）	需要云端同步、多场景管理与团队协作的组织

免费方案含完整编辑器功能、1 个无限场景、无限制协作者、PNG/SVG/文件导出、Notion 与 Obsidian 等集成以及形状库，并在浏览器本地端到端加密；Plus 方案在此之上增加无限场景、自动同步到服务器、快速面板、更完整的生成式 AI、演示模式、评论、实时演示、语音与屏幕共享以及工作区团队和用户管理。需要说明的是，第三方文章给出的价格与官方定价页不一致，以上以官方定价页的 $6 为准。

版本与维护状态

项目处于持续维护状态：仓库接受 issue 与 PR，文档分开发指南与贡献指南，界面翻译通过 Crowdin 由社区协作推进。

npm 上的 @excalidraw/excalidraw 包页面显示当前版本为 0.18.1。
Excalidraw+ 官方 changelog 按月更新，最近条目仍在持续发布功能与基础设施改动。
许可证为 MIT，可自由用于商业项目。

局限与注意

实时协作、端到端加密、离线 PWA、只读分享链接等能力目前只存在于官方托管应用，README 表示未来才会以插件形式进入 npm 包；自行嵌入组件不会自动获得这些功能。
协作与云端同步依赖官方服务，官方 README 并未承诺可用于自建的同类后端。
低保真定位意味着它不擅长需要严格对齐、图层管理与组件复用的高保真设计工作。
npm 包是 React 组件，非 React 技术栈无法直接复用。
界面翻译由社区协作维护，各语言的覆盖程度可能不完全一致。