photoqiu/tldraw-skill
Developer toolsこのページは AI により自動翻訳されています。技術的な詳細は原文をご確認ください。 原文を見る
Claude Code skill for generating tldraw whiteboard diagrams (.tldr) and exporting to PNG/SVG via tldraw-cli.
概要
- Generates .tldr JSON files from natural language descriptions - Exports diagrams to PNG or SVG using @kitschpatrol/tldraw-cli - : Architecture, Flowchart, Sequence, ML/Deep Learning, ERD, UML — with preset shape vocabulary and layout conventions - — uses vision to read the exported PNG and auto-fix overlaps, clipped labels, and missing arrows before showing you - — collect feedback, apply targeted JSON edits, re-export until approved (5-round safety valve) - — spacing automatically grows with node count to prevent overlaps - — pulls the latest skill version once per 24h - — ask for any output path (e.g. .
README
以下は原文 README の抜粋です。原文を見る。
tldraw-skill — From Text to Whiteboard Diagrams
What it does
- Generates
.tldrJSON files from natural language descriptions - Exports diagrams to PNG or SVG using
@kitschpatrol/tldraw-cli - 6 diagram type presets: Architecture, Flowchart, Sequence, ML/Deep Learning, ERD, UML — with preset shape vocabulary and layout conventions
- Self-check loop — uses vision to read the exported PNG and auto-fix overlaps, clipped labels, and missing arrows before showing you
- Iterative review loop — collect feedback, apply targeted JSON edits, re-export until approved (5-round safety valve)
- Complexity-scaled layout — spacing automatically grows with node count to prevent overlaps
- Auto-update — pulls the latest skill version once per 24h
- Custom output directory — ask for any output path (e.g.
./artifacts/) and the skill willmkdir -pand export there - Triggers automatically when diagrams would help explain complex systems
- Hand-drawn whiteboard aesthetic by default; switchable to clean fonts
Multi-Platform Support
Works with all major AI coding agents that support the Agent Skills format:
| Platform | Status | Details |
|---|---|---|
| Claude Code | ✅ Full support | Native SKILL.md format |
| Opencode | ✅ Full support | Native SKILL.md via skill tool; also reads .claude/skills/ paths |
| OpenClaw / ClawHub | ✅ Full support | metadata.openclaw namespace, dependency gating, ClawHub installer |
| Hermes Agent | ✅ Full support | metadata.hermes namespace, tags, tool gating |
| OpenAI Codex | ✅ Compatible | Place under .agents/skills/ |
| SkillsMP | ✅ Indexed | GitHub topics configured |
Comparison
vs Native Agent (no skill)
| Feature | Native agent | This skill |
|---|---|---|
Generate .tldr JSON |
Partial — LLMs often produce schema-invalid records | Yes — schema-correct skeleton + record templates |
| Self-check after export | No | Yes — reads PNG and auto-fixes 6 issue types |
| Iterative review loop | No — must manually re-prompt | Yes — targeted edits, 5-round safety valve |
| Proactive triggers | No — only when explicitly asked | Yes — auto-suggests when 3+ components |
| Layout guidelines | None — varies by run | Complexity-scaled spacing, routing corridors, hub placement |
| Diagram type presets | No | Yes — 6 presets (Architecture, Flowchart, Sequence, ML/DL, ERD, UML) |
| Color palette | Random / inconsistent | 10-color semantic system (blue=services, green=DB, violet=auth…) |
| Arrow distribution rules | Basic | Distribute normalizedAnchor across shape perimeter to prevent stacking |
| Index ordering rules | Often wrong (uses b1, c1) |
Strict a* format with z-order conventions |
| Multi-platform metadata | No | Yes — OpenClaw, Hermes, SkillsMP namespaces |
vs Other Diagram Skills
推奨ツール
別のキーワードを試すか、フィルタを外してください。
インストール
npx skillfish add photoqiu/tldraw-skill