4.7万Star的tldraw，一个SDK搞定所有画布应用

4.7万Star的tldraw，一个SDK搞定所有画布应用

tldraw 在 GitHub 拿了 47000 多 Star。它是一个 React 的无限画布 SDK，给你一套完整的画布引擎，让你自己决定在上面做什么。不是白板工具，不是流程图软件，是造这些工具的底盘。

我用下来最大的感受：它给的是一套底层能力，不是一个封装好的成品。几行代码跑起画布，再按需加功能。想要协作就接同步模块，想要 AI 就接 Agent 接口，想要自定义图形就写 shape 定义。自由度跟脚手架之间的分寸拿捏得刚好。

定位是引擎，不是工具

tldraw 跟 Excalidraw、Draw.io 这些工具的区别在于，它定位是 SDK 而不是应用。拿到手的是底层能力，不是某个特定场景的解决方案。

画布引擎自带的能力：

• 多人协作，可自托管部署
• 压感绘图、几何图形、富文本、箭头、对齐吸附
• 图片和视频嵌入画布
• 画布边缘自动滚动
• 画布内容导出为图片

但更关键的是，形状、工具、绑定规则、UI 组件全部可自定义。你想做思维导图就定义思维导图的形状，想做房间布局器就定义家具的形状，想做 UML 编辑器就定义类图和时序图的节点类型。画布渲染、事件系统、坐标变换这些底层脏活 tldraw 全包了，你只管定义业务形态。

AI 集成是重点

tldraw 专门为 LLM 集成设计了一套画布原语。AI 可以直接读写画布内容，不需要中间转换。

Agent starter kit 就演示了这个能力：AI 能理解画布上有哪些元素，能修改内容，能根据自然语言指令创建新图形。Chat starter kit 则让用户在画布上画草图、做标注，同时跟 AI 对话，两者在同一界面完成。你画个流程图草稿，AI 帮你整理对齐；你标注一个节点写"这里需要异常处理分支"，AI 自动补全逻辑。

做原型设计、技术讨论、头脑风暴时很实用。人负责结构和意图，AI 负责执行和细化，画布变成了人跟 AI 的共享工作区。

Starter Kit 生态

tldraw 团队维护了 7 个 starter kit，全部 MIT 协议，一行命令拉起来就能改：

npx create-tldraw@latest

七个方向的起点：

• Multiplayer：自托管多人协作，底层是 Cloudflare Durable Objects，跟 tldraw.com 同一套技术栈
• Agent：AI 代理读写画布内容，让 LLM 成为画布的操作用户
• Workflow：拖拽式节点编排，适合可视化编程和自动化流水线
• Chat：画布上的 AI 对话，对话过程中随时画图标注
• Image pipeline：节点式图片生成管线，每个节点是一个图像处理步骤
• Branching chat：可视化分支的 AI 对话，可以同时探索多条对话路径
• Shader：跟画布交互的 WebGL 着色器

这些 kit 不是 demo 演示，是直接拿来改的起点。每个都包含了完整的 shapes、tools 和 UI 组件实现，看代码就能理解 tldraw 的扩展机制。

DOM 渲染的选择

tldraw 用 DOM 渲染画布，而不是 Canvas。这个选择带来的好处是：画布里可以嵌入任何浏览器支持的东西。YouTube 视频、Figma 文件、GitHub 预览、任意网页，embed shape 直接支持。你甚至可以在画布里嵌入一个可交互的网页。

DOM 方案也让触屏、平板、手机的兼容性比 Canvas 方案更好处理。响应式布局和触摸事件这些，浏览器原生就解决了。

许可证

开发阶段 SDK 免费使用。上生产环境需要购买 license key。个人开发者和小团队影响不大，商业项目需要评估成本。源代码全部公开，许可证条款透明。

写到最后

如果你需要在产品里嵌入画布，不管是用在白板协作、AI 可视化、流程图编辑还是内容创作，tldraw 是值得评估的方案。它解决的问题很具体：给你一个能跑的画布引擎，剩下的你来定义。代码经过 4.7 万开发者的检验，文档齐全，示例丰富，拿来就能用。