Excalidraw 完全指南：功能特性与快速上手

是什么

Excalidraw 是一款开源虚拟白板工具，专为绘制图表、线框图和具有鲜明手绘风格的自由插图而打造。该工具并未采用呆板、高度精细的矢量形状，而是模拟了纸笔手绘的随意质感。这种草图风格有助于团队快速梳理软件架构、用户流程和早期原型，而不必纠结于像素级的精确排版。根据其代码仓库的元数据，Excalidraw 基于宽松的 MIT 开源许可证发布。

该软件包含两种互为补充的存在形式：一是托管在 excalidraw.com 的独立 Web 应用，二是以 @excalidraw/excalidraw npm 软件包形式发布的可嵌入 React 组件库。根据项目 README，官方托管的 Web 平台是一个极简展示范例，用于演示开发者基于其底层组件能够打造的效果，而该 Web 平台的完整源码也直接维护在项目的主仓库中。

Excalidraw 的底层是一块无限画布——即没有固定物理边距或页面限制的数字化工作空间。用户可以在其间平移和缩放，以此整理错综复杂的视觉灵感网络。除了单人绘制外，该平台还支持通过端到端加密保护的多人实时协作。在端到端加密机制下，数据在发送方设备上完成加密，且仅能由参与协作的接收方解密，外部服务器无法查看或截听白板会话的内容。

能做什么

Excalidraw 将自由手绘功能、几何图形绘制与数据导出能力集成到了一个专注的画布环境中。

核心绘图与画布工具

编辑器提供了一套直观的绘图工具，可用于绘制结构化图表和自由涂鸦：

• 几何图形：用户可以添加矩形、圆形和菱形，用以勾勒流程步骤、软件组件或界面原型。
• 线条与自由绘制：编辑器包含直线、用于随性涂鸦的自由手绘画笔，以及可擦除错误的橡皮擦。
• 箭头绑定与标签箭头：箭头可直接吸附在图形边缘（箭头绑定），在移动图形位置时保持线条连贯。用户还可以在连接箭头上直接添加文字标签，以清晰展示数据流向。
• 画布导航：无限画布支持无级平移与缩放，用户既能缩小视野掌控全局，也能放大聚焦精细局部。
• 撤销与重做：完整的历史记录控制支持用户快速回退或前进绘图操作。
• 深色模式与个性化定制：画布支持浅色模式与深色模式切换，适配不同的工作环境，各类元素也可以自定义调整视觉样式。
• 图形素材库与图片支持：编辑器支持向白板上传图片，并支持自定义图形素材库，方便用户导入和复用成套的图形组件。
• 多语言本地化（i18n）：界面支持多种语言本地化，便于国际化团队使用。

文件格式与导出

Excalidraw 通过多种导出与存储方式保障用户数据的便携性：

• 图片导出：画布可直接导出为 PNG 格式的位图、SVG 格式的可缩放矢量图，或直接复制到系统剪贴板中粘贴至其他文档。
• 开放数据格式：白板内容可保存为 .excalidraw JSON 文件。得益于该格式的开放性，图表保持了机器可读特性，便于备份，并能随时重新导入其他 Excalidraw 工作区。

官方 Web 应用功能

部署在 excalidraw.com 上的 Web 应用提供了多项内置功能特性：

• 本地优先自动保存：应用会将绘制内容直接保存至浏览器的本地存储中。这种本地优先的设计确保作品妥善存储在用户本地设备上，无需连接服务器。
• 渐进式 Web 应用（PWA）支持：Excalidraw 支持 PWA 标准，在没有网络连接时，用户依然可以离线打开并使用白板。
• 实时协作：支持多位成员加入同一个共享会话，在同一块画布上并发协同绘制。
• 端到端加密：实时协同绘图会话全程经过端到端加密，确保跨网络传输时的隐私安全。
• 只读分享链接：用户可生成仅供查看的链接，向外部审阅者展示图表的静态版本。

根据项目 README，维护团队计划在未来的更新中将这些托管 Web 应用的功能打包成即插即用的插件，供 npm 软件包使用。

怎么开始

上手 Excalidraw 既可以直接使用公开的 Web 应用，也可以将组件库集成到自定义应用中。

使用官方 Web 白板

若想立即开始绘图，只需在任意现代浏览器中访问 excalidraw.com 即可。页面加载后将直接进入空白画布：

1. 从主工具栏中选择图形、连接线或手绘工具。
2. 在画布上任意点击并拖拽，即可绘制图形、书写文字说明，或在元素之间绑定箭头。
3. 你的绘制内容会自动保存至浏览器的本地存储中。
4. 如需多人协作，可在协作菜单中开启实时会话以生成端到端加密房间，或导出只读分享链接。
5. 完成绘制后，可将成品导出为 PNG 、 SVG 图片，或下载原始的 .excalidraw JSON 文件进行保存。

安装开发者组件包

如果软件开发者想要将白板集成到基于 React 的 Web 项目中，可以安装官方提供的 npm 软件包。根据项目 README，你可以使用 npm 或 yarn 安装该软件包及其对等依赖：

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

有关配置步骤、属性参数（Props）及 API 用法，开发者可查阅官方安装文档 https://docs.excalidraw.com/docs/@excalidraw/excalidraw/installation。如需参与项目贡献或在本地运行源码仓库，可参考开发指南 https://docs.excalidraw.com/docs/introduction/development。

生态集成与社区互动

Excalidraw 还通过专用的 Visual Studio Code 扩展（pomdtr.excalidraw-editor）融入了开发者的工作流中。社区成员可以通过以下渠道参与项目生态建设：

• 在 GitHub 上提交 Issue 或发起 Pull Request。
• 加入 Discord 社区聊天（https://discord.gg/UexuTaE）。
• 通过官方 Twitter 账号（@excalidraw）关注项目动态。
• 根据通过 Crowdin 管理的翻译贡献指南，协助完成界面本地化翻译。

价格与门槛

根据代码仓库的元数据，Excalidraw 是一款遵循 MIT 许可证发布的免费开源软件。该协议不仅适用于项目源码，也适用于公开发行的 @excalidraw/excalidraw npm 软件包。

对于需要面向团队的云端功能的用户与企业组织，该项目提供了 Excalidraw+，并通过 Open Collective 提供了赞助渠道。具体定价与套餐方案请以 Excalidraw+ 与 excalidraw.com 的官方页面为准。

技术要求

• Web 端用户：访问官方托管白板需要使用支持 JavaScript 的现代最新浏览器，支持用于本地优先持久化保存的浏览器本地存储，并支持用于离线绘图的渐进式 Web 应用（PWA）标准。
• 开发者：嵌入 @excalidraw/excalidraw 组件库需要准备配置有 npm 或 yarn 等包管理器的 JavaScript 运行环境，并安装 react 与 react-dom。
• 基础设施支持：根据项目 README，Excalidraw 获得了来自外部服务商的免费资源赞助，包括用于网站托管的 Vercel、用于错误追踪的 Sentry 以及用于翻译本地化的 Crowdin。

适合谁

Excalidraw 适合需要快速、协同绘图媒介的各类个人与技术团队：

• 软件工程师与系统架构师：需要快速绘制系统拓扑、数据库结构或逻辑流程图，而无需纠结于繁琐排版格式的开发人员。其箭头绑定与标签箭头功能让系统调用流转清晰可辨。
• 产品经理与 UI 设计师：需要设计低保真线框图、界面交互构想和功能路线图的团队。手绘质感明确传递出这些线框图仍处于推敲构思阶段，而非最终的视觉定稿。
• 远程与分布式团队：在远程会议、团队复盘或设计冲刺期间需要实时头脑风暴空间，同时依靠端到端加密机制保障通信隐私的团队。
• 应用构建者：希望利用开源 React 组件将无限画布白板无缝嵌入到自身 Web 应用中的前端开发者。根据项目 README，集成 Excalidraw 的企业与平台包括 Google Cloud、Meta、CodeSandbox、Obsidian Excalidraw、Replit、Slite、Notion 和 HackerRank。
• 笔记记录者与文档编写者：习惯在文档旁绘制可视化图表笔记的用户，例如使用 Obsidian Excalidraw 插件的知识工作者，或者借助 VS Code 扩展将架构图直接存放于代码仓库中的程序员。
• 跨语言国际化团队：业务覆盖多个地区、能通过社区本地化获得多语言界面支持的企业与组织。

替代品

• tldraw 是一款在 GitHub 上开源的协同数字白板组件库与应用。
• draw.io 是一个托管在 GitHub 上的开源图表与流程图绘制软件项目。

来源

• https://github.com/excalidraw/excalidraw
• https://excalidraw.com/
• https://github.com/tldraw/tldraw
• https://github.com/jgraph/drawio