reladraw

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"`Lines `line: (path: square, corners: rounded)` — everything about an edge's line. `path:` takes `curved` `square` `straight`; `corners:` `sharp` `rounded`; `crossing:` `none` `arc` `gap` `square`; `pattern:` `solid` `dashed` `dotted` `dash-dot`; `thickness:` `thin` `normal` `thick` or a number. _`default edge line: (path: square)` sets every edge._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|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 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: theme-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: 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 `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. `below c` — or above, left of, right of — says which side of a node the line passes, where it goes by that node. Comments `// to the end of the line`, anywhere, including after a statement.

Diagram

Actual size Copy SVG Download