reladraw 0.27.0 → 0.28.0

package/examples/lanes.reladraw

@@ -0,0 +1,54 @@
+// Several lines between the same two sides are copies of one line, and fan out
+// side by side instead of lying on top of each other. Copies never cross.
+
+style plain  fill: theme-fill  border: theme-border
+
+// A reciprocal pair around a corner. Each copy is shifted to the left of the
+// way it travels, so the order reverses between the two ends: further left
+// along Gateway's bottom is further down Queue's left.
+node gateway "Gateway"  style: plain
+node queue   "Queue"    5 below gateway  22 right of gateway  style: plain
+edge gateway -> queue  "publishes" (at: 2/3)  from: bottom  to: left  line: (path: square, corners: rounded)
+edge queue -> gateway  "receives" (at: 2/3)   from: left    to: bottom  line: (path: square, corners: rounded)
+
+// Two lines facing each other, where the order runs the same way at both ends.
+node client "Client"  below queue (gap: wide)  left even with gateway  style: plain
+node server "Server"  10 right of client  style: plain
+edge client -> server  "request" (below edge)   from: right  to: left
+edge server -> client  "response" (above edge)  from: left   to: right
+
+// Five copies down a vertical run, spread evenly along the two sides. The
+// texts read along their lines, since level they would be wider than a lane.
+node fan  "Fan of five, spread wide"  below client (gap: wide)  left even with gateway  style: plain
+node hub  "Hub of the same five"     below fan (gap: wide)  style: plain
+edge fan -> hub  "one" (reads: along)    from: bottom  to: top
+edge fan -> hub  "two" (reads: along)    from: bottom  to: top
+edge fan -> hub  "three" (reads: along)  from: bottom  to: top
+edge fan -> hub  "four" (reads: along)   from: bottom  to: top
+edge fan -> hub  "five" (reads: along)   from: bottom  to: top
+
+// Two lines pointing the same way. Nothing tells them apart, so the order they
+// are written in decides. Swap these two lines and the texts swap lanes.
+node left_wall  "Producer"  below hub (gap: wide)  left even with gateway  style: plain
+node right_wall "Consumer"  9 right of left_wall  style: plain
+edge left_wall -> right_wall  "bulk" (below edge)     from: right  to: left
+edge left_wall -> right_wall  "control" (above edge)  from: right  to: left
+
+// Sharing one side only doesn't make copies. The far ends differ, and their
+// order along the side decides which end is which.
+node spoke "Spoke"  below left_wall (gap: 16)  left even with gateway  style: plain
+node up    "Up"     above spoke  right of spoke (gap: wide)  style: plain
+node down  "Down"   below spoke  right of spoke (gap: wide)  style: plain
+edge spoke -> up    from: right  to: left
+edge spoke -> down  from: right  to: left
+
+// Five copies need sides long enough to hold them. Nothing grows a box to
+// make room, so these two are given the height; at their own height the ends
+// would crowd together, drawn and reported.
+node narrow "Narrow"  below down (gap: wide)  left even with gateway  height: 10  style: plain
+node also   "Also"    9 right of narrow  height: 10  style: plain
+edge narrow -> also  "first"   from: right  to: left
+edge narrow -> also  "second"  from: right  to: left
+edge narrow -> also  "third"   from: right  to: left
+edge narrow -> also  "fourth"  from: right  to: left
+edge narrow -> also  "fifth"   from: right  to: left

package/examples/lines.reladraw

@@ -0,0 +1,73 @@
+// Everything about how a line is drawn, in its bracket: line: (…). A line is
+// straight unless the bracket says otherwise. A shape is the rule for joining
+// what the file fixed — where the line leaves and which way it heads, where it
+// arrives, and any sides it passes.
+
+// Out of A's top and into B's left, three ways.
+node a1 "A"
+node b1 "B"  right of a1  above a1  (gap: wide)
+edge a1 -> b1  "curved"  from: top  to: left  line: (path: curved)
+
+node a2 "A"  right of a1  (gap: 18)
+node b2 "B"  right of a2  above a2  (gap: wide)
+edge a2 -> b2  "square"  from: top  to: left  line: (path: square)
+
+node a3 "A"  right of a2  (gap: 18)
+node b3 "B"  right of a3  above a3  (gap: wide)
+edge a3 -> b3  "straight"  from: top  to: left  line: (path: straight)
+
+// Rounded corners, and a square line naming no sides: across first, then down.
+node c1 "C"  below a1  (gap: 8)
+node d1 "D"  right of c1  below c1  (gap: wide)
+edge c1 -> d1  "rounded"  from: bottom  to: left  line: (path: square, corners: rounded)
+
+node c2 "C"  right of c1  (gap: 18)
+node d2 "D"  right of c2  below c2  (gap: wide)
+edge c2 -> d2  "no sides" (at: 1/5, right of edge)  line: (path: square)
+
+// A stop: the line runs along Middle's bottom. Square turns where its shape
+// says; straight joins the stop's two ends to its own with straight pieces.
+// Both run a normal gap under Middle, twice the default, to leave the text room.
+node p1 "P"  below c1  (gap: 18)
+node q1 "Q"  right of p1  (gap: 18)
+node m1 "Middle"  right of p1  left of q1  even with p1
+edge p1 -> q1  "square"  from: right  to: left  via: m1 bottom (gap: normal)  line: (path: square)
+
+node p2 "P"  below p1  (gap: 8)
+node q2 "Q"  right of p2  (gap: 18)
+node m2 "Middle"  right of p2  left of q2  even with p2
+edge p2 -> q2  "straight"  from: right  to: left  via: m2 bottom (gap: normal)  line: (path: straight, corners: rounded)
+
+// Patterns and thicknesses.
+node f1 "F"  below p2  (gap: 8)
+node g1 "G"  right of f1  (gap: 18)
+edge f1 -> g1  "dashed"  line: (pattern: dashed)
+node f2 "F"  below f1  (gap: normal)
+node g2 "G"  right of f2  (gap: 18)
+edge f2 -> g2  "dotted"  line: (pattern: dotted)
+node f3 "F"  below f2  (gap: normal)
+node g3 "G"  right of f3  (gap: 18)
+edge f3 -> g3  "dash-dot"  line: (pattern: dash-dot)
+node h1 "H"  right of g1  (gap: 12)
+node k1 "K"  right of h1  (gap: 18)
+edge h1 -> k1  "thin"  line: (thickness: thin)
+node h2 "H"  below h1  (gap: normal)
+node k2 "K"  right of h2  (gap: 18)
+edge h2 -> k2  "thick"  line: (thickness: thick, color: #d2904e)
+node h3 "H"  below h2  (gap: normal)
+node k3 "K"  right of h3  (gap: 18)
+edge h3 -> k3  "4px, dashed"  line: (thickness: 4px, pattern: dashed)
+
+// Crossings: the later line jumps the earlier one.
+node w "W"  below f3  (gap: 12)
+node e "E"  right of w  (gap: 35)
+node n1 "N1"  below g3  (gap: 8)
+node n2 "N2"  right of n1  (gap: 2.5)
+node n3 "N3"  right of n2  (gap: 2.5)
+node s1 "S1"  below n1  (gap: 13)
+node s2 "S2"  right of s1  (gap: 2.5)
+node s3 "S3"  right of s2  (gap: 2.5)
+edge w -> e
+edge n1 -> s1  "arc"  line: (crossing: arc)
+edge n2 -> s2  "square"  line: (crossing: square)
+edge n3 -> s3  "gap"  line: (crossing: gap)

package/examples/linetexts.reladraw

@@ -0,0 +1,48 @@
+// Texts on lines. With nothing said a text sits at the middle of its line,
+// on it, and several spread evenly. Its bracket says where else: a fraction
+// along the line, along one named leg or along its longest level piece, a gap from either end, where a way
+// straight out from a box meets the line, a gap off a box, or beside the
+// line on a stated side. The line is drawn first and never moves for a text.
+
+style plain  fill: theme-fill  border: theme-border
+
+// Near each end, clear of the arrowhead, above the line; one in the middle.
+node customer "Customer"  style: plain
+node order "Order"  right of customer (gap: 20)  style: plain
+edge customer -> order  "1" (at: start, above edge)  "places"  "0..*" (at: end, above edge)
+
+// On a named leg, level with a box: the text goes where a way straight right
+// from Confirm meets the climb into Broker, then right of it.
+node accept "Accept order"  below customer (gap: wide)  style: plain
+node broker "Broker"  right of accept (gap: 12)  style: plain
+node confirm "Confirm"  below accept (gap: tight)  left of accept (gap: wide)  style: plain
+edge accept -> broker  "publish message" (on: climb, straight right from confirm, right of edge)
+     from: bottom  to: bottom  line: (corners: rounded)
+     via: 7 below accept bottom, 7 below broker bottom, leg climb
+
+// Resting on a box: the text's bottom a gap above Service, left of the
+// line coming down into it.
+node service "Service"  below confirm (gap: 16)  style: plain
+node queue "Queue"  right of service (gap: 10)  6 above service  style: plain
+edge queue -> service  "ack" (above service, on the line, left of edge)  from: left  to: top  line: (path: square)
+
+// Which way a text reads: turned up beside a tall line, and along a slope.
+node top "Top"  right of queue (gap: wide)  style: plain
+node bottom "Bottom"  below top (gap: 10)  style: plain
+edge top -> bottom  "ten units" (left of edge, reads: up)
+node low "Low"  right of top (gap: wide)  8 below top  style: plain
+node high "High"  right of low (gap: 12)  above low (gap: 4)  style: plain
+edge low -> high  "climbing" (reads: along)
+
+// On the longest level piece: the middle of this line would land by the
+// corner, where the text would stand off in open space.
+node ask "Ask"  below service (gap: 12)  style: plain
+node answer "Answer"  below ask (gap: tight)  right of ask (gap: 10)  style: plain
+edge answer -> ask  "retry" (on: longest level)  from: left  to: left  line: (path: square, corners: rounded)
+
+// How far off its line: "1 above edge" rises one unit from its spot on the
+// line and may still cross it, "1/2 clear above edge" goes half the way
+// that would clear it. The text hides the line where they cross.
+node near "Near"  right of answer (gap: wide)  above answer (gap: 2)  style: plain
+node far "Far"  10 below and 16 right of near  style: plain
+edge near -> far  "one up" (at: 1/4, 1 above edge)  "half clear" (at: 3/4, 1/2 clear above edge)

package/examples/marks.reladraw

@@ -0,0 +1,39 @@
+// What can be drawn at each end of a line. The arrow is a mark, a line, a mark:
+// a word or a glyph at either end of one or two dashes, either end left off.
+
+style label  text: (color: theme-muted)
+
+node plain   "plain"
+node plain2  "a -- b"      right of plain (gap: wide)  style: label
+edge plain -- plain2
+
+node arrows  "arrows"      below plain
+node arrows2 "a <-> b"     right of arrows (gap: wide)  style: label
+edge arrows <-> arrows2
+
+node uml     "inherits"    below arrows
+node uml2    "a --|> b"    right of uml (gap: wide)  style: label
+edge uml --|> uml2
+
+node whole   "composed"    below uml
+node whole2  "a diamond--> b"  right of whole (gap: wide)  style: label
+edge whole diamond--> whole2
+
+node part    "aggregates"  below whole
+node part2   "a odiamond-- b"  right of part (gap: wide)  style: label
+edge part odiamond-- part2
+
+node dots    "dots"        below part
+node dots2   "a *--o b"    right of dots (gap: wide)  style: label
+edge dots *--o dots2
+
+node bars    "bars"        below dots
+node bars2   "a |--| b"    right of bars (gap: wide)  style: label
+edge bars |--| bars2
+
+// A style can carry marks too. It fills only the ends the arrow leaves blank,
+// so here the arrow's own head stays and the style adds a dot at the start.
+style tracked  from-mark: dot  to-mark: oarrow
+node styled  "styled"      below bars
+node styled2 "a --> b, with a style"  right of styled (gap: wide)  style: label
+edge styled --> styled2  style: tracked

package/examples/names.reladraw

@@ -0,0 +1,23 @@
+// A node with no text of its own takes its name as its text.
+
+node parser
+node resolver  12 right of parser
+node renderer  12 right of resolver
+edge parser -> resolver "statements"
+edge resolver -> renderer "geometry"
+
+// A dotted name shows only its last segment. The containment is already drawn.
+
+node server  "My Server Machine" (inside top, align: left)  below parser (gap: wide)
+node server.docker
+node server.backup  right of server.docker (gap: tight)
+
+// Empty quotes are the other half: a node that is deliberately blank.
+
+node pool ""  right of server (gap: wide)  shape: none
+node pool.one  icon: cube
+node pool.two  right of pool.one (gap: tight)  icon: cube
+
+// A stated text still wins.
+
+node store "Records"  below pool.one and pool.two  badge: database

package/examples/outlines.reladraw

@@ -0,0 +1,56 @@
+// Every outline `shape:` names. A shape geometry has a word for is named by
+// it, and takes settings in a bracket for what its box doesn't decide; a
+// flowchart shape with no geometric word is `flow-` and what it means, drawn
+// as the standard draws it. Each grows until its text fits at its middle.
+
+node diamond  "valid?"  shape: diamond
+node flat     "valid?"  right of diamond (gap: tight)  shape: diamond  width: 18  height: 5
+node pill     "start"  right of flat (gap: tight)  shape: pill
+node para     "read input"  right of pill (gap: tight)  shape: parallelogram
+node left     "read input"  right of para (gap: tight)  shape: parallelogram (slant: 3, lean: left)
+
+node hexagon  "set up"  below diamond (gap: wide)  shape: hexagon
+node pointy   "set up"  right of hexagon (gap: tight)  shape: hexagon (point: 3)
+node trap     "sign off"  right of pointy (gap: tight)  shape: trapezoid
+node trapup   "sign off"  right of trap (gap: tight)  shape: trapezoid (taper: 3, narrow: top)
+// The text sits at a triangle's middle, a third of the way from its base.
+node up       "split"  right of trapup (gap: tight)  shape: triangle (aim: up)
+node down     "merge"  right of up (gap: tight)  shape: triangle
+node aimed    "next"  right of down (gap: tight)  shape: triangle (aim: right)
+
+node db       "orders"  below hexagon (gap: wide)  shape: cylinder
+node queue    "queue"  right of db (gap: tight)  shape: cylinder (cap: 1.5, lying)
+node oval     "cache"  right of queue (gap: tight)  shape: circle  width: 16  height: 6
+node doc      "report"  right of oval (gap: tight)  shape: document (fold: 1.5)
+
+node sub      "handle"  below db (gap: wide)  shape: flow-subprocess
+node wavy     "report"  right of sub (gap: tight)  shape: flow-document
+node page     "p. 2"  right of wavy (gap: tight)  shape: flow-off-page
+node delay    "wait"  right of page (gap: tight)  shape: flow-delay
+node manual   "type code"  right of delay (gap: tight)  shape: flow-manual-input
+node stored   "store"  right of manual (gap: tight)  shape: flow-stored-data
+
+node loop     "each file"  below sub (gap: wide)  shape: flow-loop-start
+node next     "next"  right of loop (gap: tight)  shape: flow-loop-end
+node card     "card"  right of next (gap: tight)  shape: flow-card
+node screen   "screen"  right of card (gap: tight)  shape: flow-display
+node tape     "T"  right of screen (gap: tight)  shape: flow-tape
+node paper    "tape"  right of tape (gap: tight)  shape: flow-punched-tape
+// Collate's middle is where its two halves meet, so its text sits on a patch.
+node collate  "collate"  right of paper (gap: tight)  shape: flow-collate
+
+// Lines on a shape's sides and corners. A corner is where the line from the
+// shape's middle to that corner of its box meets the outline.
+node hub      "route?"  below loop (gap: wide)  shape: diamond
+node north    "in"  above hub (gap: normal)  shape: none
+node east     "no"  right of hub (gap: wide)
+node south1   "a"  below hub (gap: wide)
+node south2   "b"  right of south1 (gap: tight)
+node south3   "c"  right of south2 (gap: tight)
+node note     "see policy"  right of north (gap: wide)  shape: none
+edge north -> hub
+edge hub -> east  from: right
+edge hub -> south1  from: bottom
+edge hub -> south2  from: bottom
+edge hub -> south3  from: bottom
+edge note -> hub  to: top-right

package/examples/overhang.reladraw

@@ -0,0 +1,24 @@
+// Lines that leave the area the nodes cover. The page grows to hold them, on
+// every side a line goes past.
+
+default edge  line: (path: square, corners: rounded)
+
+style plain  fill: theme-fill  border: theme-border
+
+node a "A"                            style: plain
+node b "B"  right of a  (gap: wide)  width: 5  style: plain
+node c "C"  right of b                style: plain
+
+node d "D"  below a and c             style: plain
+
+// A long arch over everything, with the text at the top of it.
+edge a -> b  "over the top"  from: top  to: top
+
+// The same shape across a narrow gap.
+edge b -> c  from: top  to: top
+
+// Out the left and back into the left, so the loop hangs off the left edge.
+edge d -> a  "round the side" (at: 1/4)  from: left  to: left
+
+// Out the right and round into the bottom, under the bottom row.
+edge c -> d  "under" (at: 2/3)  from: right  to: bottom

package/examples/overlays.reladraw

@@ -0,0 +1,75 @@
+// A placement's target may be a *part* of a node — its text, one of its four
+// sides, or one of its nine points — written as a separate word after the
+// node's name. Three direction words go with a part:
+//
+//   inside   wholly within, against that part
+//   outside  wholly beyond it
+//   on       centered on it, so a node on a corner straddles it
+//
+// `inside` and `outside` are shorthands whose expansion is derived rather than
+// listed: inside is the direction from the named part toward the box's center,
+// outside is away from it. `inside right` is `left of`, `inside top-right` is
+// `below-left of`, and nobody writes a table.
+
+style mark   shape: none  text: (color: theme-muted)
+style spacer  fill: none  border: none
+style link  shape: none  text: (color: #6fa8dc)
+
+// All nine points at once. The board is held open by six invisible children
+// with nothing in them, which is also the point being made: a box is sized by
+// what it *holds*, and the nine marks stamped on it are not held by anything.
+node board ""  fill: theme-fill  border: theme-border
+node board.nw ""  style: spacer
+node board.n  ""  style: spacer  right of board.nw (gap: 10)
+node board.ne ""  style: spacer  right of board.n (gap: 10)
+node board.sw ""  style: spacer  below board.nw (gap: wide)
+node board.s  ""  style: spacer  right of board.sw (gap: 10)  below board.n (gap: wide)
+node board.se ""  style: spacer  right of board.s (gap: 10)   below board.ne (gap: wide)
+
+node p1 "top-left"       inside board top-left       style: mark
+node p2 "top-center"     inside board top-center     style: mark
+node p3 "top-right"      inside board top-right      style: mark
+node p4 "left-center"    inside board left-center    style: mark
+node p5 "center"         on board center             style: mark
+node p6 "right-center"   inside board right-center   style: mark
+node p7 "bottom-left"    inside board bottom-left    style: mark
+node p8 "bottom-center"  inside board bottom-center  style: mark
+node p9 "bottom-right"   inside board bottom-right   style: mark
+
+// The case the design record names: an ordinary box with its text in the middle
+// and, centered at the bottom inside it, a small link.
+node bob "Bob the builder"  below board
+node bob.card ""  style: spacer
+node bob_link "bob.example.com"  inside bob bottom-center  style: link  url: "https://bob.example.com"
+
+// The inset is a named gap on the placement, and `none` puts the node hard
+// against the edge, the same as the gap on any other placement.
+node plate "A wide plate to stamp on"  right of bob (gap: wide)
+node flush "flush"  inside plate top-right (gap: none)  style: mark
+
+// `on` is the thing the old dedicated overlay word could not say: the node's
+// center on the point, so it straddles the corner instead of tucking inside.
+node dot "A box with a dot on its corner"  below plate (gap: wide)
+node straddle "*"  on dot top-right  style: mark
+
+// A side is a segment rather than a point, so the axis it does not name is
+// left free — this sits against the right edge and centers down it. The box
+// is made wide enough that the mark clears the children.
+node column "A tall box"  right of dot (gap: wide)  layout: column  width: 25
+node column.one "one"
+node column.two "two"
+node column.three "three"
+node column_mark "inside right"  inside column right  style: mark
+
+// `outside` is the same rule read the other way: wholly beyond the named
+// part, which is how a caption sits clear of one edge and no other.
+node under "outside bottom"  outside column bottom  style: mark
+
+// A part target works on a picture as readily as on a box. The count is
+// bigger than the small picture, so it sits on the corner rather than inside.
+node unit  icon: cube  right of plate
+node tag "x3"  on unit bottom-right  style: mark
+
+// Saying `inside` or `on` says the overlap is meant, for that pair and nothing
+// else: anything else `flush` lands on is still reported.
+edge bob -> plate  from: right  to: left

package/examples/parts.reladraw

@@ -0,0 +1,31 @@
+// A color names the part it colors: fill, border, text, line. A text says its
+// own in the brackets after it; a style, having no text of its own, says it as
+// `text: (color: …)`.
+
+// All three parts of a node.
+style dim  text: (color: theme-muted)
+
+node ledger "Ledger / [dim]append only[/dim]"  fill: theme-primary-subtle  border: theme-primary
+
+// Text on its own.
+node plain "Plain" (color: #ff9d4d)  right of ledger (gap: wide)
+
+// A node with no body is text and nothing else, so its text is its only color.
+// `border:` here is an error rather than a no-op.
+node remark "no body, so text is the only part" (color: #66ccff)  below ledger  shape: none
+
+// A style shared between nodes and edges writes one key per kind. The node takes
+// the border, the edge takes the line, and neither sees the other's word.
+style traced  border: #d2904e  line: #d2904e
+
+// A picture body is a picture and the text under it.
+node store "store" (color: #ff9d4d)  right of plain (gap: wide)  icon: database
+
+// An edge's text takes the line's color unless its own brackets say otherwise.
+node worker "Worker"  below remark (gap: wide)  style: traced
+node queue  "Queue"   18 right of worker
+edge worker -> queue  "inherits the line"  style: traced  from: right  to: left
+
+node reader "Reader"  below worker (gap: wide)
+node cache  "Cache"   18 right of reader
+edge reader -> cache  "says its own" (color: theme-text)  line: #ff9d4d  from: right  to: left

package/examples/passes.reladraw

@@ -0,0 +1,56 @@
+// Saying where a line passes, with via:. A side is a run along it, just
+// outside, from the end nearer the line; a point is one spot the line goes
+// through. Between the stops it names, a curved line takes one sweep.
+
+default edge  line: (path: curved)
+
+// A row, with the line sent underneath it: a run under each end box.
+node parser "Parser"
+node resolver "Resolver"  right of parser
+node renderer "Renderer"  right of resolver
+
+edge parser -> renderer  "underneath"  from: left  to: right  via: parser bottom, renderer bottom
+
+// Two runs on opposite sides: down A's left, then down B's right, so the line
+// crosses over in the gap between.
+node a "A"  below parser  (gap: 14)
+node b "B"  below a  (gap: wide)
+
+edge a -> b  "an S"  from: top  to: bottom  via: a left, b right
+
+// Out of the top and round the left.
+node p "P"  right of a  (gap: 18)
+node q "Q"  below p  (gap: normal)
+
+edge p -> q  "the left"  from: top  to: top  via: p left (gap: normal)
+
+// One point, over the middle of Peak's top: the line rises to it and falls.
+// A curve swings in below the point on either side of it, so the point is
+// a normal gap up, clear of Peak's corners, rather than the default tight.
+node t1 "T1"  below b  (gap: 16)
+node t2 "T2"  right of t1  (gap: 13)
+node peak "Peak"  right of t1  left of t2  above t1  (gap: tight)
+
+edge t1 -> t2  "over a point"  from: right  to: left  via: peak top-center (gap: normal)
+
+// Runs under both ends, so the line stays low past Peak2 between them.
+node u1 "U1"  right of t2  (gap: wide)
+node u2 "U2"  right of u1  (gap: 13)
+node peak2 "Peak2"  right of u1  left of u2  above u1  (gap: tight)
+
+edge u1 -> u2  "under both"  from: left  to: right  via: u1 bottom, u2 bottom
+
+// An end naming no side leaves from the one facing the other box.
+node x "X"  below t1  (gap: 12)
+node z "Z"  right of x
+node y "Y"  right of z
+
+edge x -> y  "no sides named"  via: z bottom
+
+// The point between two boxes: the line threads the gap between LN and LM.
+node la "LA"  right of y  (gap: wide)
+node ln "LN"  below la  (gap: wide)
+node lm "LM"  right of ln  (gap: wide)
+node lb "LB"  below lm  (gap: wide)
+
+edge la -> lb  "between"  from: bottom  to: top  via: between ln and lm

package/examples/points.reladraw

@@ -0,0 +1,28 @@
+// Points and regions: a place said in words, worked out from named things, so
+// moving them moves it. Render with --guides to see the construction.
+
+node gw "Gateway"  height: 12
+
+// A fraction of the way along the side the direction faces.
+node users  "Users"   right of gw 1/4 down (gap: wide)
+node orders "Orders"  right of gw 3/4 down (gap: wide)
+
+// A named point, with a text of its own: above the dot unless it says which way.
+point split "by path" (below)  between gw and orders
+
+// Part against part: centers exactly 5 apart, as on a timeline.
+node v1 "v1"  center 5 below gw bottom-center
+node v2 "v2"  center 5 right of v1 center
+node v3 "v3"  center 5 right of v2 center
+
+// Where a line straight down from one thing meets one straight right from another.
+node tag "latest"  shape: none  on down from orders and right from v3
+
+// A region is drawn in front of the boxes it doesn't name and behind the ones it does.
+// Its text takes a title's words, and inside, the region makes room for it.
+region services "services" (inside top, align: left)  users top-left to orders bottom-right  padding: 1
+
+// A guide does everything but draw: a rail the versions hang from, and a line
+// shown only while working.
+guide region rail  v1 top-left to v3 top-right
+guide edge gw -> users

package/examples/regions.reladraw

@@ -0,0 +1,14 @@
+// Naming several targets places a node against the region that bounds them all.
+
+node one    "first"
+node two    "second"                 below one
+node three  "third with a longer label"  below two
+
+// A direction clears the furthest of them. This one says nothing about its own
+// vertical position, so it centers on the region, as a lone direction does.
+node spans  "even with all three, and clear of the widest" (wrap: 24)  right of one and three (gap: wide)  shape: none
+
+// An alignment uses the region as a position. "top" is its top edge, not its middle.
+node tops   "top even with the second box" (wrap: 20)                  right of two (gap: tight)  top even with two  shape: none
+
+node beside  "centered on the top two"  right of spans (gap: wide)  even with one and two

package/examples/routing.reladraw

@@ -0,0 +1,88 @@
+// Every routing bug reported so far, one row each, the line's text saying
+// where it was reported. Each of these was drawn through a box, on top of
+// another line, or hard against a box's edge. Lines no longer find their own
+// way round anything: each row states its course, and the line follows it.
+
+default edge  line: (path: square, corners: rounded)
+
+// Hacker News, 2026-09-26: ends facing away across a row. The line ran
+// straight through the middle node, its text sitting on it. It now runs along
+// the tops of the two end boxes, so it passes over the row.
+node parser "Parser"
+node resolver "Resolver"  right of parser
+node renderer "Renderer"  right of resolver
+edge parser -> renderer  "Hacker News"  from: left  to: right  via: parser top, renderer top
+
+// GitHub issue #2: stacked, sides at right angles. The line came straight up
+// through the lower node. Leaving the bottom and arriving at the left, it now
+// steps out and comes round.
+node p "P"  below parser  (gap: wide)
+node q "Q"  below p  (gap: 7)
+edge p -> q  "issue #2" (at: 5/8, left of edge)  from: bottom  to: left
+
+// GitHub issue #2: both ends on the same side, one node behind the other. The
+// line went straight through the node behind.
+node r "R"  right of p  (gap: wide)
+node s "S"  right of r  (gap: 19)
+edge r -> s  "issue #2, same side" (above edge)  from: left  to: left  via: r top
+
+node v "V"  right of s  (gap: wide)
+node w "W"  below v
+edge v -> w  from: bottom  to: bottom  via: w right
+
+// A fan of three, 2026-09-27. The lines to the top and bottom nodes ran level
+// with the middle one, straight through it, out past the column and back.
+// All three now leave from one point and fan out, written as one statement so
+// the stretch they share is said rather than happened on.
+node a "A"  below q  (gap: wide)
+node c "C"  right of a  (gap: wide)
+node b "B"  above c  (gap: 1)
+node d "D"  below c  (gap: 1)
+edge a -> b, c, d  "fan" (at: start, above edge)  from: right-center  to: left
+
+// The Cache case, 2026-09-27. The curved line dipped through Cache, while the
+// same line drawn square happened to clear it. It now runs under Cache.
+node web "Web"  right of c  (gap: wide)
+node api "API"  right of web
+node db "Postgres"  right of api
+node cache "Cache"  below api
+edge web -> db  "cache case"  from: bottom  to: bottom  via: cache bottom
+
+// A line back round the side of a row, 2026-09-26: it crossed the node it
+// was going round.
+node e "E"  below a  (gap: 22)
+node f "F"  right of e  (gap: 16)
+node g "G"  below e and f
+edge g -> e  "round the side" (at: 1/4)  from: left  to: left
+
+// Two lines into one box, 2026-09-27. The longer one's curve swung across
+// the other's twice. The longer one now comes in from above.
+node x1 "X"  right of z  (gap: wide)
+node a1 "A"  below x1
+node b1 "B"  right of a1  (gap: normal)  below a1  (gap: tight)
+edge a1 -> b1  from: right  to: left
+edge x1 -> b1  from: right  to: top
+
+// No side named, with a box in the way. The line used to be straight from
+// center to center, through whatever lay between.
+node x "X"  right of f  (gap: wide)
+node y "Y"  right of x
+node z "Z"  right of y
+edge x -> z  "no sides named" (above edge)  via: y top
+
+// Three lines told the same thing, 2026-09-27. They were drawn on one path,
+// so the three read as one line with three arrowheads. Copies of one line now
+// fan out, nested so that none crosses another.
+node ra "A"  below g  (gap: wide)  width: 6
+node rb "B"  right of ra  width: 6
+edge ra -> rb  from: bottom  to: bottom
+edge ra -> rb  from: bottom  to: bottom
+edge ra -> rb  from: bottom  to: bottom
+
+// Through a named gap, 2026-09-28. The line ran about 2px from Lower, then
+// came into Lowest's right side down Lowest's own edge. It now passes the
+// point between the two and comes into the side from outside.
+node west "West"  right of rb  (gap: wide)
+node lower "Lower"  below west  (gap: tight)
+node lowest "Lowest"  below lower  (gap: normal)
+edge west -> lowest  "between"  from: left  to: right  via: between lower and lowest