tldraw 远不止是一个白板：你可以构建的 14 种东西

大多数人第一次接触 tldraw 时，它只是一个精美的在线白板。这反而是最无趣的理解方式。

公开的 tldraw SDK 是一个可编程的、基于 React 的无限画布。它的形状可以是实时的应用组件。编辑器可以通过代码驱动。它的工具、绑定、存储、同步、文件与界面都可以被扩展。这使得它成为整类空间软件的基础。

如果你的产品需要将可交互的东西在空间中进行排列、连接、协作，或者让 AI 能直观地操作它们，那么 tldraw 值得认真考虑。

1. 构建真正的白板与图表编辑器

最直接的起点依然很强。tldraw 提供了现代画布应有的交互模型：平移、缩放、选择、编组、对齐、调整大小、旋转、富文本、箭头、帧、页面、撤销/重做、键盘控制、拖放以及剪贴板行为。

• 产品： 协作白板、流程图工具、思维导图、架构图、项目规划板、网络拓扑图、数据库设计器、故事板以及流程编辑器
• 为何重要： 你从成熟的编辑器起步，无需重新构建耗费数年精力的指针、摄像机、选择与几何行为

2. 将 React 组件变为画布形状

这是概念上的突破。自定义的 tldraw 形状可以是一个活着的 React 组件，而不是一块画出的矩形。它可以包含应用状态、控件、媒体、图表、状态或来自后端的数据，同时仍然参与选择、移动、缩放、编组、历史记录、导出与协作。

• 自定义形状创意： 数据库表、代码卡片、工作流节点、实时仪表盘、图片浏览器、地图、视频、表单、游戏棋子、服务器监控器、模型端点以及迷你应用窗口
• 深度控制： 自定义几何体、缩放行为、手柄、选择指示器、文本提取、无障碍描述、数据迁移以及导出外观

至此，无限画布不再是绘图表面，而变成了一个空间应用的外壳。

3. 创造全新的工具

tldraw 工具是状态机交互。你可以创建特定领域的方式来添加和操作内容，而不用让每个工作流都通过默认的指针和绘图工具来完成。

• 交互模式： 点击放置、拖拽创建、多步连接器、测量、平面图墙体、时间线编辑、端口连线、引导式标注、套索分析以及游戏控制
• 输入： 指针、触摸、键盘、焦点、边缘滚动、点击检测以及摄像机行为都可以参与到体验中

4. 用绑定模拟真实关系

那些看起来只是连接起来的对象，一旦用户移动它们就会断裂。绑定保持了形状之间的语义关系。

• 例子： 附着在框上的箭头、附着在端口上的工作流边、UML 关系、锚定标签、父子系统、地图标注、约束、依赖以及电路连接

绑定让画布能够表示一个真正的图，而不仅仅是它的一张图片。

5. 构建可视化工作流和自动化产品

官方的工作流起步套件展示了拖放节点、连接、路由以及可替换的执行引擎。它为类似 n8n、ComfyUI、Langflow 或 Node-RED 的产品打下了坚实基础，尤其是当领域需要一个定制界面时。

• 使用场景： AI 智能体管道、ETL 系统、无代码自动化、数据转换、部署工作流、创意管线以及领域特定的可视化编程
• 执行： 画布可以作为编辑器，而你的引擎负责验证和运行图

6. 让 AI 在画布上拥有眼睛和双手

画布可以成为结构化的视觉上下文供 AI 使用。智能体不是生成一张静态图片，而是可以检查对象并发出受控的动作来创建、更新、连接、移动、编组或解释它们。

• 体验： 提示词生成图、文字生成架构、草图识别、自动布局、图表评论、可视化规划、基于选择区域的转换以及画布感知的助手
• 官方基础： 智能体（Agent）、聊天（Chat）、分支聊天（Branching Chat）、工作流（Workflow）和图像管线（Image Pipeline）起步套件覆盖了其中几种模式

由提供商支持的行为仍然依赖于模型、凭证、配额和部署环境。SDK 提供了视觉基础，但无法保证模型质量。

7. 添加实时多人协作

通过 tldraw sync，同一个画布可以变成一个持久的多人房间。用户可以一起编辑，同时看到光标、在线状态、身份、摄像机跟随行为以及自定义的协作状态。

• 产品： 共享白板、远程教室、设计评审、事故响应室、规划板、多人桌面游戏表面以及活文档
• 生产环境注意事项： 房间隔离、身份验证、资源存储、显式源地址、持久化、权限，以及将同步元数据视为不可信输入

生产路径是自托管的。你不需要使用私有的 tldraw.com 内部机制来构建它。

8. 将画布视为持久化的应用数据

编辑器建立在一个响应式存储之上，包含形状、绑定、页面、资源及其他记录。应用可以观察状态、验证它、附加副作用、维护历史记录，并在本地或远程持久化它。

• 持久化： 基于 IndexedDB 的本地持久化、跨标签页同步、后端存储、快照、房间存储以及自定义记录
• 演化： 模式迁移（schema migrations）让自定义形状和元数据在产品变更后仍然有效
• 导航： 深度链接可以定位到页面、形状或画布位置

9. 将 .tldr 当作真正的文档格式

应用可以使用当前的应用模式解析和序列化官方的 .tldr 文档。这支持导入、导出、备份、文档库以及在全新编辑器之间进行来回转换。

重要的是使用 tldraw 官方的序列化器和解析器，而不是手写 JSON。包含自定义形状的文档只能移植到另一个注册了相同模式和形状工具的主机上。

10. 将 Mermaid 变成可编辑的原生对象

@tldraw/mermaid 包能够将 Mermaid 语法转换为原生的 tldraw 形状和连接，而不是把它扁平化为静态 SVG。

• 这能做什么： 图表即代码编辑器、架构文档、序列图、将 Mermaid 粘贴到画布、仓库可视化以及人类可以继续编辑的 AI 生成图表

Mermaid 可以作为交换格式，而 tldraw 仍然是交互编辑环境。

11. 导出、演示和嵌入

画布内容可以变成 SVG 或位图图像，用于缩略图、报告、预览、文档、打印工作流以及社交图片。自定义形状可以定义它们在导出中的外观。

• 演示模式： 只读查看器、可控摄像机体验、幻灯片、固定摄像机演示以及嵌入式交互图表
• 产品集成： 画布可以放在更大的 React 应用内部，配合你自己的侧边栏、检视器、命令、对话框和数据模型

12. 构建标注和教育工具

仅靠文字不够的地方，空间标记就非常有用。

• 例子： 图片标注、截图反馈、PDF 页面标注、考试评分、视觉辅导、设计评审、医学图像标注、教案规划以及远程教室

自定义形状可以暴露语义文本和无障碍描述，使视觉内容更容易搜索，也对辅助技术更有用。

13. 替换整个界面

你可以在保留熟悉的画布行为的同时，替换掉周围的产品 UI。菜单、工具栏、上下文菜单、浮层、动作、快捷键、面板和偏好设置都可以自定义或移除。

• 模式： 极简编辑器、只读查看器、权限感知工作区、品牌化 SaaS 产品、专注的标注工具或完整的领域特定应用
• 平台细节： 主题、国际化、用户偏好、减少动效、焦点、键盘访问以及自定义 UI 原语都属于公开功能表面

14. 构建一点也不像白板的东西

官方的示例是最好的证明，展示了这个模型能走多远。它们包括一个 D3 地图、PDF 编辑器模式、图片标注器、考试评分、幻灯片、战争迷雾、塔防、重力模拟、着色器背景、暴风雪、时间线滚动器以及数百个 Mermaid 图表。

tldraw 是基于 DOM 的，因此它不能替代高帧率的游戏引擎。但在空间界面、模拟、桌面游戏系统、可视化工具以及交互对象比原始渲染吞吐量更重要的产品中，它表现得异常出色。

我会为本地 AI 构建的机会

• Agent 追踪调试器： 以活图的形式可视化工具调用、交接、Token 使用、延迟、失败和重试
• 本地 AI 架构实验室： 将模型、GPU、向量存储、路由器、工具和智能体拖到画布上，然后模拟请求流经它们
• 可视化推理路由器： 通过条件路由节点连接本地和云端模型，并实时检查执行情况
• 基准测试擂台： 空间上比较模型输出、指标、提示和工件，而不是把它们埋在表格里
• 训练数据管道： 连接摄取、过滤、去重、打分、审核和导出阶段
• DGX Spark 控制室： 将活跃的模型、端口、内存压力、队列和工作负载表示为活的形状
• AI 系统设计板： 让智能体读取架构并识别缺失的依赖、瓶颈或安全边界

Hermes tldraw 技能的定位

我构建了一个 Hermes 技能，为智能体提供版本感知的指南，涉及 tldraw 公开 SDK。它涵盖项目检查、Editor 和 store API、自定义形状、工具、绑定、.tldr 文件、迁移、导出、Mermaid、同步、浏览器自动化、起步套件评估、安全和部署边界。

使用以下命令安装：hermes skills install r0b0tlab/tldraw-skill/skills/tldraw

仓库：https://github.com/r0b0tlab/tldraw-skill

实际边界

tldraw 最强的场景是那些核心交互是将交互对象在空间中进行排列和连接的 React Web 应用。请使用文档化的公开 SDK API，而不是私有的 tldraw.com 内部机制；检查项目中安装的版本；测试完整的浏览器体验，而不仅仅依赖类型。

该 SDK 使用 tldraw 许可证（而非 MIT）进行源码可用分发。生产项目需要审查当前的许可证密钥和署名要求。官方的起步代码可能有自己的许可证，但这不会重新许可 SDK 依赖。

要点

无限画布正成为一种新的应用表面。在这之上，图表变得可执行，AI 获得视觉上下文，多人协作变得空间化，应用对象可以像墙上的想法一样自然地排列。

tldraw 不仅仅是一个绘制软件图表的地方。它是一个将图表变成软件的工具包。