Layra Playground — diagrams at the speed of thought

◆ Starting the diagram engine…

◆ Layra diagrams at the speed of thought —

★ Star on GitHub

Click to insert · drag onto the canvas

Shapes

Connectors

Infra

EDITOR —

ready

100%

Start with an example

Pick a starting point — every diagram is fully editable.

⌘ esc

No matching commands

Help & shortcuts

Layra renders a Mermaid-compatible dialect in pure Rust → WASM.

Keyboard shortcuts

Ctrl/⌘ K: Command palette
?: This help
+ / −: Zoom in / out
0: Fit to view
D: Toggle light / dark
A: Animate edges
Scroll: Zoom in / out at the cursor
Space + drag: Pan the canvas
↑↓←→: Pan when canvas is focused
Drag a node: Reposition it
Drag from palette: Drop a shape onto the canvas
Tab in editor: Indent (Shift+Tab outdents)
Esc: Close any overlay

Syntax basics

flowchart LR
  a["Process"] --> b{"Decision?"}
  b -->|yes| c(["Done"])
  b -.->|no| a
  db[("Database")]:::database

--> arrow · -.-> dashed · ==> thick
["…"] box · ("…") rounded · {"…"} diamond
[("…")] database · {{"…"}} queue
Icons: {icon:aws:lambda}, {icon:mdi:web}
Types: flowchart, sequence, state, class, er, gantt, pie, mindmap, git

New to it? Use New ▾ for a starter, or Examples for full diagrams.

Theme & brand

Pick a preset or craft your own. Colours bake into exported SVG.

Presets

Custom

Base Accent Background Font

1 / 4

Title

Body