Write your first diagram

Layup turns a .layup text file into a diagram. Start with a few named nodes and relationships, then add layout and detail as your explanation grows.

1. Describe a small system

diagram main "Hello Layup" type=graph {
  node api "Requests" {
    code "GET /items"
  }
  node worker "Worker" {
    code "poll()"
  }
  node store "Store" {
    code "items.put()"
  }
  ::api -> ::worker "sends"
  ::worker -> ::store label=style style=uses
}

diagram supplies the title. node api "Requests" separates the stable ID api from the displayed title. code adds a monospace line, and -> connects two IDs. style=uses selects a relationship style; label=style requests its default caption. Omitted colors receive automatic tones.

2. Change it live

Rename a title, add a node, or put layout=auto flow-direction=right after the diagram title. The renderer updates after a short pause in typing.

Example First diagramService architectureSupport decision treeJob state machineComposite connection statesRequest sequenceCJK and Arabic sequenceRight-to-left graphSlide-sized pipelineRequest/retry presentationShared architecture viewsTheme-aware paint and stylesShared syntax, scopes and annotationsView First view (default)

Layup source Updates as you type// Zero-config diagram: tones cycle automatically, the bare edge takes the // source tone, and the legend appears because a typed edge is used. diagram main "Hello layup" type=graph subtitle="No tones, no legend, no widths — just nodes and edges." { node api "Requests" { code "GET /items" } node worker "Worker" { code "poll()" text "retries with backoff · dead-letters after ten tries" } node store "Store" { code "items.put()" } ::api -> ::worker "sends" ::worker -> ::store label=style style=uses }

Diagram Loading renderer…

Your diagram appears here. The renderer loads once and runs in your browser.

Ctrl+Enter renders now · Tab moves focus · Click a diagnostic to select its source · Expand for pan, zoom and presentation controls

Use your own fallback fonts

CJK uses your system fonts by default. Choose standalone .ttf/.otf faces for exact measurement and embedding. Files stay in this browser; share links do not include fonts.

If a change is invalid, diagnostics point to its source while the last successful diagram remains visible. Format normalizes indentation without changing strings or comments. Download source saves your current edits.

3. Render a file

Install Rust stable and the 0.4 CLI:

cargo install layup-cli --version 0.4.0 --locked
# Or install a supported prebuilt binary:
cargo binstall layup-cli --version 0.4.0

Layup 0.4 uses named diagrams and explicit properties. Source written for 0.3 needs migration to the shared document language.

Save your source as hello.layup, then run:

layup render hello.layup
layup render hello.layup --html --theme auto
layup check hello.layup --strict

The first command writes hello.svg; --html writes an interactive page. check reports layout problems, and --strict makes warnings fail in CI.

Choose what to explain next

Your explanation	Start here
Services, components, interfaces, or package boundaries	Architecture diagrams
Validation, routing rules, or an algorithm with branches	Decisions and flowcharts
An object's lifecycle or nested operating states	State machines
Requests, responses, retries, and asynchronous calls	Sequence diagrams
A talk that introduces a system gradually	Slides and reveal

Continue with the source language to learn IDs, blocks, strings, and attributes.