tldraw-m9810223

tldraw-m9810223

A Claude Code plugin: 26-tool MCP server for editing tldraw .tldr files via JSON manipulation (headless, no browser needed), plus a tldraw-screenshot skill that renders a .tldr to PNG via tldraw.com so Claude can SEE the diagram.

Status

Working skeleton. Schema validation is wired (@tldraw/tlschema validators run before every write), fractional indexing uses @tldraw/utils, file writes are guarded by proper-lockfile. Output verified end-to-end against the real tldraw runtime via Store.loadStoreSnapshot() in the contract test layer.

Quick Start

Requires Node ≥ 20.

1. Install as a Claude Code plugin (one command registers the marketplace, the second installs the bundled MCP server + skill):

claude plugin marketplace add m9810223/tldraw-m9810223
claude plugin install tldraw-m9810223@tldraw-m9810223

Restart Claude Code. /mcp lists tldraw-m9810223 (26 tools); /plugin lists tldraw-m9810223; the tldraw-screenshot skill is available too.

If you'd rather wire just the MCP server (no skill), see Install / Update / Remove below.

2. Try the demo prompt in Claude Code:

Draw the Shai-Hulud supply-chain attack flow described in this article with MCP `tldraw-m9810223`, save to `./demo.tldr`:
https://semgrep.dev/blog/2026/malicious-dependency-in-pytorch-lightning-used-for-ai-training/

- Match the actors and how data/control flows between them
- Polish the result at the end

3. View the result — drop ./demo.tldr onto tldraw.com, or use the tldraw VS Code extension for live preview.

Source file: docs/demo.tldr

Tools

File / page lifecycle

Tool	What it does
create_empty_file	Create a fresh .tldr with a default page
create_page	Add a new page
list_pages	List pages with id, name, ordering index
move_to_page	Move shapes; bindings: 'error' | 'pull' | 'cut' controls binding handling

Shapes

Tool	What it does
create_rect	Create a rectangle (geo shape)
create_text	Create a text shape
create_group	Group shapes by reparenting them
ungroup	Dissolve a group, reparenting its children to the group's parent
connect	Arrow + bindings between two same-page shapes
list_shapes	List shapes — id, type, x, y, label only
get_shape	Full record of one shape by id
update_shape	Shallow-merge patch (use nested { "props": {...} } for prop edits)
delete_shape	Delete by id; cascade: true (default) also removes attached arrows + bindings

Layout / text fitting