tldraw 有了免费替代品，这个开源白板工具我用了几天

上周开会，产品经理拿了个草稿过来，说”帮我画成图，下午汇报要用”。

我下意识打开 Visio，然后关上了。太重了。又打开 PPT 画形状，画了三个就放弃了。最后打开 Figma，杀鸡用牛刀，但也没别的办法。

整个过程我都在想一件事：我就想画个简单的流程图，为什么这么难？

后来一个前端的同事给我推荐了 tldraw，说好用。我试了一下，确实不错，界面清爽，操作顺手，画个架构图、流程图分分钟搞定。但等我仔细看了授权协议，犹豫了——如果你想商用，或者在公司项目里用，得掏钱。tldraw 的商业授权是 199 美元一年，换算一下大概 1400 多人民币。不是付不起，但总觉得为了画个白板每年交这个钱，有点冤。

然后我在 GitHub 上翻到了一个项目，叫 Quickdraw。项目简介就一句话：“An open-source alternative to tldraw with no license fee”——tldraw 的开源替代品，不收许可证费。

我花了一个周末试了试。

图：Quickdraw 白板界面，手绘风格图形、箭头、便签等核心功能演示（来源：GitHub 官方仓库）

---

Quickdraw 是什么？

简单来说，Quickdraw 是一个 MIT 协议、无限画布的白板 SDK。你可以把它嵌入到任何项目里当白板组件用，也可以直接打开它的在线版。

它的团队提供了一个完整的套件，覆盖了三种集成场景：

• React 项目：npm install @quickdrawjs/react，一个 <Quickdraw /> 组件搞定
• 纯 JS 项目：npm install @quickdrawjs/core，createQuickdraw() 直接创建
• React Native 项目：npm install @quickdrawjs/react-native，移动端也没问题

它的体积让我有点意外。这个白板 SDK 压缩后只有 25KB。相比之下，tldraw 大约是 496KB，Excalidraw 大约是 344KB。Quickdraw 比它们轻了 20 倍。

图：Quickdraw GitHub Star 增长趋势（来源：GitHub 官方仓库）

它零运行时依赖，纯 ESM 模块，不需要任何构建工具，现代浏览器打开就能直接跑。对开发者来说，集成成本几乎为零。

它的数据模型也挺有意思。不是传统的全量保存，而是基于 JSON diff——每次操作都产生一个 { added, removed, updated } 的 diff。这意味着实时同步几乎是内置能力，你只需要把这个 diff 通过网络发出去就行。后面我会详细说这个。

---

功能逐个测

我花了几天时间，把 Quickdraw 的每个功能都试了一遍，下面是我的真实体验。

画笔与压感

先试的是画笔。用鼠标画了几笔，发现笔触会随着鼠标移动速度变化——画得快的地方线条细，画得慢的地方线条粗，末端会自然渐细，模拟出真实的笔触感。如果你用的是触控笔（比如 Apple Pencil 或者 Surface Pen），效果会更明显，线条粗细会随压力大小实时变化。

这个功能对平板用户最有用。如果你平时用 iPad 画图，压感体验可以让你在白板上画出很自然的示意图，比用鼠标画出来的好看很多。

手绘风格图形

Quickdraw 的图形工具支持矩形、椭圆、三角形、菱形、六边形、星形。每种图形都有一个”手绘抖动”效果——画出来的不是完美精准的几何图形，而是带着一点点”手抖”的感觉，看起来像手绘的。

我一开始觉得是噱头，用下来发现这种”不完美”反而让白板图看起来更自然。想象一下你在会议室的白板上用马克笔画图，那种自然的抖动感。Quickdraw 模拟的就是这个效果。

图形支持四种填充样式：实心、空心、半透明等，还能给每个图形添加可编辑的标签文字。画箭头的时候，箭头线可以拖拽弯曲，非常灵活。

便签与文字

便签功能很实用。在白板上随手贴一张便签，写点备注，然后画箭头连接到其他内容上。这几个功能基本覆盖了头脑风暴、流程梳理、需求讨论这些高频场景。

我试了一下在产品方案讨论中的使用：先用便签列出几个关键需求，再用箭头画出依赖关系，最后用矩形框出优先级分组。整个过程很快，比在 PPT 里画形状快太多了。

激光笔

这个功能我一开始没在意，试完之后觉得对线上会议特别有用。

激光笔模式下，你画的任何内容都不会被保存，画完就消失。想象一下你在线上演示时，想圈出屏幕上的某个重点。用鼠标画个圈，大家看到了，然后圈自动消失，不留痕迹。不需要像以前那样画完还要手动擦除。

对经常要线上演示、远程会议的人来说，这个功能很实用。

图片插入

支持三种方式插入图片：粘贴、拖拽、文件选择。插入的图片会自动缩小适配到画布，不会撑爆你的视图。如果图片太大，需要重新编辑，双击就能在系统相册中打开原图。

导出为 PNG

Quickdraw 支持导出整个白板或选中的区域为 PNG 图片，还支持透明背景。这个功能很简单，但很实用——画完的架构图直接导出，丢到文档或者 PPT 里就能用。

其他值得提的

• 明暗主题：一键切换，深色模式用户友好
• 网格背景：支持横线网格和点阵网格，随缩放自动适配
• 撤销/重做：每次手势一个条目，操作回退很精准
• 手掌防误触：检测到触控笔后，手指只用于移动画布，笔用于绘制，平板用户友好

---

和 tldraw 对比

既然 Quickdraw 说自己是 tldraw 的替代品，那我们来对比一下。

对比维度	Quickdraw	tldraw
授权协议	MIT，免费商用，0 元	商业版 199 美元/年
压缩体积	约 25KB	约 496KB
运行时依赖	零依赖	有依赖
React Native	支持	不支持
图层	暂无	支持
富文本	暂无	支持
多人实时协作	需自建传输层	有商业方案
核心绘图能力	基本持平	更丰富
上手难度	极低	低

tldraw 是更成熟的产品，Quickdraw 是更轻量、更自由的选择。

界面和操作逻辑上，两者高度相似。如果你用过 tldraw，切换到 Quickdraw 基本没有学习成本。核心绘图能力——画笔、形状、箭头、便签、选择操作——两者差距不大，日常使用完全够用。

差距主要在两点：Quickdraw 目前没有图层功能，也没有富文本支持。如果你需要做复杂的多图层排版，或者需要精美的文字排版，tldraw 目前更合适。

但差距最大的地方是授权。tldraw 商业版 199 美元/年，Quickdraw 是 MIT 协议，0 元，永久免费，商用也随便用。 这个差距，对很多团队和个人来说，就是”用”和”不用”的区别。

另外一个差距是体积。Quickdraw 25KB vs tldraw 496KB，轻了 20 倍。如果你只是想要一个白板组件嵌入到你的项目里，Quickdraw 的加载速度优势很明显。

---

上手体验：从安装到画出第一张图

我试了两种方式：

直接在线体验：打开 app.tryquickdraw.com，不需要注册，不需要登录，打开就能画。从打开页面到画完一张流程图，我大概用了 3 分钟。这个速度，比打开 PPT 新建空白文档还快。

在 React 项目里集成：

npm install @quickdrawjs/react @quickdrawjs/core

然后在组件里写：

import { Quickdraw } from '@quickdrawjs/react'
import '@quickdrawjs/core/quickdraw.css'

function App() {
  return <Quickdraw />
}

就这么简单。从安装到浏览器里看到白板，3 分钟而已。如果你不想用默认的工具栏，加一个 hideUi 属性就能隐藏，然后通过 editor API 自己定制操作按钮。

---

适合谁用？不适合谁用？

适合用 Quickdraw 的人：

• 需要画架构图、流程图的开发者——画完直接导出 PNG 丢文档里
• 产品经理快速画原型、画方案——比 PPT 画图快 10 倍
• 经常线上会议演示、需要标注圈点的人——激光笔功能太实用了
• 想给自己的产品嵌入白板功能的团队——MIT 协议，免费商用，集成简单
• 平板/触控笔用户——压感 + 手防误触，体验接近原生

不适合用 Quickdraw 的人：

• 需要专业图表绘制的（建议用 Visio 或 draw.io）
• 需要精细排版和设计的（建议用 Figma 或 PPT）
• 需要开箱即用的多人实时协作方案的（需要自己搭传输层）
• 需要图层和富文本功能的（建议等 Quickdraw 更新，或者用 tldraw）

总体评价： 在”免费、轻量、够用”这三个方面，Quickdraw 做得不错。它不是最全能的，但可能是最适合大多数人的。

---

写在最后

Quickdraw 给我的感觉是，它没想成为一个”白板平台”，就是想做一个够好用的白板组件，让你需要的时候能用上，不需要的时候就安安静静地待在你的项目里，不占空间、不拖速度。

如果你有白板需求，不管是想找一个在线白板直接画图，还是想给项目嵌入一个白板组件，我建议你去 app.tryquickdraw.com 试试，3 分钟就知道合不合适。

反正我是准备把团队的白板工具从 tldraw 换过来了。不是因为 tldraw 不好，而是 Quickdraw 免费、够用，MIT 协议让我用得安心。

顺便问一句：你平时用什么工具画图、画白板？评论区聊聊。

---

开源协议与项目信息：

• GitHub 仓库：github.com/nmndwivedi/quickdraw（当前 276 星）
• 协议：MIT（免费商用，无限制）
• 在线体验：app.tryquickdraw.com
• 官网：tryquickdraw.com