reladraw 0.27.0 → 0.28.0

package/examples/around.reladraw

@@ -0,0 +1,101 @@
+// Edges whose two ends face away from each other. Each has to turn back on
+// itself, and over and under are both reasonable, so each line says which way
+// round it goes with via:, naming each box it passes on the way. Between the
+// boxes it names, a curved line takes one sweep.
+
+// Drawn curved, as 0.16.0 drew every line, so the route is what changed.
+default edge  line: (path: curved)
+
+// The case that found it: level, with a node in the middle, and a text that
+// used to land on that node.
+node parser "Parser"
+node resolver "Resolver"  10 right of parser
+node renderer "Renderer"  8 right of resolver
+
+edge parser -> resolver    "statements"  from: right  to: left
+edge resolver -> renderer  "layout"      from: right  to: left
+edge parser -> renderer    "test edge"   from: left   to: right  via: parser top, renderer top
+
+// Two nodes side by side. The text goes over the top and the gap stays as it
+// was, since no text rides in it.
+node a "A"  below parser  (gap: wide)
+node b "B"  right of a
+
+edge a -> b  "adjacent"  from: left  to: right  via: a top, b top
+
+// A taller node in the way lifts the whole run over it.
+node c "C"  right of b  (gap: wide)
+node tall "Tall / middle / node"  right of c
+node d "D"  right of tall
+
+edge c -> d  "over the tall one"  from: left  to: right  via: tall top
+
+// Stepped down, with a gap wide enough: the line turns back under E and over
+// F, through the gap between them. A normal gap is twice the distance a line
+// keeps from a side it runs along, so the two runs meet in one level line.
+node e "E"  below a  (gap: wide)
+node f "F"  right of e  (gap: wide)  below e  (gap: normal)
+
+edge e -> f  "through the gap"  from: left  to: right  via: e bottom, f top
+
+// Stepped down with too little room between them: over the top of G, then
+// one sweep down round H's right.
+node g "G"  right of f  (gap: wide)  even with e
+node h "H"  right of g  (gap: wide)  below g  (gap: tight)
+
+edge g -> h  "no room below"  from: left  to: right  via: g top
+
+// A column goes round the right: along the right side of a region round
+// both, so the run down is straight past the narrower box.
+node top "Top"  right of d  (gap: wide)
+node bottom "Bottom"  below top
+
+guide region column  top top-left to bottom bottom-right
+edge top -> bottom  "column"  from: top  to: bottom  via: column right
+
+// And an edge from a node back to itself.
+node self "Self"  below bottom  (gap: wide)
+
+edge self -> self  "itself"  from: left  to: right  via: self top
+
+// Two lines out of one side, each the shorter way round. They share J's left
+// side, so the one leaving lower down has the shorter way underneath.
+node j "J"  below e  (gap: 17)
+node k "K"  right of j
+node l "L"  right of k
+
+edge j -> l  "outer"  from: left  to: right  via: j top, l top
+edge j -> k  "inner"  from: left  to: right  via: j bottom, k bottom
+
+// Sides at right angles, one facing away: out of the left, up over the row,
+// and down into the top. The side the far end names says which way round.
+node m "M"  right of l  (gap: wide)
+node n "N"  right of m
+node o "O"  right of n
+
+edge m -> o  "into the top"  from: left  to: top  via: m top, n top
+edge m -> o  "into the bottom"  from: left  to: bottom  via: m bottom, n bottom
+
+// Stacked, sides at right angles (GitHub issue #2). Coming straight in would
+// pass through the lower node, so the line steps out beside it and comes in
+// to the side named. The turn is stated, so the curve passes the middle of
+// the gap heading across it, and comes round in a hook rather than a kink.
+node p "P"  below j  (gap: 12)
+node q "Q"  below p
+edge p -> q  "curve"  from: bottom  to: left  line: (turn: 1/2)
+
+// Both ends facing the same way, one node behind the other: the line has to
+// get round the node behind, so it goes over the top, as a loop does. A wide
+// gap between them gives the line room to come down into it.
+node r "R"  right of p  (gap: wide)
+node s "S"  right of r  (gap: wide)
+edge r -> s  "left to left"  from: left  to: left  via: r top
+
+node t "T"  right of s  (gap: wide)
+node u "U"  right of t  (gap: wide)
+edge t -> u  "right to right"  from: right  to: right  via: u top
+
+// In a column, round the right.
+node v "V"  right of u  (gap: wide)
+node w "W"  below v
+edge v -> w  from: bottom  to: bottom  via: w right

package/examples/borders.reladraw

@@ -0,0 +1,28 @@
+// A border's thickness. It is drawn inside the box's outline, and the box
+// grows by the extra, so the padding round what it holds stays what it says
+// and a gap is still measured from the outside of the stroke.
+
+style hot  border: (color: #d2904e, thickness: 4)
+
+node host "Host"
+node host.app "App"
+node db "DB"  right of host
+edge host -> db
+
+node thick "Host"  below host  style: hot
+node thick.app "App"
+node db2 "DB"  right of thick
+edge thick -> db2
+
+node thin    "thin"    below thick  border: (thickness: thin)
+node normal  "normal"  right of thin (gap: tight)
+node bold    "thick"   right of normal (gap: tight)  border: (thickness: thick)
+node px      "6px"     right of bold (gap: tight)  border: (thickness: 6px)
+
+node ring    "ring"    below thin  shape: circle  style: hot
+node gem     "gem"     right of ring (gap: tight)  shape: diamond  style: hot
+node hex     "hex"     right of gem (gap: tight)  shape: hexagon  style: hot
+node can     "can"     right of hex (gap: tight)  shape: cylinder  style: hot
+node doc     "doc"     right of can (gap: tight)  shape: document  style: hot
+node legend  "Legend" (on top)  right of doc (gap: tight)  style: hot
+node legend.item "item"

package/examples/bundles.reladraw

@@ -0,0 +1,49 @@
+// Lines that travel together. A bundle is a path with no ends of its own;
+// each line joins it with `via:` and runs its whole length in a lane of its
+// own. The lanes are in one order across the bundle, so the lines cross
+// before they reach it or not at all, never inside it.
+
+style plain  fill: theme-fill  border: theme-border
+
+// Three lines through one gap. They are written c's first, so in written
+// order c's line would take the top lane and cross the other two on the way
+// in and on the way out; the bundle's order puts them as the columns are.
+node from "Senders"  layout: column  style: plain
+node from.a "a"
+node from.b "b"
+node from.c "c"
+node upper "Upper"  right of from (gap: wide)  6 above from  style: plain
+node lower "Lower"  below upper (gap: wide)  style: plain
+region slot  between upper and lower
+node to "Receivers"  right of upper (gap: wide)  6 below upper  layout: column  style: plain
+node to.x "x"
+node to.y "y"
+node to.z "z"
+bundle trunk  via: through slot horizontal  order: one, two, three
+edge three from.c -> to.z  via: trunk
+edge one from.a -> to.x  via: trunk
+edge two from.b -> to.y  via: trunk
+
+// A bus: a collapsed bundle is one thick line, drawn once. Each host taps it
+// with a line straight down or up to it, and one line rides it end to end.
+node h1 "Host 1"  below from (gap: wide)  left even with from  style: plain
+node h2 "Host 2"  right of h1 (gap: wide)  style: plain
+node h3 "Host 3"  right of h2 (gap: wide)  style: plain
+node s1 "Store 1"  6 below h1  style: plain
+node s2 "Store 2"  6 below h2  style: plain
+node s3 "Store 3"  6 below h3  style: plain
+point west  between h1 and s1
+point east  between h3 and s3
+bundle bus  via: west, east  layout: collapsed  line: (thickness: thick)  from-mark: dot  to-mark: dot
+edge h2 -- bus  straight down  to-mark: dot
+edge s2 -- bus  straight up  to-mark: dot
+edge h1 -> s3  from: bottom  to: top  via: bus  line: (path: square)
+
+// One line from each child, which stays true as children are added. They
+// meet at one point on Queue, so its side never runs out of room for them.
+node pool "Workers"  below s1 (gap: wide)  layout: column  style: plain
+node pool.w1 "w1"
+node pool.w2 "w2"
+node pool.w3 "w3"
+node queue "Queue"  right of pool (gap: wide)  style: plain
+edge each child of pool -> queue  to: left-center

package/examples/circles.reladraw

@@ -0,0 +1,37 @@
+// `shape: circle`. A circle is as big as it needs to be to hold its text, and
+// always round.
+
+style state  shape: circle  border: #5cf05c
+style step   border: #ff6666
+
+// A small picture from a TikZ tutorial, which asked for circles.
+node 1  style: state
+node 2  below 1  style: step
+node 3  right of 2  style: step
+node 4  below 2  style: state
+
+edge 1 -> 2
+edge 2 -> 3
+edge 3 -> 4  from: bottom  to: right
+
+// A circle sizes from its text like any box, so a longer text makes a bigger
+// circle rather than an oval.
+node idle     "idle"                   right of 3 (gap: wide)  style: state
+node working  "working on it / slowly" below idle (gap: wide)  style: state
+
+// Several edges on one side of a circle fan out round its quarter, each
+// meeting it square on.
+node a "a"  right of working (gap: wide)  style: step
+node b "b"  below a  style: step
+node c "c"  below b  style: step
+edge a -> working  from: left  to: right
+edge b -> working  from: left  to: right
+edge c -> working  from: left  to: right
+
+// An edge naming no side meets the circle where the line to the far end
+// crosses it.
+edge idle -> 3
+
+// A corner of a circle is the point on it halfway round, not the corner of
+// the square around it.
+node dot ""  on idle top-right  shape: circle

package/examples/coincident.reladraw

@@ -0,0 +1,66 @@
+// Several edges between the same two nodes. Left alone they are copies, and
+// run side by side a gap apart, straight from box to box, each end landing
+// where its own line meets the border. A bundle between the two nodes says
+// how they share the way instead: layout: fan bows them apart to a gap at
+// the middle while their ends stay close on a small side.
+
+style plain  fill: theme-fill  border: theme-border
+
+// Level nodes, fanned: the ends crowd one side, and the lines bow out so each
+// text has a lane of its own. The middle line stays straight.
+node a "A"  style: plain
+node b "B"  10 right of a  style: plain
+bundle ab  a -> b  layout: fan
+edge a -> b  "first"   via: ab
+edge a -> b  "second"  via: ab
+edge a -> b  "third"   via: ab
+
+// A perfect diagonal, where the single line would leave through the corner
+// exactly. The two copies run either side of it, one end on each of the
+// sides meeting there, written in either direction. Copies a gap apart have
+// no room for a text between them, so each text sits beside its own line.
+node low  "Low"   16 below a  left of a  style: plain
+node high "High"  above low (gap: wide)  right of low (gap: wide)  style: plain
+edge low -> high   "up" (left of edge)
+edge high -> low   "down" (right of edge)
+
+// A near diagonal, where the lines cross the border on one side, close to
+// the corner.
+node near "Near"  below low (gap: wide)  style: plain
+node far  "Far"   right of near (gap: wide)  above near (gap: wide)  style: plain
+edge near -> far  "one" (left of edge)
+edge near -> far  "two" (right of edge)
+
+// A lone edge has nothing to share the way with, and runs center to center.
+node solo  "Solo"   below near (gap: wide)  style: plain
+node alone "Alone"  12 right of solo  style: plain
+edge solo -> alone  "by itself"
+
+// Naming a side takes an edge out of the copies. Two ends on top, curved, so
+// the line leaves upward and comes back down rather than running along the
+// tops.
+node named "Named"  below solo (gap: wide)  style: plain
+node other "Other"  11 right of named  style: plain
+edge named -> other  "free"
+edge named -> other  "free too"
+edge named -> other  "top"  from: top  to: top  line: (path: curved)
+
+// More than the side can hold at a gap. The ends squeeze together and each
+// line bows out to its lane at the middle.
+node many "Many"  below named (gap: wide)  style: plain
+node one  "One"   10 right of many  style: plain
+bundle five  many -> one  layout: fan
+edge many -> one  "first"   via: five
+edge many -> one  "second"  via: five
+edge many -> one  "third"   via: five
+edge many -> one  "fourth"  via: five
+edge many -> one  "fifth"   via: five
+
+// The same on an upright way, where the texts sit side by side, so the gap
+// the bundle states is a whole text wide.
+node top    "Top"     below many (gap: wide)  style: plain
+node bottom "Bottom"  below top (gap: wide)  style: plain
+bundle abc  top -> bottom  layout: fan (gap: 5)
+edge top -> bottom  "alpha"  via: abc
+edge top -> bottom  "beta"   via: abc
+edge top -> bottom  "gamma"  via: abc

package/examples/contents.reladraw

@@ -0,0 +1,52 @@
+// How a container's contents sit inside it, when the container is wider than
+// they are. A container is as wide as the wider of its title and its contents,
+// so a long title leaves spare room. Two words say two different things:
+//
+// `align-children:`, in the layout's bracket, lines the children up with each
+// other: their left edges even, their middles, or their right edges.
+// `gather-children:`, on the box, says where the group of them sits in the
+// spare room: against a side, or in the middle.
+//
+// Both default to the middle. Neither moves what the other says.
+
+style plain  fill: theme-fill  border: theme-border
+
+// Nothing said: the children centered on each other, in the middle of the room.
+node ragged "Ingestion and enrichment pipeline"  layout: column
+node ragged.one   "parse"  style: plain
+node ragged.two   "resolve and lay out"  style: plain
+node ragged.three "draw"  style: plain
+
+// Their left edges even, the group still in the middle.
+node lined "Ingestion and enrichment pipeline"  right of ragged  layout: column (align-children: left)
+node lined.one   "parse"  style: plain
+node lined.two   "resolve and lay out"  style: plain
+node lined.three "draw"  style: plain
+
+// The same column against the left of the room.
+node left "Ingestion and enrichment pipeline"  right of lined  gather-children: left  layout: column (align-children: left)
+node left.one   "parse"  style: plain
+node left.two   "resolve and lay out"  style: plain
+node left.three "draw"  style: plain
+
+// `widths: fill` takes the whole band, so there is no spare room left for
+// gather-children: to say anything about. Under a title this long that is
+// what `match` could not do.
+node full "Ingestion and enrichment pipeline"  right of left  layout: column (widths: fill)
+node full.one   "parse"  style: plain
+node full.two   "resolve and lay out"  style: plain
+node full.three "draw"  style: plain
+
+// Every child as wide as the widest, against the right of the room.
+node block "Ingestion and enrichment pipeline"  below ragged  gather-children: right  layout: column (widths: match)
+node block.one   "parse"  style: plain
+node block.two   "resolve and lay out"  style: plain
+node block.three "draw"  style: plain
+
+// A style may carry the layout and where the children gather.
+style boxed  gather-children: left  layout: column (widths: match)
+
+node carried "Ingestion and enrichment pipeline"  right of block  style: boxed
+node carried.one   "parse"  style: plain
+node carried.two   "resolve and lay out"  style: plain
+node carried.three "draw"  style: plain

package/examples/corridors.reladraw

@@ -0,0 +1,48 @@
+// `between a and b` is a point: the middle of the space between two things.
+// A line passes it with `via:`, and before and after goes wherever its ends
+// take it. `at 1/3` moves the point a third of the way across, measured from
+// the first thing named.
+
+default edge  line: (path: curved)
+
+style channel  fill: theme-page  border: theme-fill
+
+// North and South are apart vertically, so the point lies in the gap between
+// them. Both lines start to the left, pass through the gap and leave for East.
+// Two lines through one point would pinch there, so each passes its own:
+// a third and two thirds of the way down.
+
+node west   "West"
+node lower  "Lower"   below west (gap: tight)
+node north  "North"   right of west (gap: wide)   style: channel
+node south  "South"   below north (gap: wide)     style: channel
+node east   "East"    right of north and south (gap: wide)  even with west
+
+edge west  -> east  "over"   from: right  to: left  via: between north and south at 1/3
+edge lower -> east  "under"  from: right  to: left  via: between north and south at 2/3
+
+// Port and Starboard are apart horizontally, so here the line runs down the
+// gap instead. This line names no sides, so it leaves Bow's bottom, the side
+// facing Stern.
+
+node bow        "Bow"        below lower (gap: wide)
+node port       "Port"       below bow (gap: wide)       style: channel
+node starboard  "Starboard"  right of port (gap: wide)  style: channel
+node stern      "Stern"      below port (gap: wide)
+
+edge bow -> stern  "down"  via: between port and starboard at 1/3
+
+// The same gap travelled the other way, through its own point.
+
+edge stern -> bow  from: top  to: bottom  via: between port and starboard at 2/3
+
+// High and Low sit diagonally, so the space between them is the rectangle
+// between their nearest corners, and the point is its middle: under High and
+// over Low at once.
+
+node far   "Far"    below stern (gap: wide)
+node high  "High"   right of far (gap: wide)  style: channel
+node low   "Low"    below-right of high (gap: wide)  style: channel
+node near  "Near"   right of low (gap: wide)  even with high
+
+edge far -> near  "threaded"  via: between high and low

package/examples/deck.reladraw

@@ -0,0 +1,26 @@
+// A deck is a stack of cards, to say "there are several of these and they are
+// the same". The first card is in front, each next one a step up and to the
+// left behind it, and every card is as big as the biggest.
+
+style plain  fill: theme-fill  border: theme-border
+
+// The usual case: a front card with rows, and two more like it behind. A card
+// that holds things is written as a child, and then every card is.
+node drives           ""  layout: deck
+node drives.1         "Drive 1" (inside top, align: left)  badge: disk  layout: column (widths: match)
+node drives.1.backup  "shared folder / backup"  style: plain
+node drives.1.archive "archive"                 style: plain
+node drives.2         "Drive 2"
+node drives.3         "Drive 3"
+
+// Cards that are only texts are listed with cards:, front first. They are
+// named workers.1 and workers.2, so a line can end on one.
+node workers ""  right of drives (gap: wide)  layout: deck  cards: "worker" "worker"
+
+// The deck is the whole stack. Something placed above or left of it clears
+// every card, so this sits a gap away from the back card, not the front one.
+node source "source"  above drives  style: plain
+
+// An annotation may overlap the blank area of the trailing cards, as one
+// beside a row does in a drawing, by saying so.
+node rotated "swapped weekly"  left of drives.1.backup (gap: tight)  overlap: allow  shape: none

package/examples/flowchart.reladraw

@@ -0,0 +1,23 @@
+// An agent's work loop as a flowchart, from GitHub issue #18. A decision is a
+// diamond, the ends are pills, a step drawn as its own chart is a subprocess,
+// and a wait is the standard's delay, so the chart reads with no legend.
+
+node start   "start"                           shape: pill
+node read    "read the request"                below start
+node valid   "valid?"                          below read  shape: diamond
+node handle  "handle the request"              below valid (gap: wide)  shape: flow-subprocess
+node review  "wait for review"                 below handle  shape: flow-delay
+node report  "report"                          left of review (gap: wide)  shape: flow-document
+node reject  "reject / with a reason"          right of valid (gap: wide)
+node done    "end"                             below review (gap: wide)  shape: pill
+
+edge start -> read
+edge read -> valid
+// Out of the diamond's points: a side of a shape is the stretch of its
+// outline between the lines from its middle to two corners of its box.
+edge valid -> handle "yes"
+edge valid -> reject "no"  from: right  to: left
+edge handle -> review
+edge review -> report  from: left  to: right
+edge review -> done
+edge reject -> done  from: bottom  to: right  line: (path: square)

package/examples/frames.reladraw

@@ -0,0 +1,79 @@
+// A child may be placed against its parent's text, or against a side or corner
+// of its parent, with the same words used against anything else. Placed against
+// the text, it is content: the parent is the outline of its text and children,
+// and grows to hold it. Placed against a side or corner, it is put on the
+// finished box and never grows it.
+
+style mark  fill: #cdb96f  border: #8f7a3a  text: (color: #111111)
+
+// Four children in two rows, the title between the columns: placed right of
+// the left column and centered on its two rows, with the right column placed
+// right of the title, so the columns sit as far apart as the title needs.
+node corners "Deployment" (right of corners.a (gap: 1), even with corners.a and corners.c)
+node corners.a "north-west"
+node corners.b "north-east"  right of corners text (gap: 1)  top even with corners.a
+node corners.c "south-west"  below corners.a (gap: 1)
+node corners.d "south-east"  below corners.b (gap: 1)
+
+// A title in the top-left corner over two rows, packed a unit apart.
+node band "Deployment" (inside top, align: left)  right of corners (gap: wide)
+node band.a "north-west"
+node band.b "north-east"  right of band.a (gap: 1)
+node band.c "south-west"  below band.a (gap: 1)
+node band.d "south-east"  below band.b (gap: 1)
+
+// A title may be placed against the box's own children, with the words any
+// child uses: here in the top-right corner, beside north-west, with no row of
+// its own.
+node ranged "Deployment" (right even with ranged.d, top even with ranged.a)  right of band (gap: wide)
+node ranged.a "north-west"
+node ranged.c "south-west"  below ranged.a (gap: 1)
+node ranged.d "south-east"  right of ranged.c (gap: 1)
+
+// A list is a container: three marks in a column in the order written, beside
+// the title and the ordinary contents, its top even with the title's.
+node column "Payments service" (inside top, align: left)  below corners (gap: wide)
+node column.api "api"  below column text (gap: 1)  left even with column text
+node column.db "database"  below column.api (gap: 1)  left even with column.api
+node column.marks ""  right of column text and column.api and column.db (gap: 1)  top even with column text  shape: none  layout: column (gap: 1)
+node column.marks.one "one"      style: mark
+node column.marks.two "two"      style: mark
+node column.marks.three "three"  style: mark
+
+// A child above the title, and the contents below it, their left sides even
+// with the title's.
+node paused "Queue worker"  right of column (gap: wide)
+node paused.flag "PAUSED"  above paused text (gap: 1)  style: mark
+node paused.jobs "jobs"  below paused text (gap: 1)  left even with paused text
+node paused.retry "retries"  below paused.jobs (gap: 1)  left even with paused.jobs
+
+// Beside one child, even with it.
+node server "Server" (inside top, align: left)  right of paused (gap: wide)
+node server.web "web"
+node server.db "database"  below server.web (gap: 1)  left even with server.web
+node server.cache "cache"  below server.db (gap: 1)  left even with server.db
+node server.hot "hot"  right of server.db (gap: 1)  style: mark
+
+// Beside the text and joined to it, so the text and the mark are centered in
+// the box together.
+node fresh "Release notes"  below column (gap: wide)
+node fresh.tag "new"  right of fresh text (gap: 1)  join-with: fresh text  style: mark
+
+// On a corner rather than inside it: centered on the point, so it straddles
+// the edge. It takes no room in the box, so the box is stated wider, with the
+// text along its left, to keep the text clear of it.
+node dot "Inbox" (inside left)  right of fresh (gap: wide)  width: 7
+node dot.count "3"  on dot top-right  style: mark
+
+// Beyond the frame. The note is placed on the router's finished box and is no
+// part of its size, so the switch is placed right of the note, not the router.
+node router "Router"  right of dot (gap: wide)
+node router.note "note"  outside router right (gap: tight)  style: mark
+node switch "Switch"  right of router.note
+
+// An edge between two children. Its text takes no room of its own, so the
+// gap is stated wide enough to hold it.
+node pipe "Pipeline" (inside top, align: left)  below fresh (gap: wide)
+node pipe.src "source"
+node pipe.out "artifact"  15 right of pipe.src
+edge pipe.src -> pipe.out  "build and test"  from: right  to: left

package/examples/gap.reladraw

@@ -0,0 +1,21 @@
+// The picture from the README: where reladraw sits between auto-layout and
+// pixel-pushing, the middle node a gap from each end.
+
+style tool  fill: theme-fill  border: theme-border
+style here  fill: theme-primary-subtle  border: theme-primary
+style dim   text: (color: theme-muted)
+
+node auto "Auto-layout / [dim]placement is / an output[/dim]"  layout: column (gap: tight, widths: match)
+node auto.mermaid  "Mermaid.js"  style: tool
+node auto.graphviz "Graphviz"    style: tool
+node auto.d2       "D2"          style: tool
+
+node here "reladraw / [dim]placement is / stated[/dim]"  right of auto  style: here
+
+node manual "Absolute / [dim]placement is / pixels[/dim]"  right of here  even with auto  layout: column (gap: tight, widths: match)
+node manual.drawio     "draw.io"     style: tool
+node manual.excalidraw "Excalidraw"  style: tool
+node manual.figma      "Figma"       style: tool
+
+edge auto -> here    from: right  to: left
+edge here -> manual  from: right  to: left

package/examples/gaps.reladraw

@@ -0,0 +1,25 @@
+// Gaps belong to placements. Each says exactly how far, and a node has none of
+// its own.
+
+style plain  fill: theme-fill  border: theme-border
+
+node left_wall  "Left wall"   style: plain
+
+// Different distances on each side, each on its own placement.
+node wedge "Tight left, wide right"  right of left_wall (gap: tight)  style: plain
+node right_wall "Right wall"  right of wedge (gap: wide)  style: plain
+
+// Two placements, two gaps: wide below, tight from the wall.
+node stack "Wide below the wedge"  below wedge (gap: wide)  right of left_wall (gap: tight)  style: plain
+
+// `none` is contact, and the other placement still keeps its distance.
+node shelf "Flat on the stack"  below stack (gap: none)  right of left_wall (gap: tight)  style: plain
+
+edge left_wall -> wedge  from: right  to: left
+edge wedge -> right_wall  from: right  to: left
+
+// A gap is written where the relationship is: each neighbor says how far it
+// sits from the island, and the island says nothing about them.
+node island "Says nothing about its neighbors"  below shelf  style: plain
+node east   "Wide from the island"    right of island (gap: wide)  style: plain
+node west   "Tight from the island"   left of island (gap: tight)  style: plain

package/examples/icons.reladraw

@@ -0,0 +1,35 @@
+// The seven icons, and the two ways to use one: badge: puts the picture beside
+// a node's text, and icon: draws the node as the picture, with no box.
+
+// A style can carry a badge, so every store in a diagram looks alike without
+// anyone typing the word twice.
+style store  fill: theme-primary-subtle  border: theme-primary  badge: database
+
+// badge: makes the picture part of the label, and is shorthand for a heading.
+// row1.disk below is the same as writing
+//   node row1.disk  heading: row1.disk.head
+//   node row1.disk.head  ""  shape: none
+//   node row1.disk.head.text  "Spinning disk" (size: normal)  shape: none
+//   node row1.disk.head.badge  icon: disk  1 right of row1.disk.head.text
+node row1 ""  shape: none
+node row1.disk     "Spinning disk"     badge: disk
+node row1.desktop  "Workstation"       right of row1.disk (gap: tight)     badge: desktop
+node row1.laptop   "Portable"          right of row1.desktop (gap: tight)  badge: laptop
+
+node row2 ""  below row1 (gap: tight)  shape: none
+node row2.package  "Archive"           badge: package
+node row2.cubes    "Service instances" right of row2.package (gap: tight)  badge: cubes
+node row2.db       "Records"           right of row2.cubes (gap: tight)    style: store
+
+// icon: the node is the picture itself, and has no text unless you give it one.
+node row3 ""  below row2 (gap: tight)  shape: none
+node row3.cube     icon: cube
+node row3.db       icon: database    right of row3.cube (gap: tight)
+node row3.laptop   "Portable"  icon: laptop  right of row3.db (gap: tight)
+
+// No text, so the node is just the badge and its padding.
+node bare ""  below row3 (gap: tight)  badge: disk
+
+// A badge is two lines tall, so it shrinks and grows with the text beside it.
+node small "Small text / and a small badge" (size: small)  right of bare (gap: tight)   badge: laptop
+node large "Large text / and a large badge" (size: large)  right of small (gap: tight)  badge: laptop