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 plant, die Skill-Bibliothek basierend auf Community-Feedback zu erweitern und die Unterstützung für Windows hinzuzufügen, um die potenzielle Nutzerbasis zu vergrößern. Er hofft zudem, dass Drittanbieter-Agenten das Kit integrieren, um einen Marktplatz für spezialisierte Diagramm-Generatoren zu schaffen, die alle denselben deterministischen Kern nutzen.

Fazit

tldraw-canvas-kit beweist, dass KI-gestützte Diagrammerstellung kein rein cloudbasierter, probabilistischer Prozess sein muss. Durch die Verankerung der Zeichenlogik in einer lokalen API und die Durchsetzung stabiler Identifikatoren können Ingenieure wiederholbare, revisionssichere Visualisierungen erstellen, ohne dabei Kompromisse bei der Privatsphäre oder der Kontrolle einzugehen.