Excalidraw:快速画清关系,也留好可编辑文件

用浏览器画手绘风格流程图、关系图和线框草图。先从一个小场景开始,把可编辑图稿与图片预览分别保存。

创作者:Excalidraw contributors0.18.12026年10月24日MIT源代码仓库
打开网站
Web

快速开始

用现代浏览器打开 https://excalidraw.com/ ,网页编辑器无需本地安装。先放几个图形,用箭头连接并添加标签;保存可编辑的 .excalidraw 场景,再按需要导出 PNG 或 SVG 给只需预览的人。要在 React 应用中集成编辑器,应另读官方 npm 包文档;编辑器包与在线协作服务的功能范围不同。

先把一件事画清楚

当几个方框、箭头和标签比一段文字更能说明流程时,Excalidraw 很适合作为起点。官方编辑器支持手绘风格图形、导入图片、形状库和 PNG/SVG 导出。在线网站另有实时协作和浏览器本地保存;可嵌入的 React 编辑器包并不自动包含在线服务的全部功能。

先确定一个问题:哪些步骤或组件需要连起来?只画这些对象,给箭头写清关系,别人看得懂之后再分享预览。下面的官方手机示例展示图形和样式控制,不是一份已经交付的产品设计。

Excalidraw 官方仓库提供的手机图形与样式示例。这是项目配图,不是 Boloop 的设备实测,当前界面可能不同。来源:Excalidraw contributors,MIT。
Excalidraw 官方仓库提供的手机图形与样式示例。这是项目配图,不是 Boloop 的设备实测,当前界面可能不同。来源:Excalidraw contributors,MIT。 图片来源

图片和可编辑图稿分开保留

PNG 或 SVG 便于查看,.excalidraw 场景文件则用于继续编辑,两者应作为不同的交付物。浏览器本地保存很方便,但清理存储或换设备时不能只靠它;另存场景文件并检查能否重新打开,会更稳妥。

ToolBrivio Editorial 在 10 月 13 日的浏览器使用记录提供了一个具体但有限的例子:三行分镜文字修改后,经一次刷新仍保留,也能复制成 PNG。其文件下载路径受到测试浏览器的文件选择器策略限制。作者没有完成可编辑场景的保存再打开,也没有验证协作。这份记录支持简单文字与预览的使用场景,不能证明所有环境的所有导出路径都可用。

看清版本,也看清场景规模

截至 2026 年 10 月 24 日核对的最新编辑器包标签是 v0.18.1,于 4 月 21 日发布安全修复;这个包版本不代表持续部署的在线网站版本。issue 12437 中,sethmart15-34 用约 3000 个元素的场景比较 Electron/Chromium 集成,报告 next 构建 0.18.0-17d8904 的平移和框内自由绘制比 0.18.1 慢。问题仍未关闭,这是该用户特定环境的报告,不能当作所有 Excalidraw 部署的性能结论。

如果你要快速解释一个流程或画线框草图,易上手的画布和开放场景格式值得考虑;如果要嵌入大型编辑器或交付重要图稿,应核对自己实际使用的构建、场景和导出路径。Boloop 的判断来自所列资料,并未亲测这些应用操作。获取入口与版本说明请以官方仓库为准;Excalidraw+ 是另一个托管服务,不能从源码 MIT 许可证推断它的服务条款。

资料来源与延伸阅读

  1. Excalidraw README: editor, web app and open scene format官方资料 · Excalidraw contributors
  2. v0.18.1 security patch release官方资料 · Excalidraw contributors
  3. Revise a storyboard note before trusting the handoff使用记录 · ToolBrivio Editorial
  4. Large-scene next-build performance regression report #12437评论 · sethmart15-34
  5. Excalidraw MIT copyright and permission notice官方资料 · Excalidraw contributors