Reladraw Playground

The official playground runs on the Reladraw authors’ site. Grab a template first — pasting a working example is the fastest start.

Open official playground ↗reladraw.github.io/reladraw — nothing to install

Recommended first templates

How to use the playground with a template (3 steps)

1. Pick a template from the gallery — every template page shows the rendered preview next to its full .reladraw source, so you always have a working example.
2. Paste the source into the playground editor. The layout re-solves instantly as you type; rename the node labels to your real components — the placement relationships hold while text changes.
3. Export — download the SVG for docs, README files, or slide decks, or run npx reladraw locally when you need the diagram inside a build pipeline or CI job.

Why start from a template instead of an empty file?

Reladraw is a placement language: you say where things go, and the renderer solves exact coordinates. Starting from an empty file means inventing placement rules from scratch; starting from a reviewed template means every node already has a sensible anchor relationship you can keep or edit. This gallery’s sources are verified against the official Reladraw repository syntax before publishing, so what you paste is guaranteed to render.

What to build first

• Architecture sketches — a microservices map or cloud architecture for a design doc.
• Data flows — an ER diagram or RAG pipeline for a technical README.
• Process maps — a user flow or swimlane for a product spec.

Playground FAQ

Do I need to install anything? No — the official playground runs in the browser at reladraw.github.io/reladraw. For automated rendering, the npx reladraw CLI is the only dependency.

Can I edit templates here on reladrawtemplates.com? No — this site is the library; editing and rendering happen in the playground or the CLI. Every template page keeps source and preview side by side so you can copy with confidence.

The diagram renders but looks cramped — why? Placement relationships are hints you can restate. Check the cheatsheet for the 8 placement statements and the rationale behind them.