Excalidraw：手绘风格的开源在线白板

打开 excalidraw.com，不需要登录、不需要安装，页面里就是一块可以立刻动手画的无限画布。这是 Excalidraw 给人的第一印象：它刻意把”打开即用”做成了产品的基本盘，而不是一个藏在注册流程后面的卖点。

Excalidraw 是一个 MIT 协议下的开源虚拟手绘风格白板（virtual hand-drawn whiteboard），用 React 编写，前端即可独立运行。它的 npm 包 @excalidraw/excalidraw 可以嵌入到自己的应用中，托管在 excalidraw.com 的官方应用则展示了完整的端到端加密协作、本地优先存储、PWA 离线等能力。换句话说，Excalidraw 既是一个可以直接拿来用的网页工具，也是一套可以二次开发的白板组件。

它和一般的在线画图工具有什么不同

市面上画流程图、架构图的工具不少，但 Excalidraw 在三个地方做出了明显区分：

  • 手绘风格的视觉语言：画出来的矩形、箭头、文字看起来都像随手画的草图，而不是 AutoCAD 那种规整的矢量图。这种风格对于早期讨论、远程会议、教学场景反而更友好——它传递的信号是”这只是草稿，请随意评论”，降低了看图者的心理门槛。
  • 本地优先（local-first）：打开页面后画的所有内容默认存到浏览器本地，不强制注册账号，不需要登录，关掉浏览器再回来图还在。这是它和大多数在线协作工具最大的不同。
  • 完全开源：核心功能没有任何付费墙，仓库在 GitHub 上可读可改，集成方众多，从 Notion、Obsidian 到 CodeSandbox、Replit 都有它的身影。

Excalidraw 主界面示意，浅色背景上有手绘风格的矩形、箭头和便签-1

核心功能一览

Excalidraw 的编辑器组件（在 README 中以特性列表的方式列出）覆盖了一支画笔需要的几乎全部工具：

  • 基础图形：矩形、圆、菱形、箭头、直线、自由绘制、橡皮擦。
  • 箭头绑定与带标签箭头：箭头可以自动吸附到图形的连接点上，移动图形时箭头会跟着调整，避免手动对齐的痛苦。
  • 撤销/重做、缩放与平移：和大多数绘图工具一致，操作熟悉。
  • 形状库（shape libraries）：可以加载官方和社区贡献的素材库，把常用图标、流程图符号拖到画布上。
  • 图片支持：可以粘贴图片到画布中作为参考或素材。
  • 暗色模式：跟随系统切换。
  • 国际化（i18n）：内置多语言支持，社区也持续在翻译。
  • 导出：支持导出为 PNG、SVG，以及原生的 .excalidraw JSON 文件。第三方还提供 PDF 导出能力（注：PDF 导出不在官方 README 列表中，建议以最新文档为准）。

.excalidraw 格式本身是明文的 JSON，意味着你可以用文本编辑器打开它、丢进 Git 做版本管理，或者写脚本批量生成图。

关于协作：端到端加密的实时多人画图

托管版 excalidraw.com 提供了一个值得专门说的能力：实时协作 + 端到端加密（E2EE）。这意味着：

  • 多个用户可以同时编辑同一张画布，光标和修改实时同步。
  • 房间密钥在客户端生成并参与加密，服务端只看到密文，无法读取画布内容。

这种模式在团队讨论敏感架构、面试白板、远程会议里特别有用——既享受了协作的便利，又不用担心图被第三方留存。需要注意的是，README 明确提到这些协作相关功能（实时协作、E2E 加密、本地优先存储、分享只读链接、PWA 离线等）目前在托管应用中是默认打包的，npm 包层面未来会作为可插拔的插件逐步提供。具体哪些能力已经作为 drop-in 插件可用，建议以官方文档为准。

实时协作场景示意，左侧是当前编辑者的画布，右侧显示另一个协作者的光标和修改-2

把它嵌进自己的应用：npm 包集成

如果只是用托管版，直接访问 excalidraw.com 即可。如果想把它嵌进自己的产品里，README 给出的最小集成步骤相当简洁：

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

Excalidraw 编辑器本身依赖 React 和 ReactDOM，所以这两个 peer dependency 必须同时安装。安装完成后，按照官方 Installation 文档 的方式引入组件即可。这里要注意：README 中的 Quick start 段落专门写了”以下说明用于把 npm 包集成到你自己的应用”，如果是想在本地跑仓库做开发，需要参考单独的 Development Guide，不要混用。

要在本地开发仓库本身，官方文档给出了完整的贡献指南（Contributing），包括提交 PR、翻译协作的入口。需要注意的是，README 里的链接指向 docs.excalidraw.com 域名，具体的 URL 路径和最新章节名以官方文档站点为准。

常见使用场景

Excalidraw 的功能设定让它非常适合这几类场景：

  • 技术方案草图：和团队讨论微服务拆分、数据流、接口设计时，一张快速手绘的架构图比 PowerPoint 更有效。
  • 教学与演示：在线课堂、博客教程里嵌入一张手绘图，比纯文字描述更容易传达思路。
  • 产品原型：早期 wireframe 阶段，比起 Figma 这种”成品感”很重的工具，Excalidraw 传达的信号是”这只是个草图，欢迎改”。
  • 远程会议白板：开会时双方共开一张画布当白板用，结束直接分享链接给没参会的人。
  • Obsidian / Notion 用户：这两个生态都有官方或社区插件（README 提到的 Obsidian Excalidraw 插件是社区非常活跃的一个），可以直接在笔记软件里画图并保存。

导出菜单展开后展示 PNG、SVG、复制到剪贴板等选项-3

集成与生态

从 README 列出的”Who’s integrating Excalidraw”看，Google Cloud、Meta、CodeSandbox、Obsidian、Replit、Slite、Notion、HackerRank 都已经在各自产品里用到了 Excalidraw。其中 CodeSandbox 和 Replit 这类在线编程环境把白板嵌进去，对开发者非常友好；而 Notion 和 Obsidian 则把”画图”做成了笔记流程的一部分。

此外，社区还有一个 VSCode 扩展，可以在编辑器里直接打开和编辑 .excalidraw 文件，不用切到浏览器。

谁在维护它，怎么参与

Excalidraw 的代码仓库托管在 GitHub 的 excalidraw/excalidraw 下，使用 MIT 协议分发，所以无论个人项目还是商业产品都可以自由使用和修改。

参与的方式有几种：

  • 报 bug 或提需求：通过 GitHub Issues。
  • 提交代码：阅读 Contribution Guide 后提 PR。
  • 翻译：在 Crowdin 平台参与 i18n 协作（README 提到 Crowdin 为该项目免费提供服务）。
  • 资金支持：通过 Open Collective 成为赞助者，或者订阅官方提供的 Excalidraw+ 服务。

项目也开通了 Discord 频道，地址在 README 的徽章里可以找到，遇到使用问题或想讨论功能时可以直接在频道里提问。

一些使用上的小提醒

  • Excalidraw 画布是无限画布（infinite canvas），配合缩放和平移使用，长期项目里图会越画越大，建议按主题分多个文件保存。
  • 导出 PNG/SVG 时，手绘风格的抖动是矢量效果，放大看不会糊，但如果你需要严格的直线、规整的字体，它就不是最佳选择——这是它的”特色”而不是 bug。
  • 托管版的本地存储依赖浏览器，清理浏览器数据可能导致未导出的画布丢失。重要内容记得随时导出 .excalidraw 源文件备份。
  • 协作功能依赖房间链接，链接本身可以分享，真正的保密性来自 E2E 加密，但密钥分发依赖初始链接的安全传递，这一点和所有 E2E 产品一样。

对于需要快速、随手、开箱即用地画图的人——尤其是开发者、教师、产品经理——Excalidraw 是那种打开浏览器、点开链接、三十秒就能开始画图的工具。它的门槛低、扩展性强，又有活跃的开源社区支撑，值得放进日常工具箱。

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。