# Excalidraw 帮你用手绘白板讲清流程和页面想法

> Excalidraw 是免费开源的手绘风格白板，适合绘制流程、架构草图和页面线框。官方在线版支持实时协作，图形可导出为 PNG、SVG 或可编辑文件，自托管客户端与在线服务存在功能差异。

## 关键信息

- 分类：开源自托管
- 支持平台：Web / Docker / React
- 收费方式：基础编辑器免费，Excalidraw+ 提供付费云工作区，自托管费用自理
- 开源协议：MIT
- 官网：https://excalidraw.com/
- 源码仓库：https://github.com/excalidraw/excalidraw
- 标签：Excalidraw、白板、流程图、协作
- 收录日期：2026-10-30 11:30:00

讨论一个页面怎么排版，或者一项任务经过哪些环节，长段文字常常说不清元素之间的关系。
Excalidraw 提供一块可以随时画框、连线和写字的白板，手绘风格很适合表达还在讨论中的想法。
打开官方在线编辑器就能开始画图，基础使用无需注册账号。

## 把关系画出来比堆砌说明更直观

[官方仓库](https://github.com/excalidraw/excalidraw)列出了矩形、圆形、菱形、箭头、自由绘制、文字与图片等能力，并提供缩放、平移、撤销和重做。
画业务流程时，可以用形状区分操作与判断，用箭头说明流向；讨论页面时，可以画出搜索框、内容卡片和侧边栏的位置。
箭头支持与图形绑定，也可以添加标签，便于说明两个节点之间传递的内容。

![Excalidraw 官方展示的页面线框与多人标注界面](/assets/post-images/excalidraw-collaborative-whiteboard-official-ui.png)

*图片来自 Excalidraw 官方仓库引用的产品展示图，保留真实编辑器、页面草图和协作光标。*

图形库可以提供可复用的素材，已有截图也能放进画布，用框线和文字指出要修改的部分。
适合在需求讨论、教程配图和项目梳理时使用，让参与者围绕同一张图讨论。
如果目标是精细的视觉规范或成品界面设计，则需要结合专门的设计工具完成后续工作。

## 在线协作和本地保存各有用途

官方在线版支持实时协作与端到端加密，也能生成只读分享链接。
邀请同事共同修改适合讨论阶段，只读链接适合发送已经整理好的内容。
涉及内部系统或客户资料时，应检查分享对象，并避免把访问链接放到公开渠道。

编辑器采用本地优先的保存方式，会自动保存到浏览器，并提供 PWA 离线使用能力。
重要图稿适合另存为 `.excalidraw` 文件，这种开放的 JSON 格式能够保留可继续编辑的内容。
只存在浏览器里的资料会受到设备更换和浏览器数据清理影响，单独保存文件更便于长期归档。

## 导出格式取决于图要放在哪里

需要把流程图插入文章或聊天时，可以导出 PNG；需要矢量图时，可以选择 SVG；还要继续修改的图稿则保留 `.excalidraw` 文件。
保存图片与保存源文件承担不同用途，交给同事继续编辑时应同时保留源文件。

例如整理一张内容发布流程图，可以围绕选题、资料核对、写稿和审核等实际环节绘制节点，再把负责人或条件写到箭头旁边。
讨论完成后，用图片放进文档，用源文件留作下次调整。
这里的价值来自关系表达是否清楚，图形数量和装饰多少可以随任务调整。

## 自托管客户端需要看清功能范围

[官方开发文档](https://docs.excalidraw.com/docs/introduction/development)提供 Docker 客户端镜像，也说明了使用 Node.js、Yarn 和 Git 运行源码的方法。
开发者还可以安装 `@excalidraw/excalidraw`，把编辑器嵌入自己的 React 应用。
运行源码、嵌入组件与使用官网在线服务是不同方式，配置需求也不同。

官方文档明确指出，当前自托管客户端方案不支持官网对应的分享与协作功能，本地开发协作需要另外配置协作服务器。
因此，只需要内部绘图页面时可以评估客户端部署；需要多人同时编辑时，应单独研究协作服务，或使用官网提供的入口。

## 免费编辑器与 Plus 怎么选

编辑器采用 MIT 许可，基础在线白板免费开放。
[Excalidraw+ 官网](https://plus.excalidraw.com/)提供付费云工作区，介绍了云端图稿管理、更丰富的分享权限、团队协作与演示能力，并提供试用入口。
具体订阅金额和可用额度以其定价页面为准，自托管则需要自己承担服务器与维护费用。

偶尔画流程、插图和线框，免费编辑器已经提供明确的起点。
如果团队需要集中管理大量图稿和访问权限，可以对照 Plus 的工作区能力评估付费价值。
挑一段难以用文字讲清的流程画出来，检查别人能否顺着箭头理解，通常就能判断这种表达方式是否适合自己的工作。

- [打开免费在线白板](https://excalidraw.com/)
- [查看源码与功能说明](https://github.com/excalidraw/excalidraw)
- [阅读开发与自托管文档](https://docs.excalidraw.com/docs/introduction/development)

---

网页版：https://aronshare.com/posts/excalidraw-collaborative-whiteboard/
发现线索：Excalidraw 官方仓库与文档 https://github.com/excalidraw/excalidraw
来源站点：AronShare 资源库（https://aronshare.com）