- tldraw Offline 是 2026 年 7 月发布的免费离线桌面白板,跨 macOS / Windows / Linux,无账号、无服务器
- 文档保存为自包含 .tldraw 文件,画布、图片、视频、脚本全打包在一个文件里
- 运行后暴露本地 HTTP API(localhost:7236),Agent 通过代码直接读写画布,不需要模拟鼠标
- 支持持久脚本:写入的脚本在文件加载时自动运行,可实现动画、按钮、数据可视化
- Agent Skill 一键安装:菜单 → Develop → Install Agent Skills,自动写入 Claude / Codex / Cursor / Hermes 等
第一步:下载与安装
官网直接下载,不需要注册、不需要登录、不需要信用卡。
| |
|---|
| |
| |
| 同上,下载 AppImage 或从 GitHub Releases 获取 |
| |
下载后直接打开 App,你会看到一个空白画布,左上角菜单包含新建、打开、保存等基础操作。
一句话规则: App 保持打开状态,关闭窗口不等于退出——让它一直运行,Agent 才能通过 API 连接。
第二步:基础操作——画布与文件
画布操作和主流白板工具一致,上手零门槛。
| |
|---|
| |
| |
| |
| |
| |
| |
| Cmd+S,存为 .tldraw 文件(所有内容打包) |
| Cmd+O,拖拽 .tldraw 文件到 App 窗口也行 |
tldraw 文件是自包含的:画布上的所有形状、图片、嵌入视频、写入的脚本都会存进一个 .tldraw 文件。你可以通过网盘、Git、AirDrop 任意分发,收件人打开就能继续编辑。
第三步:核心功能——安装 Agent Skill
这是 tldraw Offline 区别于普通白板的关键步骤:让 AI Agent 能直接操控画布。
- 打开 tldraw Offline,新建或打开一个文件
- 顶部菜单 → Develop → Install Agent Skills
- App 会自动检测你已安装的 Agent(Claude Code、Codex、Cursor、Hermes 等)
- 把对应的 tldraw skill 写入它们的 skills 目录(如 ~/.claude/skills/tldraw-offline)
安装完成后,你的 Agent 就知道如何通过 localhost:7236 与当前打开的 tldraw 画布通信。不需要手动配置 API 地址或端口——skill 已经包含了这些信息。
一句话规则: 安装 skill 后 Agent 就能读写画布,但 App 窗口必须保持打开。关掉 App,API 也停了。
第四步:Agent 与画布协作——实战场景
安装 skill 后,你可以让 Agent 直接在画布上画图。Agent 不需要模拟人类去拖拽鼠标——它通过代码调用画布的 store API 生成形状,结果更精确、速度更快。
| |
|---|
| "在 tldraw 上画一个微服务架构图:三个服务方块横向排列,之间用箭头标 API 调用,顶部加标题" |
| "画一个用户注册流程图,从输入邮箱开始,经过验证邮箱、设置密码、完成注册三个步骤" |
| "在 tldraw 上画出移动端首页线框图,包含搜索栏、推荐卡片网格、底部 tab 导航" |
| "画一条项目里程碑时间线,从 7 月到 12 月,每月的关键节点用圆角矩形标注" |
| "把右上角那个蓝色方块的文字改成'线上环境',再加一条从它指向数据库的箭头" |
示例:一次完整的 Agent 协作
以下是一段可以直接给 Claude / Codex / Hermes 的指令:
请使用 tldraw skill 在当前画布上画一张"勾股定理讲解图":
Agent 执行后会在几秒内生成完整的矢量图形。不满意可以继续让它微调位置、颜色或文字内容。
第五步:进阶功能——持久脚本
这是 tldraw Offline 最强大的能力——写在画布中的脚本在文件加载时自动运行,让单张白板变成一个可以交互的小应用。
| |
|---|
| "在这个画布上写一个持久脚本:画一个按钮,点击按钮计数器 +1,显示在按钮旁边。每次打开文件都要能用" |
| "写一个持久脚本:从模拟数据生成柱状图,数据点 [30, 45, 25, 60, 40],柱子用渐变色" |
| "在这个画布上创建一个 Kanban 看板:待办、进行中、已完成三列,每列下面可以添加卡片,卡片可拖动" |
| "写一个脚本实现演示模式:点击切换下一张幻灯片,每张幻灯片是画布的一个 frame" |
| "画一个服务器状态面板,从本地 JSON 文件读取数据,显示 CPU 和内存使用率的环形图" |
持久脚本的工作方式:
- Agent 把 JavaScript 代码写入 .tldraw 文件的脚本字段
- 脚本可以访问画布上的形状、创建新形状、响应用户点击
一句话规则: 想让画布记住行为,让 Agent 写脚本时明确说"持久脚本"或"保存为脚本"。
实战串联:从安装到出图
完整的单次工作流:
- 打开 tldraw Offline,新建一个文件(Cmd+N)
- 菜单 → Develop → Install Agent Skills(只需安装一次)
- 切换到终端 / Cursor / Claude Code,对 Agent 说:
"请读取 tldraw 当前画布,然后画一个客户端→API→数据库的三层架构图,每层用不同颜色区分"
- 不满意可以追加指令:"把 API 层拆成两个方块:API Gateway 和微服务"
- 画完后 Cmd+S 保存,文件发给同事,对方打开即可继续编辑
这就是 tldraw Offline 的核心体验: 你负责构思、指挥和审核,Agent 负责画、改和优化。所有数据在你本地,文件是你的,谁也别想拿走。