tldraw-skill

仓库创建 2026年3月4日最近提交 11 天前SkillHot 收录 20 天前

▸ 精选理由

快速产出手绘风架构/流程图，便于导出与复用。

▸ 风险提示

需要安装第三方 npm 工具（会拉取外部包）

这个 Skill 做什么

生成 tldraw 白板式图表（.tldr），并可导出为 PNG/SVG。

生成白板风格的可编辑图表，输出 .tldr（tldraw JSON）并能导出成 PNG/SVG，适合流程图、架构图、关系图等可视化展示。当系统有 3 个以上组件或数据流复杂，或者讲解时靠文字不够直观就该用它。图风手绘、箭头路由平滑，适合要快速产出又好看的白板式图示场景。

▸ 展开 SKILL.md 英文原文

Use when user requests diagrams, flowcharts, architecture charts, or visualizations. Also use proactively when explaining systems with 3+ components, complex data flows, or relationships that benefit from visual representation. Generates .tldr JSON files and exports to PNG/SVG locally using @kitschpatrol/tldraw-cli.

内容创作白板图导出PNGtldraw通用

Stars

Forks

仓库内 Skill

+18

7 日增星

安装 / 使用

给你的 Agent 一句话（通用）

帮我安装这个 skill：https://raw.githubusercontent.com/Agents365-ai/tldraw-skill/main/skills/tldraw-skill/SKILL.md

或 curl 直取 SKILL.md

curl -fsSL "https://raw.githubusercontent.com/Agents365-ai/tldraw-skill/main/skills/tldraw-skill/SKILL.md"

SKILL.MD 节选查看完整文件 ↗

# tldraw Whiteboard Diagrams

## Overview

Generate modern whiteboard-style diagrams as `.tldr` JSON files and export to PNG/SVG using `@kitschpatrol/tldraw-cli`. tldraw produces clean hand-drawn aesthetic diagrams with rich shape libraries and smooth arrow routing — well-suited for casual or whiteboard-style visualizations.

**Format:** `.tldr` JSON
**Export:** PNG, SVG (via `@kitschpatrol/tldraw-cli`)
**Aesthetic:** Hand-drawn whiteboard style by default; switchable to clean fonts via `font` prop.

## When to Use

**Explicit triggers:** user says "diagram", "flowchart", "draw", "visualize", "whiteboard diagram", "tldraw diagram", "architecture diagram", "sketch this out".

**Proactive trig

via SKILL·HOT · 数据来自 GitHub 公开信息 · 原文版权归作者所有