tldraw 评测：现代化开源白板与 AI 绘图
产品定位与形态
tldraw 是一个面向 React 的开源无限画布 SDK，它的官方表述很明确——”the foundation for any canvas app”。换句话说，tldraw 既可以当成 tldraw.com 这样一个开箱即用的在线白板来用，也可以作为 SDK 嵌入到其他产品里，让”画布”成为自家应用的交互层。这种双重定位让它和单纯的 SaaS 工具区别开来，更接近一个”画布基础设施”。
从技术栈来看，tldraw 基于 React，发布到 npm 的包名就是 tldraw。它主打无限画布、实时协作和高度可扩展的形状/工具系统，目标是让开发者能在不重造轮子的情况下，快速搭出像 Miro、Figma 白板那样的产品。
核心功能拆解
tldraw 的默认白板已经覆盖了日常协作绘图需要的大部分能力，可以从几条主线来看：
画布与几何能力
- 压力感应手绘（搭配 Apple Pencil 或支持压感的设备手感更好）
- 几何形状：矩形、椭圆、三角形、菱形等
- 富文本便签（带颜色、字体调节）
- 箭头与连线，配合对齐、吸附、边到边滚动
- 图片、视频插入与图像导出
协作能力
多人实时协作通过官方提供的 @tldraw/sync 实现，使用 Cloudflare Durable Objects 作为后端，可以自部署。tldraw.com 自己也跑在同样的栈上，等于把”生产环境”的开源实现直接给到了社区。
运行时 API
Editor API 允许在运行时以编程方式驱动画布：增删形状、修改属性、触发工具切换、读取当前选区等。这对于构建自动化、批处理、脚本化操作非常关键。
嵌入式 DOM 画布
除了矢量绘制，tldraw 还支持嵌入 YouTube、Figma、GitHub 等网页内容，原理是把这些第三方资源作为”画布上的形状”渲染，等于把整个浏览器变成画布的一部分。
完全可扩展的 SDK
这是 tldraw 和多数白板工具最大的差异点。它把以下能力全部暴露给开发者：
- 自定义形状（shapes）：不仅能用内置图形，还能定义全新类型的数据节点
- 自定义工具（tools）：从选择行为到交互手势都可以重写
- 自定义绑定（bindings）：让两个形状之间产生关联，比如让箭头自动跟随节点移动
- UI 组件替换：工具栏、菜单、上下文面板都可以替换为自家风格
- 副作用与事件钩子：监听画布上的任何变更做响应
加上官方的 starter kits——通过 npx create-tldraw@latest 即可生成——覆盖了多人协作、AI Agent、Workflow 节点编辑器、画布聊天、图像流水线、分支对话、WebGL Shader 等典型场景。这些 starter kit 都是 MIT 协议，可以直接 fork 改造，也可以作为更大项目里的参考实现。
亮点：tldraw AI 与”画图即应用”
tldraw 在 AI 方向的探索是它近期最受关注的亮点，核心思路是”让草图成为可交互的原型”。
- make it real：手绘一个 UI 草图，AI 把它识别并生成对应的可交互 HTML/React 组件，直接在画布上变成可点击的原型
- Agent starter kit：官方提供的 AI Agent 套件，能读取画布内容、解释图形语义、修改和生成画布元素
- 画布聊天（Chat）：在与 AI 对话的同时，可以在画布上画草图、标注图片，作为对话的辅助输入
- 分支对话（Branching chat）：用画布本身组织多路 AI 对话分支，方便对比不同提示词的结果
这些能力让 tldraw 从”画图工具”升级为”创意与原型的中间层”，特别适合产品经理、独立开发者做快速概念验证。
适用场景
把上面这些能力组合起来，tldraw 适合几类典型场景：
- 团队协作：远程会议、产品评审、用户旅程图、设计脑暴
- 产品规划：用户故事地图、线框图、流程图、路线图
- 教学与板书：数学/物理讲义、编程思路演示、互动课堂
- 流程梳理：架构图、状态机、网络拓扑、思维导图
- 嵌入式画布：把画布能力塞进自家 SaaS，例如 Replit 的 AI Canvas、Honeycomb 的 Canvas、Autodesk Forma 的协作板都是用 tldraw 搭建的
许可证与商业使用注意
这一点必须强调：tldraw SDK 本身并不完全是 MIT 协议。它使用的是 tldraw 自有的 license：
- 开发阶段：免费使用，没有功能限制
- 生产部署：需要申请 license key，详情见 tldraw.dev/pricing
但 starter kits 是 MIT 协议的，可以自由 fork 和改造。这点和完全 MIT 的项目（如 Excalidraw）在合规上有差别，团队在做技术选型时需要提前确认预算和流程。
与 Excalidraw 的对比
很多人会把 tldraw 和 Excalidraw 放在一起比较，因为它们都是开源、面向 React、支持无限画布的工具。但从设计取向和定位来看，两者有明显差异。
| 维度 | tldraw | Excalidraw |
|---|---|---|
| 视觉风格 | 现代扁平、UI 精致，接近主流 SaaS 白板 | 手绘涂鸦风、rough.js 渲染，强调”白板感” |
| 技术栈 | React + 自研画布渲染层；多人基于 Cloudflare Durable Objects | React + Rough.js；多人通过插件/自托管实现 |
| AI 能力 | 官方深度集成（make it real、Agent、画布聊天等） | 第三方插件较多，官方 AI 能力较弱 |
| 扩展方式 | SDK 形态，提供 shapes/tools/bindings/UI 的完整扩展点 | 偏独立工具使用，扩展以社区包为主 |
| 商业使用 | SDK 需 license key；starter kits MIT | 完整 MIT 协议，生产可用 |
| 适用人群 | 想要把画布嵌入自家产品的开发者、需要现代 UI 和 AI 能力的团队 | 偏好手绘风格、需要轻量白板工具的团队 |
简单总结：如果想要”一个能立刻用的、手绘风的工具”，选 Excalidraw；如果要”一个能改造、能嵌入、有 AI 能力的基础引擎”，选 tldraw。
{{图：tldraw 与 Excalidraw 默认界面的视觉风格对比（左 tldraw，右 Excalidraw）}}
本地开发与上手路径
如果想试用或者基于它开发：
最快速体验：
访问 tldraw.com，无需登录即可使用单人白板；想体验多人协作和 AI 功能可以注册账号。
集成到自己的项目：
npm i tldraw在 React 组件里直接使用：
import { Tldraw } from 'tldraw'
import 'tldraw/tldraw.css'
export default function App() {
return (
<div style="{{">
</div>
)
}从 starter kit 开始：
npx create-tldraw@latest按提示选择 multiplayer、agent、workflow、chat 等模板之一，快速跑起来。
本地跑官方 examples 仓库：
需要 Node.js ^20.0.0，通过 corepack 启用正确版本的 yarn：
npm i -g corepack
yarn
yarn devexamples 应用会跑在 localhost:5420。
优势与局限
优势
- 真正可扩展的 SDK 形态，不是黑盒 SaaS
- 默认 UI 完成度高，开箱即用体验现代
- AI 能力深度集成，是当前白板类工具里最前沿的
- starter kit 覆盖场景丰富，MIT 协议可自由用
- 自托管多人协作能力齐全，@tldraw/sync 即拿即用
- 跨设备支持全面，桌面、平板、触屏、移动端都能用
局限
- SDK 非 MIT，生产部署需要 license key
- 高度可扩展的另一面是上手成本——定制形状/工具需要读文档和踩坑
- AI 部分依赖第三方模型，使用成本和稳定性受外部影响
- 官方目前不接受社区 PR，bug 修复和功能迭代节奏受官方节奏控制
谁应该选 tldraw
- 正在做产品原型/概念验证：make it real + AI Agent 能让”草图变成可交互界面”的循环非常短
- 需要在自家 SaaS 里嵌入画布：从 Replit 到 Honeycomb 都有现成案例可参考
- 团队对现代 UI 和协作体验有要求：默认体验已经很接近商业白板
- 能接受 license 流程：和完全 MIT 的项目相比，这是一道合规门槛
如果只是偶尔画几张图、对视觉风格有手绘偏好、生产部署需要完全开源合规，那么 Excalidraw 可能更省心。但如果要把画布变成产品的核心交互层，tldraw 是目前开源方案里最接近”工业级”的选择。
评论(0)