Run any Skill in Manus with one click

tldraw-diagram

Stars0

Forks0

UpdatedJuly 18, 2026 at 19:14

Generates a tldraw canvas file (.tldr / .tldraw JSON) from a described diagram or outline — boxes, arrows, text, frames, and notes positioned on the infinite canvas — so it opens directly in tldraw or tldraw-offline as editable shapes, with no browser or render step. Use this skill when the user says "make me a tldraw diagram", "generate a .tldr file", "turn this architecture into a tldraw whiteboard", "build an editable canvas of this flow", or wants a hand-editable tldraw document rather than a flat image. Not for rendering a canvas to PNG/SVG (that needs a browser — see tldraw-export), converting Mermaid source (see mermaid-to-tldraw), or authoring Mermaid/Graphviz text diagrams.

Installation

Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.

Run Skill in Manus

Source

smithdak

smithdak/skillsmith

View GitHub Repository View Creator Repositories

Download

Run Skill in Manus

Related occupationsSOC

Based on SOC occupation classification

Software DevelopersComputer and Mathematical Occupations·SOC 15-1252

File Explorer

2 files

SKILL.md

readonly

name	tldraw-diagram
description	Generates a tldraw canvas file (.tldr / .tldraw JSON) from a described diagram or outline — boxes, arrows, text, frames, and notes positioned on the infinite canvas — so it opens directly in tldraw or tldraw-offline as editable shapes, with no browser or render step. Use this skill when the user says "make me a tldraw diagram", "generate a .tldr file", "turn this architecture into a tldraw whiteboard", "build an editable canvas of this flow", or wants a hand-editable tldraw document rather than a flat image. Not for rendering a canvas to PNG/SVG (that needs a browser — see tldraw-export), converting Mermaid source (see mermaid-to-tldraw), or authoring Mermaid/Graphviz text diagrams.
license	MIT
metadata	{"skillsmith-see-also":"doc-visuals, mermaid-to-tldraw, tldraw-export","skillsmith-invocation":"user","skillsmith-maturity":"experimental"}
user-invocable	true

tldraw-diagram

A .tldr file is just JSON. It has three top-level keys — tldrawFileFormatVersion (a number, currently 1), schema (a SerializedSchema), and records (an array of records) — and the MIME type application/vnd.tldraw+json. Because the whole document is data, a diagram can be authored as records and dropped straight into tldraw or tldraw-offline as editable shapes. No canvas, browser, or render step is involved. That is the entire premise of this skill: emit records, not pixels.

Only the document records matter for a file — shapes, pages, and bindings. Camera, selection, and UI state are per-user session state that tldraw regenerates on open, so a generated file can omit them.

The one rule that keeps files loadable

tldraw's record schema is versioned and drifts between SDK releases; a handwritten record with a missing or renamed prop will fail to load silently. So never invent the schema from memory. Anchor to a real export:

Ask the user to open tldraw / tldraw-offline, draw one of each shape the diagram needs (a box, an arrow, a text label, a frame), and Save / Export as .tldr — or paste the output of editor.getSnapshot().
Use that file as the template. Copy its schema block verbatim and match its record shapes exactly, changing only positions, text, and ids.

If no export is available, generate against the skeleton in references/tldr-format.md and tell the user it targets the current tldraw v3 format and may need a re-save if their version differs. Treat that as a fallback, not the default path.

Author the records

Lay out before emitting. Decide x/y for every node on a grid so nothing overlaps and flow reads left-to-right or top-to-bottom. tldraw units are pixels; a readable box is ~200×100 with ~80px gaps. Group related nodes inside a frame shape when the diagram has sections.
One page unless asked. Put every shape under a single page: parent via parentId. Use additional page records only when the user wants tabs.
Ids are stable strings. shape:, page:, binding: prefixes, unique within the file. Reference them consistently (an arrow binding points at the exact shape: id of its endpoints).
Arrows connect via bindings, not coordinates. An arrow that should stay attached when a box moves needs a binding record (type: "arrow", fromId = the arrow, toId = the shape) per endpoint — not just start/end points. Match how the exported sample encodes them.
Text lives on shapes. A labeled box carries its label in the geo shape's props.text; use a standalone text shape only for free-floating labels.

Verify before handing off

The file parses as JSON and keeps the three top-level keys.
Every parentId and every binding fromId/toId resolves to a real record id in the file — dangling references are the most common load failure.
Confirm it opens: the user drags the .tldr into tldraw, or loads it with parseTldrawJsonFile() / loadSnapshot(). If it opens with shapes in the right places and arrows attached, it is done. When the tldraw-offline agent skill is available, hand off to it to open the generated file and refine the layout live rather than re-editing the JSON by hand.
Report what was generated: shape count, page count, and any endpoint that had to fall back to fixed coordinates because a binding target was ambiguous.

More from this repository

same repository

op-github-secrets

smithdak/skillsmith

Wires GitHub Actions to pull secrets from 1Password at run time instead of storing long-lived copies in GitHub — using the 1Password load-secrets action with op:// references and a scoped service-account token, so CI reads secrets on demand and 1Password masks them in logs. Use this skill when the user says "load secrets from 1Password in GitHub Actions", "stop pasting secrets into GitHub repo settings", "use a 1Password service account in CI", or wants a workflow that resolves op:// references during a job. Not for local runtime injection (see op-secrets) or an interactive human setup script (see the wizard skill).

2026-07-180

op-secrets

smithdak/skillsmith

Moves a project's secrets out of plaintext and into 1Password secret references (op:// URIs) that resolve at runtime via the op CLI, producing a safe-to-commit .env template and an op run launch path so no real credential ever lands on disk. Use this skill when the user says "use 1Password for my env vars", "replace my .env secrets with op references", "set up op run for this project", "stop storing API keys in plaintext", or wants credentials injected from a 1Password vault at run time. Not for building an interactive service-setup script that captures values from a human (see the wizard skill), or for pushing secrets into GitHub Actions (see op-github-secrets).

2026-07-180

mermaid-to-tldraw

smithdak/skillsmith

Converts Mermaid diagram source into editable tldraw shapes using tldraw's official @tldraw/mermaid package, so a flowchart or graph written as Mermaid text becomes real, movable nodes and arrows on a tldraw canvas rather than a static image. Use this skill when the user says "convert this mermaid to tldraw", "turn my mermaid flowchart into editable tldraw shapes", "import mermaid into tldraw", or has Mermaid source they want as a hand-editable canvas. Not for authoring Mermaid text itself, rendering Mermaid to an image, or building a tldraw file from a prose description (see tldraw-diagram).

2026-07-180

tldraw-animation

smithdak/skillsmith

Adds motion to a tldraw canvas — animating shape position, rotation, and props over time with easing, animating the camera through a canvas, and authoring durable requestAnimationFrame loops embedded in a tldraw-offline document so the canvas keeps animating whenever it is opened. Use this skill when the user says "animate this tldraw diagram", "make these shapes move", "add an animation to my tldraw canvas", "create a tldraw animation loop", or "animate the camera through my board". Not for generating a static .tldr (see tldraw-diagram), exporting a canvas to an image (see tldraw-export), or CSS / web / video-file animation outside tldraw.

2026-07-180

tldraw-export

smithdak/skillsmith

Renders a tldraw canvas or .tldr file to a static image — SVG, PNG, JPEG, or WebP — by driving tldraw's browser-based export APIs from a headless browser, producing a shareable picture from an editable canvas. Use this skill when the user says "export my tldraw file to PNG", "render this .tldr as an SVG", "turn my tldraw canvas into an image", or needs a flat image out of a tldraw document. Not for generating an editable .tldr from a description (see tldraw-diagram), converting Mermaid (see mermaid-to-tldraw), or exporting from the tldraw desktop app's own File menu.

name	tldraw-diagram
description	Generates a tldraw canvas file (.tldr / .tldraw JSON) from a described diagram or outline — boxes, arrows, text, frames, and notes positioned on the infinite canvas — so it opens directly in tldraw or tldraw-offline as editable shapes, with no browser or render step. Use this skill when the user says "make me a tldraw diagram", "generate a .tldr file", "turn this architecture into a tldraw whiteboard", "build an editable canvas of this flow", or wants a hand-editable tldraw document rather than a flat image. Not for rendering a canvas to PNG/SVG (that needs a browser — see tldraw-export), converting Mermaid source (see mermaid-to-tldraw), or authoring Mermaid/Graphviz text diagrams.
license	MIT
metadata	{"skillsmith-see-also":"doc-visuals, mermaid-to-tldraw, tldraw-export","skillsmith-invocation":"user","skillsmith-maturity":"experimental"}
user-invocable	true

tldraw-diagram

The one rule that keeps files loadable

Ask the user to open tldraw / tldraw-offline, draw one of each shape the diagram needs (a box, an arrow, a text label, a frame), and Save / Export as .tldr — or paste the output of editor.getSnapshot().
Use that file as the template. Copy its schema block verbatim and match its record shapes exactly, changing only positions, text, and ids.

Author the records

Lay out before emitting. Decide x/y for every node on a grid so nothing overlaps and flow reads left-to-right or top-to-bottom. tldraw units are pixels; a readable box is ~200×100 with ~80px gaps. Group related nodes inside a frame shape when the diagram has sections.
One page unless asked. Put every shape under a single page: parent via parentId. Use additional page records only when the user wants tabs.
Ids are stable strings. shape:, page:, binding: prefixes, unique within the file. Reference them consistently (an arrow binding points at the exact shape: id of its endpoints).
Arrows connect via bindings, not coordinates. An arrow that should stay attached when a box moves needs a binding record (type: "arrow", fromId = the arrow, toId = the shape) per endpoint — not just start/end points. Match how the exported sample encodes them.
Text lives on shapes. A labeled box carries its label in the geo shape's props.text; use a standalone text shape only for free-floating labels.

Verify before handing off

The file parses as JSON and keeps the three top-level keys.
Every parentId and every binding fromId/toId resolves to a real record id in the file — dangling references are the most common load failure.
Confirm it opens: the user drags the .tldr into tldraw, or loads it with parseTldrawJsonFile() / loadSnapshot(). If it opens with shapes in the right places and arrows attached, it is done. When the tldraw-offline agent skill is available, hand off to it to open the generated file and refine the layout live rather than re-editing the JSON by hand.
Report what was generated: shape count, page count, and any endpoint that had to fall back to fixed coordinates because a binding target was ambiguous.