tldraw-skill: Draw professional architecture, flow and sequence diagrams from natural language | Claude Code Skill explained
Learn how to use tldraw-skill (a Claude Code skill built on tldraw) to: obtain the repo, install the skill on a supported platform, select one of six diagram presets, provide natural-language prompts to generate structured diagrams, run visual self-check/iterations, and export PNG or SVG outputs. Follow the project README for deployment and verification.
Image Analysis
1. Readable text (line/block):
- Main title (center, large font): "tldraw-skill"
- Subtitle (below main title): "Natural language → Professional diagrams"
- Three buttons/labels (below subtitle, left to right):
- Left button: "Claude Code Skill"
- Middle button: "6 diagram presets"
- Right button: "Visual self-check loop"
2. UI elements / visible interactive items (facts):
- Dark background (near-black or deep blue) with a grid-like faint line pattern.
- Centered title and subtitle layout; title uses a gradient fill (blue to cyan/green).
- Three rectangular/capsule buttons side by side, each with different color tones (left bluish, middle cyan, right greenish), with white or light text.
- A small right-pointing arrow icon at the top-right (single arrow, light blue/cyan).
- Overall horizontal layout with elements vertically centered and slightly lower (title mid-upper, buttons below it).
- No visible diagrams, tables, or numeric data (only text indicating the existence of diagram presets).
3. Details of visible phenomena (facts):
- Title in bold sans-serif with large size and gradient fill.
- Subtitle in smaller, light-colored sans-serif; arrow uses a single-character “→”.
- Background has subtle grid lines and dark gradient; color scheme is deep blue/cyan.
- Buttons are rounded rectangles with spacing, slight inner shadow or highlight for depth.
- Image contains no people, example diagrams, or dynamic elements (static UI).
4. Unreadable or uncertain content:
- Exact color values (hex codes) cannot be determined.
- Cannot confirm whether the image is a webpage, in-app UI, or a poster from the static image alone.
- The interaction meaning of the top-right arrow (e.g., next page/navigation) is unclear from the static image.
- The specific click behavior of the buttons cannot be confirmed from the image.
- Any smaller or faint text at edges is not clearly readable; main visible text is legible.
5. Inferences (marked as inference, not fact):
- The interface may be a product landing page, intro screen, or pre-login promo (inferred from title and button layout).
- “tldraw-skill” likely names the product or feature module (inference).
- “6 diagram presets” suggests the product offers six preset diagram types (inference as no actual diagrams shown).
- “Visual self-check loop” may refer to an automated visual validation or QA function (inference).
- “Claude Code Skill” likely refers to a feature label tied to Claude (model/service) integration (inference).
SkillPI Creation Analysis
Purpose:
- According to the source summary, tldraw-skill aims to let users convert natural-language descriptions into structured, delivery-ready diagrams (architecture, flow, sequence, ML/DL, ER, UML class diagrams) and export them as PNG/SVG to reduce manual layout and styling time.
Image evidence highlights:
- The image is promotional/UI-oriented and displays the product name “tldraw-skill”, subtitle “Natural language → Professional diagrams”, and three feature labels: “Claude Code Skill”, “6 diagram presets”, and “Visual self-check loop”.
- The screenshot supports the claim that the project emphasizes NL input, preset diagram types, and a visual QA loop, but it does not show concrete diagram outputs or runtime interactions.
Suggested usage steps (based on claims in the source; presented as a reproducible attempt path, not a validated runbook):
1. Retrieve the repository at https://github.com/Agents365-ai/tldraw-skill (source-provided link).
2. Prepare a compatible environment: follow the repository README to install dependencies and configure a Claude Code-compatible runtime or other supported platform listed in the source (Claude Code, Opencode, OpenClaw, Hermes Agent, OpenAI Codex—these platforms were named in the summary and should be verified for compatibility).
3. Invoke the skill: load the tldraw-skill into the supported agent/runtime and choose one of the six diagram presets (architecture, flow, sequence, ML/DL, ER, UML class).
4. Provide a natural-language prompt describing components, steps, or entity relationships; the skill should generate structured diagram elements and connections based on the prompt.
5. Run the visual self-check/iteration routine if available: the source mentions an automatic visual inspection and up to five iterative review passes to fix arrow labels, layout, and other visual issues.
6. Export the final diagram as PNG or SVG.
Prerequisites and items to verify:
- Verify the repository contains installation instructions, dependency lists, and platform-specific deployment steps (keys/permissions) required to run on Claude Code or other listed platforms.
- Confirm implementation details for the “visual self-check loop”, “five review iterations”, and “complexity-adaptive layout” in source code or documentation (how iterations are controlled, what checks are performed, and whether fixes are automatic or suggested).
- Check whether exported diagrams are editable, how labels/arrows are represented in the exported files, and interoperability with other diagram tools (e.g., draw.io, Mermaid).
- Confirm licensing, data/telemetry behavior, and any required API keys before using in production.
Caveats:
- The above steps reflect the documented claims from the video summary and the promotional image. Do not assume successful reproduction or production readiness without validating the repository, running tests, and reviewing implementation details in the project documentation.