SuperAPI AI 工具集

tldraw-skill

数据与分析

查看项目

更新于 10-15 16:42

技能介绍

用途:当用户要求画图、流程图、架构图或可视化,或在解释含 3 个以上组件的系统时,生成 tldraw 手绘风白板图。输出为 .tldr JSON,可用 @kitschpatrol/tldraw-cli 导出 PNG(默认)或 SVG。

安装与依赖:npm install -g @kitschpatrol/tldraw-cli,用 tldraw --version 验证,三平台一致。首次导出经 puppeteer 的固定 Chrome 渲染,若报 Could not find Chrome (ver. <x>),按其提示版本执行 npx puppeteer browsers install chrome@<version-from-error>,仅需一次。

主要能力:.tldr 骨架必须含 document:document 与 page:page1 两条记录,形状置于其后并设 parentId 为 page:page1;形状 ID 用 shape:xxx;index 用单字符 base-62 键(a0–a9、aA–aZ、aa–az),不可用 a10 或 b/c 开头。geo 支持 rectangle、ellipse、oval、diamond、cloud、hexagon、triangle、star、pentagon、octagon、trapezoid、rhombus、arrow-*、x-box、check-box、heart;样式含 fill(semi/solid/none/pattern)、dash(draw/solid/dashed/dotted)、size、font。箭头 x/y 为 0,0,须用 binding 与 boundShapeId 绑定两端,normalizedAnchor 指定连接点,可用 bend、dash、spline、9 种箭头端点;同一形状多箭头需分散锚点,同一对节点多箭头需对称分散 bend。另有 frame 容器(子形状 parentId 指向 frame,x/y 相对 frame)与 note 便签(无 w/h)用于分组与批注。

使用方式:先确认图类型、输出格式与路径,再规划形状、连线与布局,写 JSON、导出 PNG,用视觉能力自检(文本溢出、文字重叠、未绑定箭头等,最多 2 轮),再进入评审循环,按反馈做最小 JSON 修改,每次覆盖同一文件,多轮后建议在 tldraw.com 或桌面端微调。

限制:无实色填充(solid 为浅色调),不适合 logo、精确矢量或严格 UML;大量节点自动布局宜用 mermaid;像素级复刻原图不适用。其余如价格、平台支持等暂未提供。