reladraw

a diagram language where you say where things go

Examples

Format settings

How Format lays the source out. These are remembered in this browser only; for a project, put them in a .reladraw-format file beside its diagrams.

Source

Cheatsheet
Statements
node name ["text"] [placements] [key: value …]
edge a -> b ["text"] [key: value …]  (<- to write the target first, <-> for both ends)
point name where  region name a top-left to b bottom-right
bundle name via: …  (a path lines share)  guide node|edge|point|region … (reference only; tick Guides to see them)
style name key: value …
diagram theme: nord background: #1e2229 text: (color: #e0e0e0)
default node|leaf|container|edge key: value …  (a style every one of that kind wears; the more specific wins)
The picture is drawn exactly as written: nothing is moved to make room, and lines go only where they are told. Anything that overlaps is drawn as written; Check, above the diagram, reports it, as reladraw check does.
Labels
node parser — no text, so the node takes its name as its text.
node parser "" — deliberately blank.
"two / lines" — / with spaces either side breaks a line.
Containment
node server.docker "Docker" — a dotted name is a child. Declare the parent first. With no text of its own, it reads "docker".
layout: column or row — the children in written order, with (gap: tight, widths: match, align-children: left). Without a layout, one child is unplaced and the rest are placed against it.
layout: deck — a stack of cards, the first child in front.
gather-children: left — where the children sit in spare room. shape: none on a container draws no box.
Placement
above X below X left of X right of X above-left of X … below-right of X
even with X — share a center line; top|bottom|left|right even with X shares that edge.
right of A and B — against the box that just bounds them both.
inside X top-right outside X right on X bottom-left — against a part of X. The parts are text, the sides top bottom left right, and top-left top-center top-right left-center center right-center bottom-left bottom-center bottom-right.
on between A and B below down from A and left from B — at a point.
One node is unplaced; every other is placed against something. One direction on its own also centers on its target. Each axis is said once.
Gaps
right of X (gap: wide) or 2 right of X, on the placement. One of none tight normal wide (0, 2, 4, 8 units), or a number of units; a box is about 4 units tall. A gap is exact.
Sizes
width: 30 height: menu height: 0.5 menu height height: a top to c bottom min-width: 10
Appearance
style: name fill: #191728 border: none corners: sharp (a box; rounded unless told) line: #d2904e (an edge) overlap: allow url: "https://example.com" description: "What it does" (shown on the page; never drawn)
Lines
line: (path: square, corners: rounded) — everything about an edge's line. path: takes straight (the default) square curved; corners: sharp rounded; crossing: gap arc square none; pattern: solid dashed dotted dash-dot; thickness: thin normal thick, a multiple, or 3px; turn: 1/3 step-out: tight curve: subtle. default edge line: (path: square) sets every edge.
Body
shape: rectangle|document|circle|none — the outline the node is drawn with; none is text with no box, which is what an annotation is.
icon: name — the node is that picture, with no box.
badge: name — the picture is part of the label, beside the text, and the node keeps its box.
layout: deck cards: "text" ["text" …] — a stack of cards, front first, one per text.
Pictures: disk desktop laptop package cubes cube database.
Your own: icon name """<svg …>…</svg>""" declares one, and icon: name or badge: name uses it.
Text
Everything a text says about itself goes in brackets after it: (color: theme-muted) (size: small|normal|large) (wrap: 24) (characters, folds the text). A title says which side it sits against: "Server" (inside top, align: left), (on top), (outside top), (center). In a style, which has no text of its own, the bracket hangs off the key: text: (color: theme-muted).
" / " in any text is a line break; \/ is a literal slash.
"name / [dim]quieter[/dim]" draws those words in the text color of style dim; \[ is a literal bracket.
Links
A line is straight between its two boxes, through anything in between, unless told otherwise.
from: right to: left name a side; to: bottom-center or to: left 3/4 down a point on it.
via: c top, between a and b — the places the line passes, in order: just outside a side, a point, a box's center, through region horizontal.
"text" (at: start) (at: 1/4) (above edge) (on: longest level) — where a line's text sits; the middle by default.
Comments
// to the end of the line, anywhere, including after a statement.

Diagram