reladraw playground

Source

Cheatsheet

Statements: node name ["text"] [placements] [key: value …]
edge a -> b ["text"] [key: value …] (<- to write the target first, <-> for both ends)
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)
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".
Placement: above X below X left of X right of X above-left of X … below-right of X
level with X — share a center line; top|bottom|left|right level with X shares that edge.
right of A and B — against the box that just bounds them both.
on X at top-right — stamped on X's box, overlapping it. The nine positions are top-left top-center top-right left-center center right-center bottom-left bottom-center bottom-right.
A node takes as many placements as it needs. One on its own binds both axes.
Gaps: right of X (gap: wide) on the placement, or gap: tight on the node as its default. One of none tight normal wide, and every one is a minimum.
Appearance: style: name fill: #191728 border: none line: #d2904e (an edge) overlap: allow url: "https://example.com"
Contents: contents: (widths: match, align: center) — how a container's children sit when its title is wider than they are. widths: takes natural match fill; align: takes left center right.
Body: shape: rectangle|document|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 sits beside the text and the node keeps its box.
deck: "text" ["text" …] — offset copies behind the box, one per text.
Pictures: disk desktop laptop package cubes cube database.
Text: Everything a text says about itself goes in brackets after it: "Docker" (at: bottom-center, align: center) (color: muted) (size: small|normal|large) (wrap: 24) (characters, folds the text). at: takes the nine positions above. In a style, which has no text of its own, the bracket hangs off the key: text: (color: 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: from: right to: left name a side and curve the line.
between a and b sends it down the gap between two nodes, with vertically or horizontally if they sit diagonally.
Comments: // to the end of the line, anywhere, including after a statement.

Source

Diagram