tldraw 无限画布白板 SDK

问题：自建白板的隐性成本

想在 React 里做无限画布，通常第一步不是画图形，而是和一堆工程细节搏斗：平移与缩放下的坐标换算、旋转对齐的栅格约束、撤销/重做的栈、内容分片的序列化，以及多人场景下的冲突合并。一旦团队还要接 AI 生成、自动排版或自定义图形，脚本化的画布很容易变成自研基础库，维护成本远超演示原型。

核心能力与工作方式

该技能把这类底层工作收敛到 tldraw 上，提供开箱即用的 React 画布与编辑器：

• 渲染与相机：维护无限画布坐标、视口变换和图层，让平移、缩放不必手写矩阵。
• 绘图与图表：内置手绘、形状、文本、连线等基础工具，覆盖白板、流程图和草图场景。
• 实时协作：提供多人协同所需的数据通路与同步逻辑，适合在同一画布上并行编辑。
• AI 集成：允许把模型输出接进画布内容或工具流程，而不是事后贴图。
• 扩展机制：通过自定义 shape、tool 和 UI 组件替换默认交互，而不是改内核。

使用时按上游文档初始化项目，再在 React 组件树中挂载画布组件，即可拿到一个可交互的编辑器。

适用边界与注意点

• 需要区分 tldraw 核心包与 tldraw.com 的平台包，前者是自托管画布，后者偏云服务。
• 仓库开发服务器会从 localhost:5420 运行示例应用，属于上游开发流程，不一定是运行时依赖。
• 上游要求 Node.js ^20.0.0，并建议启用 corepack 以固定 yarn 版本；这会影响本地环境和 CI。
• 示例中提到的 workflow、图像 pipeline 更适合节点式自动化与可视化编程平台；若你的交互偏表单或表格，不一定合适。
• 多人协作的具体部署形态、鉴权和冲突策略仍需按项目后端设计，SDK 只解决画布层问题。