Same Prompt, Same Diagram

Prateek Rai released tldraw-canvas-kit, a collection of 19 “Agent Skills” that let local AI assistants such as Claude Code or Cursor drive the offline tldraw desktop app and produce identical engineering diagrams every time. The kit works without any cloud connection or telemetry, meaning teams can keep their visual assets fully on-premises.

Why a local, deterministic diagram tool matters

Engineering teams spend hours moving flowcharts, class diagrams, and architecture maps between slide decks, documentation sites, and design tools. Each copy-paste step introduces subtle changes—line styles shift, IDs get regenerated, layouts drift. When a diagram is regenerated by an LLM, the result is often a different arrangement, even if the textual prompt is unchanged. For organizations that need audit-ready documentation or reproducible design artifacts, that variability is a liability.

Prateek built tldraw-canvas-kit to address two pain points: (1) a tool that runs entirely on the user’s machine, and (2) a guarantee that the same prompt yields the same diagram. By exposing a local HTTP API that the AI agent can call, the kit eliminates network latency, data-exfiltration risk, and the need for a SaaS subscription.

How the kit works

  • Offline core – The tldraw desktop app runs a local server that accepts JSON-encoded commands. No external calls are made, and no usage data leaves the machine.
  • Agent Skills – Each skill encodes a fixed structure specification: layout math, stencil choices, and stable IDs. When an agent invokes a skill, it receives a deterministic set of drawing instructions.
  • Idempotent updates – If a skill runs against an existing diagram, it updates shapes in place, removes obsolete elements, and re-anchors edges. The result is a canvas that can be refreshed without accumulating duplicate objects.
  • File format – Diagrams are stored as plain .tldraw files. Because the layout logic lives inside the file, sharing a deck automatically includes the navigation rules needed to reproduce the view.

The kit supports thirteen diagram categories, ranging from sequence and flowcharts to ER diagrams, state machines, swimlanes, use-case, component, package, deployment, architecture, mind maps, and code-base maps. Users simply describe the desired diagram; the skill handles the underlying structure.

Lessons learned during development

  1. Arrow styling defaults to a hand-drawn look – Even when a clean line is requested, the API initially creates a sketch-style arrow. The skill must issue a follow-up command to switch the style.
  2. Arrows can intersect shapes silently – The API does not raise errors if a connector passes through a node. Visual inspection of generated screenshots is required to catch such collisions.
  3. Edge-label wrapping breaks on short arrows – Labels may wrap badly if the connector is too short, so the skill must enforce a minimum length or adjust the label placement.

These quirks illustrate why the skills were built on the API’s actual behavior rather than on assumptions about it.

Installing and using the kit

npx skills add prateek11rai/tldraw-canvas-kit

The command works on macOS and Linux. After installation, an AI agent on the same workstation can query local documents, generate code, and send drawing commands to the running tldraw server. The result is a reproducible diagram that can be edited further or exported to presentations without ever leaving the host.

Who benefits, and what the trade-offs are

  • Security-focused teams – Companies with strict data-handling policies can keep all design artifacts behind their firewalls.
  • Documentation engineers – Those who need to embed diagrams in version-controlled repositories gain a deterministic source of truth.
  • Individual contributors – Developers tired of manually tweaking layouts after each LLM run can automate the process.

The main limitation is the reliance on a locally running tldraw instance. Organizations that already depend on cloud-based diagram services will need to adopt the desktop app and adjust workflows. Additionally, the current skill set does not cover custom stencil libraries; users must work within the predefined shapes.

What’s next

Prateek berencana untuk memperluas pustaka keahlian berdasarkan umpan balik komunitas dan menambahkan dukungan untuk Windows, guna memperluas basis pengguna potensial. Ia juga berharap dapat melihat agen pihak ketiga mengintegrasikan kit tersebut, menciptakan pasar bagi generator diagram khusus yang semuanya berbagi inti deterministik yang sama.

Kesimpulan

tldraw-canvas-kit membuktikan bahwa pembuatan diagram berbasis AI tidak harus menjadi proses yang hanya berbasis cloud dan bersifat probabilistik. Dengan menambatkan logika menggambar pada API lokal dan menerapkan pengidentifikasi yang stabil, kit ini memungkinkan para insinyur untuk menghasilkan visual yang dapat diulang dan siap diaudit tanpa mengorbankan privasi atau kendali.