tldraw

想把一段流程说明变成看得见的关系图，或在讨论界面时先画出大致布局，tldraw 提供了一个从图形、箭头和文字开始的浏览器白板。它适合先表达结构，再逐步补充细节。

tldraw是什么

tldraw 是基于浏览器的白板画布，将图形绘制、箭头表达和文本标注放在同一工作空间，可用于流程草图、思维整理和界面讨论。除直接使用的在线白板外，它另有面向开发者的 SDK，用于在产品中集成画布功能。两者对应不同使用场景，不能混同使用条件。

tldraw的主要功能

• 图形绘制：用图形表示流程节点、内容模块或页面区域，为抽象想法建立可以对照讨论的视觉结构。
• 箭头表达：用箭头指示先后顺序、信息流向或模块关系，适合梳理操作步骤与分支走向。
• 文本标注：在画布中添加标题、节点说明和待确认事项，让草图不只呈现形状，也交代具体含义。
• 流程草图：组合图形、箭头与文字，把一段线性说明拆成多个环节，便于检查遗漏或顺序问题。
• 界面讨论：以图形划分页面区域，用文字描述内容及操作意图，适合在细化视觉设计前讨论布局。
• 画布集成：开发者可另行了解其 SDK，将画布功能引入自己的产品，具体使用范围需核对授权。

如何使用tldraw

• 进入白板：打开 tldraw 官网，在浏览器中进入白板工作界面。
• 明确主题：先用文本写下本次要整理的问题，例如一个操作流程或页面结构。
• 绘制模块：用图形表示主要节点，先画核心部分，避免一开始堆入过多细节。
• 标明关系：添加箭头说明节点间的方向，并用文字补充必要的条件或解释。
• 检查草图：沿着箭头阅读流程，核对节点含义，补充尚未表达清楚的部分。
• 区分用途：若目标是在自有产品内嵌入画布，转到开发者站点查阅 SDK 文档与授权。

tldraw的核心优势

• 从浏览器开始：以网页白板承载草图工作，适合需要快速展开想法、不先搭建复杂文档结构的场景。
• 表达元素直接：图形、箭头和文字分别承担节点、关系与解释，减少纯文字描述空间结构时的歧义。
• 便于拆解问题：将一整段说明拆成可视节点，有助于逐项检查环节，而不是在长段落里寻找关系。
• 兼顾集成需求：除在线使用场景外，另有 SDK 可供开发者了解，不必把网页白板当作唯一产品形态。

tldraw的适用人群

• 产品人员：梳理操作路径、页面模块及待讨论的问题，先明确结构再补充详细需求。
• 设计人员：绘制初步界面布局，围绕区域安排和内容关系开展讨论。
• 学习者：将知识点写成节点，用箭头整理概念之间的顺序或关联。
• 开发者：使用白板说明模块关系，或进一步评估 SDK 是否符合产品集成需求。

价格与免费试用

在线白板当前的计费模式、免费额度及使用限制，应以官网实际展示为准，本文不列出未经确认的价格或配额。开发者 SDK 的授权需单独查阅 tldraw.dev 上的相关说明，不能根据在线白板的使用条件推断 SDK 可免费商用。

效果点评

tldraw 的价值在于用基础视觉元素表达结构，适合流程初稿、想法整理与界面讨论。对于先说明关系、暂不追求精细呈现的任务，这种方式比较直接。不过，白板草图不能替代完整需求文档；涉及详细规范、使用限制或产品集成时，仍需补充文字说明并核对官方信息。