tldraw-claude-mcp: Skill for Claude Code

tldraw skill

You can draw on a live tldraw canvas through the tldraw MCP server. The user watches your output appear in real time at http://localhost:3030.

Before drawing

If you have not drawn yet this session, tell the user once:

Open http://localhost:3030 in your browser to see the canvas.

If a tool reports that no canvas is connected, repeat that hint and retry.

Pick the right tool

Situation	Tool
Flowchart, architecture, state machine, sequence, org chart, dependency graph, mind map — anything with nodes and edges	create_diagram
Free-form drawing, wireframes, annotations, sketching	create_shape
Linking shapes that already exist	connect_shapes
Changing something already drawn	get_canvas → update_shape

Use create_diagram instead of writing mermaid. It takes the same nodes-and-edges description and renders it natively: it measures each label, assigns layers, minimises crossings and binds the connectors.

Never compute x/y for a diagram. Hand-placed coordinates are what produce overlapping boxes and crossing arrows — that is exactly the work this tool exists to do.

create_diagram

{
  "title": "Login flow",
  "direction": "down",
  "nodes": [
    { "id": "start", "label": "Start", "role": "start" },
    { "id": "form", "label": "Show login form" },
    { "id": "check", "label": "Credentials valid?", "role": "decision" },
    { "id": "home", "label": "Go to dashboard", "role": "success" },
    { "id": "retry", "label": "Show error", "role": "error" }
  ],
  "edges": [
    { "from": "start", "to": "form" },
    { "from": "form", "to": "check" },
    { "from": "check", "to": "home", "label": "yes" },
    { "from": "check", "to": "retry", "label": "no" },
    { "from": "retry", "to": "form" }
  ]
}

• direction: down (mermaid TD), right (LR), up, left.
• connector: elbow (default, right-angled) or arc.
• role sets shape + colour conventionally, so describe meaning not styling: process (default), start, end, decision, io, data, external, error, success, note.
• replace: true clears the canvas first — use when redrawing from scratch.
• rank pins a node to a specific layer; spacing and origin override geometry.