SuperAPI AI 工具集

tldraw-desktop

设计与创作

查看项目

更新于 10-16 02:05

技能介绍

tldraw Desktop Canvas API 用于通过本地 HTTP 接口以编程方式创建和修改 tldraw 桌面应用中的图表。所有 API 调用必须使用 curl,不应使用 fetch、wget 或其他 HTTP 客户端。

用途

该工具适用于用户要求绘制图表、创建视觉内容、草拟线框图,或通过本地 HTTP API(端口 7236)与 tldraw 桌面画布交互的场景。

主要能力

  • 列出当前打开的文档,获取文档 ID。
  • 读取指定文档当前页面上的所有形状。
  • 通过结构化动作创建、更新、删除形状,支持矩形、椭圆、三角形、菱形、六边形、胶囊、云、星形、心形、五边形、八边形、叉框、勾选框、梯形、平行四边形、粗箭头等多种形状类型。
  • 支持文本、箭头、线条、便签、手绘等元素。
  • 提供对齐、分布、堆叠、放置、移动、缩放、旋转、置顶、置底等布局操作。
  • 支持通过 exec 接口运行任意 JavaScript 代码,以访问 tldraw Editor 的高级功能。
  • 支持截图功能,可指定尺寸(small、medium、large、full)进行视觉验证。

使用方式

基本工作流程如下:

  1. 使用 curl -s http://localhost:7236/api/doc 列出打开的文档,获取 DOC_ID。
  2. 使用 curl -s http://localhost:7236/api/doc/{id}/shapes 读取当前形状。
  3. 使用 curl -s -X POST http://localhost:7236/api/doc/{id}/actions 创建或修改形状。
  4. 使用 curl -s http://localhost:7236/api/doc/{id}/screenshot -o f.jpg 截图验证结果。

每次修改后必须截图检查是否存在形状重叠、箭头交叉或文字拥挤等问题。若发现重叠,应使用 place、move、stack、align 或 distribute 等动作修复,并再次截图确认。

结构化动作通过 POST 到 /api/doc/:id/actions 发送,请求体为 {"actions": [...]}。同一请求中的所有动作视为单次撤销步骤。支持的动作包括 create、update、delete、clear、label、move、place、align、distribute、stack、resize、rotate、bringToFront、sendToBack、pen。

对于结构化动作未覆盖的高级操作,可使用 exec 接口:curl -s -X POST "$BASE/exec" -H "Content-Type: application/json" -d '{"code": "return editor.getCurrentPageShapeIds().size"}'。完整 SDK 文档可通过 curl -s http://localhost:7236/api/llms 获取。

适用场景

  • 自动化生成流程图、架构图、决策图等。
  • 快速创建线框图和视觉草图。
  • 通过脚本批量修改 tldraw 画布内容。
  • 需要以编程方式与 tldraw 桌面应用交互的自动化任务。

限制

  • 必须使用 curl 进行所有 HTTP 调用。
  • 依赖本地 tldraw 桌面应用运行在端口 7236。
  • 每次修改后必须截图检查重叠,并修复布局问题。
  • 大型图表(7 个以上形状)建议分阶段构建,逐步添加并调整布局。
  • 默认形状尺寸约为 300x200,形状间距约 200。
  • 默认样式为黑色、中等粗细、绘制风格、居中文本、无填充。
  • 建议为形状分配可读的 shapeId,便于后续引用。
  • 关于收费、价格、平台支持等具体信息暂未提供。