reladraw 0.6.0 → 0.7.1

package/README.md

@@ -68,7 +68,7 @@ It is [plain Markdown](.claude/skills/reladraw/SKILL.md) with the syntax referen
 
 ## Status
 
-Version 0.6.0. Early, but it runs: a parser, resolver and SVG renderer in TypeScript with no runtime dependencies, and a command-line tool that takes a text file and writes a standalone SVG. The comparison at the top of this page is that pipeline run on [`examples/arch.reladraw`](examples/arch.reladraw). What is still visibly off there is typography, not placement.
+Version 0.7.1. Early, but it runs: a parser, resolver and SVG renderer in TypeScript with no runtime dependencies, and a command-line tool that takes a text file and writes a standalone SVG. The comparison at the top of this page is that pipeline run on [`examples/arch.reladraw`](examples/arch.reladraw). What is still visibly off there is typography, not placement.
 
 ```
 npm install -g reladraw
@@ -121,7 +121,7 @@ Three design problems decide how much machinery this needs, and the first outran
 
 **What the engine is allowed to decide.** Auto-layout is refused, because a picture chosen by an algorithm is not predictable from its source, and that predictability is the entire point. Working out coordinates from an arrangement the author stated is a different thing and is simply the job. The test between them: the engine's freedom may affect distances and never relationships. If a default can change which side of something a node sits on, the language was short a statement and the tool should say so rather than guess.
 
-**Overlap and edge routing.** Relative placement with default spacing collides as soon as two clusters grow toward each other. Stating placement and then routing edges afterward with no influence on them reproduces the exact failure this is meant to avoid, so minimal node-avoiding orthogonal routing belongs in the first version. Routing and diagnostics are complements, not substitutes: routing fixes what it can, and the diagnostics report what it could not.
+**Overlap and edge routing.** Relative placement with default spacing collides as soon as two clusters grow toward each other, and nodes are kept apart for exactly that reason. Edges are different: which side of a node a line passes is a relationship, so the tool does not pick a route around an obstacle by itself. You say where a line goes instead — the side it leaves and arrives on, the gap it runs through, the nodes it passes above or below — and the line is drawn curved, square or straight through those points. A line that crosses something it should not is one you have not said enough about yet. Whether the tool should at least point that out, naming the clause that would fix it, is an open question.
 
 ## Prior art
 

package/SYNTAX.md

@@ -1,4 +1,4 @@
-# Syntax reference — 0.6.0
+# Syntax reference — 0.7.1
 
 What the language accepts. The parser, resolver and SVG renderer implement all of it; the sections at the end record what is defective, unchecked or undecided.
 
@@ -576,6 +576,41 @@ Refused, each by name:
 
 An end with no side named leaves from the side facing where the line is going.
 
+### How the line is drawn
+
+Everything about the line itself goes in its bracket:
+
+```
+edge api -> db  line: (path: square, corners: rounded)
+edge api -> cache  line: (pattern: dashed, thickness: thin)
+edge web -> api  line: (color: #d2904e, thickness: thick, crossing: arc)
+```
+
+`line: red` is short for `line: (color: red)`, and is still the way to write a color alone. Every other property needs the bracket, and `line: square` is refused with the bracket it meant. Like any attribute, the bracket may go on an edge, in a style, or on `default edge` — `default edge  line: (path: square, corners: rounded)` draws a whole diagram with right angles.
+
+| property | takes | says |
+|---|---|---|
+| `color` | a color | as `line:` alone |
+| `path` | `curved` (the default), `square`, `straight` | how the line joins the points it has to meet |
+| `corners` | `sharp` (the default), `rounded` | how a square or straight line turns |
+| `crossing` | `none` (the default), `arc`, `gap`, `square` | how the line is drawn where it crosses an earlier one |
+| `pattern` | `solid` (the default), `dashed`, `dotted`, `dash-dot` | |
+| `thickness` | `thin`, `normal` (the default), `thick`, or a number of pixels | |
+
+**A path is the rule for joining what the file fixed**: where the line leaves and which way it heads, where it arrives and from which direction, and any sides it passes. Out of A's top and into B's left, with B up and to the right:
+
+- `curved` bends round from heading up to heading right. It is how every line was drawn before there was a choice, including the straight line an edge naming no sides has always been.
+- `square` goes up, then across into B — one right angle, because leaving upward and arriving from the left fixes which way it turns. A square line naming no sides picks them: boxes sharing a column join top to bottom, boxes sharing a row side to side, and otherwise the line goes across first, then down. An end naming no side, beside one that does, takes whichever side needs the fewest turns.
+- `straight` is one straight piece from A's top to B's left, ignoring which way each faces. Given `below c` or `between a and b`, it bends where that clause puts a point it has to pass, and nowhere else.
+
+**Corners** apply wherever a line has them: every bend in a square line, and the bends a clause puts in a straight one. A curved line has none, so `corners: rounded` written on a curved edge is refused. From a style or a default it rounds the edges that have corners and leaves curved ones alone, as a style's `fill:` lands only on the things that have an inside.
+
+**A crossing is drawn on the later line**: the edge written further down the file jumps the one written above it. `arc` is a small half-circle hop, `square` a three-sided jump, and `gap` a short break in the later line, as though it passed underneath. A line never jumps within reach of its own ends, where two lines meeting at a box are not passing each other.
+
+**A pattern is measured in thicknesses**, so dashes keep their proportions on a thick line.
+
+**A thick line takes room.** Its arrowhead grows with it, and the room an edge's text makes for itself counts the arrowhead it will actually have, so thickening a line with text between two close nodes can push them apart — the same way a larger text grows its node. Color, path, corners, crossings and pattern move nothing.
+
 ## Against a part of a node
 
 ```
@@ -716,7 +751,7 @@ Every attribute, and what takes one. The kinds here are what a node's **body** i
 | `fill` | ✓ | | | | color — see "A color names the part it colors" |
 | `border` | ✓ | | | | color |
 | `text` | ✓ | ✓ | ✓ | ✓ | the text's properties, in brackets — a style's form of what a node or an edge writes after its own words |
-| `line` | | | | ✓ | color |
+| `line` | | | | ✓ | color, or everything about the line in brackets — see "How the line is drawn" |
 | `url` | ✓ | ✓ | ✓ | ✓ | a destination to open when the thing is clicked |
 
 The `diagram` statement has a vocabulary of its own — `theme`, `background` and `text` — which is checked the same way. Writing `background:` on a node is an error that points at `fill:`, and `theme:` on one points at `diagram theme:`. A `default` takes a narrower list for each kind; see "Defaults".
@@ -977,6 +1012,14 @@ That one was found by testing the lexer, not by rendering — and it could not h
 
 Pre-1.0, so the minor number is where a breaking change goes. Every removal below is refused by name with the replacement quoted, rather than dropped in silence — an older file stops with an error saying what to write instead.
 
+**0.7.1**
+
+- A fix, no syntax change. An edge with `line: (path: straight)` and a clause such as `below m` could draw its text on top of `m`. The line now bends through the room left for the text, so the text sits clear of the node. Existing diagrams with such an edge will look different, and correct.
+
+**0.7.0**
+
+- `line:` takes a bracket for everything about how the line is drawn: `path: curved | square | straight`, `corners: sharp | rounded`, `crossing: none | arc | gap | square`, `pattern: solid | dashed | dotted | dash-dot` and `thickness: thin | normal | thick` or a number. `line: red` still works, as the short form of `line: (color: red)`. Every default is how lines were drawn before, so no existing file changes.
+
 **0.6.0**
 
 - An edge whose ends face away from each other, such as `from: left  to: right` with the far node to the right, goes around instead of through its own nodes: through the gap between them if there is room, over the top of the row if not. Several over one row take a lane each. Sides at right angles, such as `from: left  to: top`, go around the same way when one faces away.

package/dist/ast.d.ts

@@ -241,6 +241,24 @@ export type Attrs = Record<string, string>;
  * `align` is how its lines range against each other once it is there.
  */
 export declare const TEXT_KEYS: readonly ["color", "size", "wrap", "align", "at"];
+/**
+ * What an edge's line takes in its bracket: `line: (path: square, pattern:
+ * dashed)`. The line is a part in the sense the text is, so every property of
+ * it goes in one bracket, as the text's do. `line: red` stays as the short form
+ * of `line: (color: red)`, and both are stored under the bare `line` key.
+ */
+export declare const LINE_KEYS: readonly ["color", "path", "corners", "crossing", "pattern", "thickness"];
+/**
+ * The words each of the line's properties takes, the default first. Thickness
+ * takes a plain number of pixels as well.
+ */
+export declare const LINE_VALUES: {
+    readonly path: readonly ["curved", "square", "straight"];
+    readonly corners: readonly ["sharp", "rounded"];
+    readonly crossing: readonly ["none", "arc", "gap", "square"];
+    readonly pattern: readonly ["solid", "dashed", "dotted", "dash-dot"];
+    readonly thickness: readonly ["normal", "thin", "thick"];
+};
 export interface NodeStmt {
     kind: 'node';
     name: string;

package/dist/ast.js

@@ -222,6 +222,24 @@ export function describeAxis(axis) {
  * `align` is how its lines range against each other once it is there.
  */
 export const TEXT_KEYS = ['color', 'size', 'wrap', 'align', 'at'];
+/**
+ * What an edge's line takes in its bracket: `line: (path: square, pattern:
+ * dashed)`. The line is a part in the sense the text is, so every property of
+ * it goes in one bracket, as the text's do. `line: red` stays as the short form
+ * of `line: (color: red)`, and both are stored under the bare `line` key.
+ */
+export const LINE_KEYS = ['color', 'path', 'corners', 'crossing', 'pattern', 'thickness'];
+/**
+ * The words each of the line's properties takes, the default first. Thickness
+ * takes a plain number of pixels as well.
+ */
+export const LINE_VALUES = {
+    path: ['curved', 'square', 'straight'],
+    corners: ['sharp', 'rounded'],
+    crossing: ['none', 'arc', 'gap', 'square'],
+    pattern: ['solid', 'dashed', 'dotted', 'dash-dot'],
+    thickness: ['normal', 'thin', 'thick'],
+};
 /**
  * The attributes a `diagram` statement understands. `text` takes a bracket,
  * `text: (color: …)`, and sets the text color of everything at once — the

package/dist/constants.d.ts

@@ -50,6 +50,15 @@ export declare const ARROW_MARKER_WIDTH = 7;
  * agreed by coincidence is a number that drifts.
  */
 export declare const ARROW_LENGTH: number;
+/** What `thickness: thin | normal | thick` draw, in pixels. `normal` is the line as it always was. */
+export declare const THICKNESS: Record<string, number>;
+/**
+ * How much of a line of this thickness its arrowhead covers. The marker scales
+ * with the stroke, so a thick line gets a bigger head, and the room an edge's
+ * text makes for itself counts the head it will actually be drawn with — a
+ * thickness is a size, like a text's, and a size is allowed to take room.
+ */
+export declare function arrowLength(thickness: number): number;
 /**
  * Line left showing between an edge's text and the box at that end of the
  * corridor it crosses.

package/dist/constants.js

@@ -56,6 +56,21 @@ export const ARROW_MARKER_WIDTH = 7;
  * agreed by coincidence is a number that drifts.
  */
 export const ARROW_LENGTH = ARROW_MARKER_WIDTH * LINE_WIDTH;
+/** What `thickness: thin | normal | thick` draw, in pixels. `normal` is the line as it always was. */
+export const THICKNESS = {
+    thin: 1,
+    normal: LINE_WIDTH,
+    thick: LINE_WIDTH * 2,
+};
+/**
+ * How much of a line of this thickness its arrowhead covers. The marker scales
+ * with the stroke, so a thick line gets a bigger head, and the room an edge's
+ * text makes for itself counts the head it will actually be drawn with — a
+ * thickness is a size, like a text's, and a size is allowed to take room.
+ */
+export function arrowLength(thickness) {
+    return ARROW_MARKER_WIDTH * thickness;
+}
 /**
  * Line left showing between an edge's text and the box at that end of the
  * corridor it crosses.

package/dist/model.d.ts

@@ -129,10 +129,24 @@ export interface LayoutEdge {
     between?: LayoutPassage;
     /** Which side of which nodes the line passes. Measured in the renderer, like `between`. */
     passes?: LayoutPass[];
+    /** What the line's bracket says, checked and with every default filled in. */
+    look: LineLook;
     attrs: Attrs;
     appearance: Attrs;
     line: number;
 }
+/**
+ * How an edge's line is drawn: `line: (path: square, corners: rounded, …)`.
+ * Only `thickness` takes room; the rest is appearance and moves nothing.
+ */
+export interface LineLook {
+    path: 'curved' | 'square' | 'straight';
+    corners: 'sharp' | 'rounded';
+    crossing: 'none' | 'arc' | 'gap' | 'square';
+    pattern: 'solid' | 'dashed' | 'dotted' | 'dash-dot';
+    /** In pixels. */
+    thickness: number;
+}
 export interface Layout {
     /** Every node, containers and children alike, in declaration order. */
     nodes: LayoutNode[];

package/dist/parser.js

@@ -1,4 +1,4 @@
-import { COLOR_KEYS, DEFAULT_KEYS, DEFAULT_TARGETS, DIAGRAM_KEYS, DIRECTIONS, describePlacement, SIDE_AXIS, SIDES, PASSAGE_AXES, TEXT_KEYS, CONTENTS_KEYS, PLACEMENT_KEYS, BOUNDARY_PARTS, INWARD, OPPOSITE, isDirection, isPart, isPosition, listTargets, nameTarget, } from './ast.js';
+import { COLOR_KEYS, DEFAULT_KEYS, DEFAULT_TARGETS, DIAGRAM_KEYS, DIRECTIONS, describePlacement, SIDE_AXIS, SIDES, PASSAGE_AXES, TEXT_KEYS, LINE_KEYS, LINE_VALUES, CONTENTS_KEYS, PLACEMENT_KEYS, BOUNDARY_PARTS, INWARD, OPPOSITE, isDirection, isPart, isPosition, listTargets, nameTarget, } from './ast.js';
 import { SourceError } from './errors.js';
 import { isAttrKey, tokenizeLine } from './lexer.js';
 import { THEME_NAMES, THEMES } from './themes.js';
@@ -138,12 +138,25 @@ function parseTail(tokens, start, line, subject, other) {
 const BRACKET_KEYS = {
     text: TEXT_KEYS,
     contents: CONTENTS_KEYS,
+    line: LINE_KEYS,
 };
 /** How each bracketed key's error quotes itself back, and what it is about. */
 const BRACKET_ABOUT = {
     text: { kind: 'a text', example: 'color: muted' },
     contents: { kind: 'a `contents:` bracket', example: 'widths: match' },
+    line: { kind: 'a line', example: 'path: square' },
 };
+/**
+ * Which of the line's properties a word belongs to, so that `line: square` —
+ * the color key given a shape — can be pointed at the bracket.
+ */
+function linePropertyOf(word) {
+    for (const [property, words] of Object.entries(LINE_VALUES)) {
+        if (words.includes(word) && word !== 'normal')
+            return property;
+    }
+    return undefined;
+}
 /**
  * The top-level keys that moved into the text's bracket in 0.3.0, and the
  * substitution each one gets. They are properties of a node's *text* and never
@@ -186,7 +199,11 @@ function readAttr(tokens, at, attrs, line, subject) {
         // Two brackets for one part are fine as long as they say different things;
         // the same property in both is the same defect as `fill:` written twice.
         for (const [inner, value] of Object.entries(read.values)) {
-            setOnce(attrs, `${key}.${inner}`, value, subject, line, { key: `${key}: (${inner}: …)`, value: (v) => v });
+            // A line's color is stored where `line: red` puts it, so the short form
+            // and the bracket are one key: a style's `line: red` merges under an
+            // edge's `line: (color: blue)`, and writing both on one line is a repeat.
+            const stored = key === 'line' && inner === 'color' ? 'line' : `${key}.${inner}`;
+            setOnce(attrs, stored, value, subject, line, { key: `${key}: (${inner}: …)`, value: (v) => v });
         }
         return read.next;
     }
@@ -251,7 +268,7 @@ function readAttr(tokens, at, attrs, line, subject) {
         });
         return next;
     }
-    if (bracketKeys !== undefined && key !== 'text') {
+    if (bracketKeys !== undefined && key !== 'text' && key !== 'line') {
         // `contents: match` names the part and then says one of its two properties
         // without saying which. The brackets are what make the level shift visible,
         // so there is no unbracketed spelling to fall back to.
@@ -292,6 +309,15 @@ function readAttr(tokens, at, attrs, line, subject) {
             ? `\`text:\` is how a style says something about text, not how anything sets it — write the words in quotes after the name, as in \`node name ${quoteOf(valueToken.text)}\``
             : `\`text:\` takes the text's properties in brackets — write \`text: (color: ${valueToken.text})\` in a style, and \`(color: ${valueToken.text})\` in the brackets after a node's or an edge's own text`, line);
     }
+    if (key === 'line' && !valueToken.quoted) {
+        // `line: red` is the short form of the color, and the only one: every other
+        // property of the line needs the bracket to say which it is.
+        const property = linePropertyOf(valueToken.text) ?? (/^\d/.test(valueToken.text) ? 'thickness' : undefined);
+        if (property !== undefined) {
+            throw new SourceError(`\`line: ${valueToken.text}\` — \`line:\` on its own takes a color. The line's other properties go in its bracket: ` +
+                `\`line: (${property}: ${valueToken.text})\``, line);
+        }
+    }
     if (key === 'align' && valueToken.text === 'widths') {
         // Removed in 0.3.0. It was a size operation wearing an alignment's name,
         // and its value set had one member — a flag in a property's clothes. Its

package/dist/render.js

@@ -1,4 +1,4 @@
-import { ARROW_LENGTH, ARROW_MARKER_WIDTH, ATTACH_MARGIN, ATTACH_STEP, DECK_STEP, DEFAULT_FONT_SIZE, ICON_LINES, LINE_WIDTH, PAD, SEPARATION_GAP, fontSizeFor, textExtent, textStyleFor, widestLine, } from './constants.js';
+import { ARROW_LENGTH, ARROW_MARKER_WIDTH, ATTACH_MARGIN, ATTACH_STEP, DECK_STEP, DEFAULT_FONT_SIZE, ICON_LINES, PAD, SEPARATION_GAP, arrowLength, fontSizeFor, textExtent, textStyleFor, widestLine, } from './constants.js';
 import { describeAxis } from './ast.js';
 import { SourceError } from './errors.js';
 import { ICON_STROKE } from './icons.js';
@@ -37,10 +37,31 @@ export function render(layout, options = {}) {
     const routes = planRoutes(layout.edges, layout.nodes, ends, measurer, fontSize);
     planLoops(layout.edges, layout.nodes, ends, corridors, routes, measurer, fontSize);
     aimFreeEnds(layout.edges, ends, corridors);
-    for (const edge of layout.edges) {
-        const drawn = drawEdge(edge, ends.get(edge), corridors.get(edge), routes.get(edge), theme, measurer, fontSize, layout.markup);
-        body.push(drawn.svg);
-        ink = union(ink, grow(drawn.ink, layout.margin));
+    const drawn = layout.edges.map((edge) => drawEdge(edge, ends.get(edge), corridors.get(edge), routes.get(edge), layout.nodes, theme, measurer, fontSize, layout.markup));
+    // A line with a `crossing:` style is cut where it crosses an earlier one, and
+    // the jump drawn over the cut. The cut is a mask rather than a break in the
+    // path, so it works the same on a curve as on a corner, and leaves whatever
+    // lies underneath — a container's fill — showing through the gap.
+    const crossings = findCrossings(drawn);
+    const masks = [];
+    for (const edge of drawn) {
+        const found = crossings.get(edge);
+        const parts = [edge.line, ...edge.rest];
+        if (found) {
+            const id = `cut-${masks.length + 1}`;
+            masks.push({ id, holes: found });
+            parts[0] = edge.line.replace(/\/>$/, ` mask="url(#${id})"/>`);
+            const jumps = found
+                .map((crossing) => jumpAt(crossing, edge.edge.look.crossing))
+                .filter((d) => d !== undefined)
+                .map((d) => `  <path d="${d}" fill="none"${edge.stroke}/>`);
+            parts.splice(1, 0, ...jumps);
+            for (const crossing of found) {
+                edge.ink = union(edge.ink, grow(extentOfPoints([crossing.at]), crossing.reach + edge.edge.look.thickness));
+            }
+        }
+        body.push(linked(parts.join('\n'), edge.edge.attrs['url']));
+        ink = union(ink, grow(edge.ink, layout.margin));
     }
     // An edge's geometry is measured rather than solved for, so the resolver sized
     // the canvas from the boxes alone. A curve out of a `top` side, or a text
@@ -57,6 +78,15 @@ export function render(layout, options = {}) {
         `<svg xmlns="http://www.w3.org/2000/svg" width="${canvas.width}" height="${canvas.height}" viewBox="${canvas.x} ${canvas.y} ${canvas.width} ${canvas.height}" font-family=${quote(measurer.fontFamily)} font-size="${fontSize}px">`,
         '  <defs>',
         ...[...arrowColors].map((color) => arrowMarker(color)),
+        // Each mask covers the whole page, in page units: the default region is the
+        // line's own bounding box, which a straight level line gives no height, and
+        // the line would vanish entirely.
+        ...masks.map(({ id, holes }) => [
+            `    <mask id="${id}" maskUnits="userSpaceOnUse" x="${canvas.x}" y="${canvas.y}" width="${canvas.width}" height="${canvas.height}">`,
+            `      <rect x="${canvas.x}" y="${canvas.y}" width="${canvas.width}" height="${canvas.height}" fill="white"/>`,
+            ...holes.map((hole) => `      <circle cx="${round(hole.at.x)}" cy="${round(hole.at.y)}" r="${round(hole.reach)}" fill="black"/>`),
+            '    </mask>',
+        ].join('\n')),
         '  </defs>',
         `  <rect x="${canvas.x}" y="${canvas.y}" width="${canvas.width}" height="${canvas.height}" fill="${theme.background}"/>`,
         ...body,
@@ -254,16 +284,17 @@ function drawIcon(icon, x, y, side, theme) {
         '  </g>',
     ].join('\n');
 }
-// --- edges -------------------------------------------------------------------
-function drawEdge(edge, ends, corridor, route, theme, measurer, fontSize, markup) {
+function drawEdge(edge, ends, corridor, route, nodes, theme, measurer, fontSize, markup) {
     const { start, end } = ends;
     const color = lineOf(edge.appearance, theme.edge);
+    const stroke = strokeOf(color, edge.look);
     const markerEnd = ` marker-end="url(#${markerId(color)})"`;
     const markerStart = edge.both ? ` marker-start="url(#${markerId(color)}-back)"` : '';
     // A named side is a statement about how the line should leave or arrive, so
     // it is drawn as a curve that actually does leave and arrive that way. With
     // neither side named there is nothing to honor and the line stays straight.
     const curved = start.side !== undefined || end.side !== undefined;
+    const bowed = ends.bow !== undefined && (ends.bow.x !== 0 || ends.bow.y !== 0);
     const parts = [];
     // What the line actually covers, so the canvas can be sized to hold it. A
     // curve leaving a `top` side rides above every box in the drawing, and the
@@ -271,8 +302,25 @@ function drawEdge(edge, ends, corridor, route, theme, measurer, fontSize, markup
     let ink = extentOfPoints([start, end]);
     let midX;
     let midY;
-    if (route) {
-        parts.push(`  <path d="${roundedPath(route.points)}" fill="none" stroke="${color}" stroke-width="${LINE_WIDTH}"${markerEnd}${markerStart}/>`);
+    const jointed = edge.look.path !== 'curved' && (route || corridor || curved || bowed);
+    if (jointed) {
+        // `path: square` and `path: straight` are the same fixed points — the ends,
+        // which way each faces, the run a clause asked for — joined by a different
+        // rule, and both come out as straight pieces meeting at corners.
+        const textWidth = edge.lines === undefined
+            ? 0
+            : widestLine(edge.lines, measurer, fontSizeFor('edge', edge.textAttrs, fontSize, edge.line));
+        const plan = jointedLine(edge, ends, corridor, route, nodes, textWidth);
+        const d = edge.look.corners === 'rounded'
+            ? roundedPath(plan.points, arrowLength(edge.look.thickness))
+            : sharpPath(plan.points);
+        parts.push(`  <path d="${d}" fill="none"${stroke}${markerEnd}${markerStart}/>`);
+        ink = union(ink, extentOfPoints(plan.points));
+        midX = plan.mid.x;
+        midY = plan.mid.y;
+    }
+    else if (route) {
+        parts.push(`  <path d="${roundedPath(route.points)}" fill="none"${stroke}${markerEnd}${markerStart}/>`);
         ink = union(ink, extentOfPoints(route.points));
         midX = route.mid.x;
         midY = route.mid.y;
@@ -280,7 +328,7 @@ function drawEdge(edge, ends, corridor, route, theme, measurer, fontSize, markup
     else if (corridor) {
         const path = corridorPath(start, end, corridor);
         ink = union(ink, path.ink);
-        parts.push(`  <path d="${path.d}" fill="none" stroke="${color}" stroke-width="${LINE_WIDTH}"${markerEnd}${markerStart}/>`);
+        parts.push(`  <path d="${path.d}" fill="none"${stroke}${markerEnd}${markerStart}/>`);
         // The text goes on the straight run rather than at the midpoint of the
         // whole path, so it sits in the gap the author asked the line to travel.
         midX = path.mid.x;
@@ -297,13 +345,13 @@ function drawEdge(edge, ends, corridor, route, theme, measurer, fontSize, markup
         const by = (ends.bow?.y ?? 0) * lift;
         const c1 = { x: start.x + start.tx * reach + bx, y: start.y + start.ty * reach + by };
         const c2 = { x: end.x + end.tx * reach + bx, y: end.y + end.ty * reach + by };
-        parts.push(`  <path d="M ${round(start.x)} ${round(start.y)} C ${round(c1.x)} ${round(c1.y)}, ${round(c2.x)} ${round(c2.y)}, ${round(end.x)} ${round(end.y)}" fill="none" stroke="${color}" stroke-width="${LINE_WIDTH}"${markerEnd}${markerStart}/>`);
+        parts.push(`  <path d="M ${round(start.x)} ${round(start.y)} C ${round(c1.x)} ${round(c1.y)}, ${round(c2.x)} ${round(c2.y)}, ${round(end.x)} ${round(end.y)}" fill="none"${stroke}${markerEnd}${markerStart}/>`);
         ink = union(ink, cubicExtent(start, c1, c2, end));
         // The point halfway along a cubic, which is where the text belongs.
         midX = (start.x + 3 * c1.x + 3 * c2.x + end.x) / 8;
         midY = (start.y + 3 * c1.y + 3 * c2.y + end.y) / 8;
     }
-    else if (ends.bow && (ends.bow.x !== 0 || ends.bow.y !== 0)) {
+    else if (ends.bow && bowed) {
         // A straight line that could not get the room it needed at its ends, so it
         // takes it in the middle. Both control points carry the same displacement,
         // which keeps the arc symmetric; a cubic's middle moves three quarters of
@@ -318,13 +366,13 @@ function drawEdge(edge, ends, corridor, route, theme, measurer, fontSize, markup
             x: end.x - run.x + ends.bow.x * lift,
             y: end.y - run.y + ends.bow.y * lift,
         };
-        parts.push(`  <path d="M ${round(start.x)} ${round(start.y)} C ${round(c1.x)} ${round(c1.y)}, ${round(c2.x)} ${round(c2.y)}, ${round(end.x)} ${round(end.y)}" fill="none" stroke="${color}" stroke-width="${LINE_WIDTH}"${markerEnd}${markerStart}/>`);
+        parts.push(`  <path d="M ${round(start.x)} ${round(start.y)} C ${round(c1.x)} ${round(c1.y)}, ${round(c2.x)} ${round(c2.y)}, ${round(end.x)} ${round(end.y)}" fill="none"${stroke}${markerEnd}${markerStart}/>`);
         ink = union(ink, cubicExtent(start, c1, c2, end));
         midX = (start.x + 3 * c1.x + 3 * c2.x + end.x) / 8;
         midY = (start.y + 3 * c1.y + 3 * c2.y + end.y) / 8;
     }
     else {
-        parts.push(`  <line x1="${round(start.x)}" y1="${round(start.y)}" x2="${round(end.x)}" y2="${round(end.y)}" stroke="${color}" stroke-width="${LINE_WIDTH}"${markerEnd}${markerStart}/>`);
+        parts.push(`  <line x1="${round(start.x)}" y1="${round(start.y)}" x2="${round(end.x)}" y2="${round(end.y)}"${stroke}${markerEnd}${markerStart}/>`);
         midX = (start.x + end.x) / 2;
         midY = (start.y + end.y) / 2;
     }
@@ -357,7 +405,428 @@ function drawEdge(edge, ends, corridor, route, theme, measurer, fontSize, markup
         }), size, fontSize));
     }
     // The stroke straddles the path, so half of it lies outside the geometry.
-    return { svg: linked(parts.join('\n'), edge.attrs['url']), ink: grow(ink, LINE_WIDTH / 2) };
+    const [line, ...rest] = parts;
+    return {
+        edge,
+        line: line,
+        rest,
+        ink: grow(ink, edge.look.thickness / 2),
+        trace: traceOf(line),
+        color,
+        stroke,
+    };
+}
+/**
+ * The stroke of a line: its color, its thickness and its pattern. The dashes
+ * are measured in thicknesses, so a pattern keeps its proportions on a thick
+ * line, which covers most of what a density setting would be for. A solid line
+ * of the ordinary thickness writes exactly what every line always did.
+ */
+function strokeOf(color, look) {
+    const w = look.thickness;
+    const dashes = {
+        solid: '',
+        dashed: ` stroke-dasharray="${round(w * 4)} ${round(w * 3)}"`,
+        // A zero-length dash with a round cap is a dot as wide as the line.
+        dotted: ` stroke-dasharray="0 ${round(w * 3)}" stroke-linecap="round"`,
+        'dash-dot': ` stroke-dasharray="${round(w * 5)} ${round(w * 3)} 0 ${round(w * 3)}" stroke-linecap="round"`,
+    };
+    return ` stroke="${color}" stroke-width="${w}"${dashes[look.pattern]}`;
+}
+/**
+ * The points of a square or straight line, and where its text sits.
+ *
+ * Both start from what the file fixed. A square line leaves each side head-on
+ * and turns only at right angles; a straight one goes directly from point to
+ * point, and bends only where a clause — `below c`, `between a and b` — puts a
+ * point it has to pass through.
+ */
+function jointedLine(edge, ends, corridor, route, nodes, textWidth) {
+    const { start, end } = ends;
+    const square = edge.look.path === 'square';
+    const stub = ROUTE_RADIUS + arrowLength(edge.look.thickness);
+    const fromFace = faceOf(edge.from);
+    const toFace = faceOf(edge.to);
+    if (route) {
+        if (square)
+            return { points: route.points, mid: route.mid };
+        if (textWidth === 0) {
+            const points = straighten(route.points, edge, nodes);
+            return { points, mid: textSpot(points, textWidth) };
+        }
+        // The route pushed its run out far enough to hold the text clear of the
+        // boxes it passes, and that room is only on the run. So a straight line
+        // with a text keeps the text's point and straightens either side of it;
+        // cutting across the run would put the text back against the box.
+        const [before, after] = splitAt(route.points, route.mid);
+        const points = tidyRoute([
+            ...straighten(before, edge, nodes),
+            ...straighten(after, edge, nodes).slice(1),
+        ]);
+        return { points, mid: route.mid };
+    }
+    if (corridor) {
+        const p1 = corridorPoint(corridor, corridor.enter);
+        const p2 = corridorPoint(corridor, corridor.leave);
+        const mid = { x: (p1.x + p2.x) / 2, y: (p1.y + p2.y) / 2 };
+        if (!square)
+            return { points: tidyRoute([start, p1, p2, end]), mid };
+        const forward = corridor.leave >= corridor.enter ? 1 : -1;
+        const run = corridor.axis === 'y' ? { x: forward, y: 0 } : { x: 0, y: forward };
+        const points = tidyRoute([
+            ...rightAngles(start, headingOf(start, fromFace), p1, { x: -run.x, y: -run.y }, stub),
+            ...rightAngles(p2, run, end, headingOf(end, toFace), stub),
+        ]);
+        return { points, mid };
+    }
+    const bow = ends.bow ?? { x: 0, y: 0 };
+    const bowed = bow.x !== 0 || bow.y !== 0;
+    if (!square) {
+        // A bowed line is one of a crowded group, and its middle is the only room
+        // left for its text, so it bends there.
+        const middle = { x: (start.x + end.x) / 2 + bow.x, y: (start.y + end.y) / 2 + bow.y };
+        const points = bowed ? [start, middle, end] : [start, end];
+        return { points, mid: bowed ? middle : textSpot(points, textWidth) };
+    }
+    const out = headingOf(start, fromFace);
+    const back = headingOf(end, toFace);
+    // A bow is room for the texts of a crowded group, taken in the middle. Between
+    // sides that face each other that middle is a run the lanes can widen along;
+    // at right angles there is none, and the text finds room on a level piece.
+    if (!bowed || (out.x !== 0) !== (back.x !== 0)) {
+        const points = tidyRoute(rightAngles(start, out, end, back, stub));
+        return { points, mid: textSpot(points, textWidth) };
+    }
+    // Out of each side, across by the bow, and joined at right angles.
+    const a = { x: start.x + out.x * stub, y: start.y + out.y * stub };
+    const b = { x: end.x + back.x * stub, y: end.y + back.y * stub };
+    const points = tidyRoute(squareUp([start, a, { x: a.x + bow.x, y: a.y + bow.y }, { x: b.x + bow.x, y: b.y + bow.y }, b, end]));
+    return { points, mid: textSpot(points, textWidth) };
+}
+/**
+ * Which way an end points, as one of the four directions. A named side says so;
+ * an end the renderer placed is on some side of its box, and that is the one.
+ */
+function headingOf(anchor, face) {
+    if (anchor.side !== undefined)
+        return { x: anchor.tx, y: anchor.ty };
+    const candidates = [
+        [Math.abs(anchor.x - face.x), { x: -1, y: 0 }],
+        [Math.abs(anchor.x - (face.x + face.width)), { x: 1, y: 0 }],
+        [Math.abs(anchor.y - face.y), { x: 0, y: -1 }],
+        [Math.abs(anchor.y - (face.y + face.height)), { x: 0, y: 1 }],
+    ];
+    candidates.sort((p, q) => p[0] - q[0]);
+    return candidates[0][1];
+}
+/**
+ * A right-angled line from `from`, leaving along `out`, to `to`, arriving
+ * against `back` — `back` points out of the far side, so the line's last piece
+ * travels the opposite way. The fewest turns that leave and arrive head-on:
+ * none when the two face each other in line, one when they are at right angles
+ * and the corner lies ahead of both, two in the middle when they face each
+ * other offset, and a way round past a stub at each end otherwise.
+ */
+function rightAngles(from, out, to, back, stub) {
+    const across = out.x !== 0;
+    const parallel = across === (back.x !== 0);
+    const ahead = (p, q, d) => (q.x - p.x) * d.x + (q.y - p.y) * d.y;
+    if (parallel) {
+        const facing = out.x * back.x + out.y * back.y < 0;
+        if (facing && ahead(from, to, out) > 0) {
+            if (Math.abs(across ? to.y - from.y : to.x - from.x) < 0.5)
+                return [from, to];
+            const m = across ? (from.x + to.x) / 2 : (from.y + to.y) / 2;
+            return across
+                ? [from, { x: m, y: from.y }, { x: m, y: to.y }, to]
+                : [from, { x: from.x, y: m }, { x: to.x, y: m }, to];
+        }
+        if (!facing) {
+            // Both sides face the same way: out past whichever is further, and back.
+            const far = across
+                ? (out.x > 0 ? Math.max(from.x, to.x) : Math.min(from.x, to.x)) + out.x * stub
+                : (out.y > 0 ? Math.max(from.y, to.y) : Math.min(from.y, to.y)) + out.y * stub;
+            return across
+                ? [from, { x: far, y: from.y }, { x: far, y: to.y }, to]
+                : [from, { x: from.x, y: far }, { x: to.x, y: far }, to];
+        }
+        // Facing, but the far end is behind: out, across the middle, and in.
+        const a = { x: from.x + out.x * stub, y: from.y + out.y * stub };
+        const b = { x: to.x + back.x * stub, y: to.y + back.y * stub };
+        const m = across ? (from.y + to.y) / 2 : (from.x + to.x) / 2;
+        return across
+            ? [from, a, { x: a.x, y: m }, { x: b.x, y: m }, b, to]
+            : [from, a, { x: m, y: a.y }, { x: m, y: b.y }, b, to];
+    }
+    const corner = across ? { x: to.x, y: from.y } : { x: from.x, y: to.y };
+    if (ahead(from, corner, out) > 0 && ahead(to, corner, back) > 0)
+        return [from, corner, to];
+    // The one corner lies behind an end: step out of both sides first and join
+    // the two stubs with whichever corner does not double back.
+    const a = { x: from.x + out.x * stub, y: from.y + out.y * stub };
+    const b = { x: to.x + back.x * stub, y: to.y + back.y * stub };
+    const options = [
+        { x: b.x, y: a.y },
+        { x: a.x, y: b.y },
+    ];
+    const turn = options.find((c) => ahead(a, c, out) >= 0 && ahead(b, c, back) >= 0) ?? options[across ? 1 : 0];
+    return [from, a, turn, b, to];
+}
+/** Put a right-angled corner between any two points that are not in line. */
+function squareUp(points) {
+    const out = [points[0]];
+    let alongX = true;
+    for (let index = 1; index < points.length; index += 1) {
+        const a = out[out.length - 1];
+        const b = points[index];
+        const dx = Math.abs(b.x - a.x) >= 0.5;
+        const dy = Math.abs(b.y - a.y) >= 0.5;
+        if (dx && dy) {
+            out.push(alongX ? { x: b.x, y: a.y } : { x: a.x, y: b.y });
+        }
+        else if (dx || dy) {
+            alongX = dx;
+        }
+        out.push(b);
+    }
+    return out;
+}
+/**
+ * A route's points with every corner dropped that a straight piece can skip.
+ * The route already keeps each clause; a straight piece may cut a corner only
+ * where it stays clear of every box the route kept clear of, which keeps the
+ * clauses too — a piece between two points below a node, touching nothing, is
+ * below it all the way.
+ */
+function straighten(points, edge, nodes) {
+    const own = [faceOf(edge.from), faceOf(edge.to)].map((box) => grow(extentOfBox(box), -1));
+    const others = nodes
+        .filter((node) => !contains(node, edge.from) && !contains(node, edge.to))
+        .map((node) => grow(extentOfBox(faceOf(node)), ATTACH_MARGIN / 2));
+    const clear = (a, b) => ![...own, ...others].some((box) => segmentHits(a, b, box));
+    const kept = [points[0]];
+    let at = 0;
+    while (at < points.length - 1) {
+        let next = at + 1;
+        for (let far = points.length - 1; far > at + 1; far -= 1) {
+            if (clear(points[at], points[far])) {
+                next = far;
+                break;
+            }
+        }
+        kept.push(points[next]);
+        at = next;
+    }
+    return kept;
+}
+/**
+ * A line cut in two at `at`, a point on one of its pieces, each half keeping
+ * `at` as its end. A point on no piece cuts at the nearest one.
+ */
+function splitAt(points, at) {
+    let piece = 0;
+    let nearest = Infinity;
+    for (let index = 1; index < points.length; index += 1) {
+        const a = points[index - 1];
+        const b = points[index];
+        const length = Math.hypot(b.x - a.x, b.y - a.y);
+        const t = length === 0 ? 0 : Math.max(0, Math.min(1, ((at.x - a.x) * (b.x - a.x) + (at.y - a.y) * (b.y - a.y)) / (length * length)));
+        const off = Math.hypot(a.x + t * (b.x - a.x) - at.x, a.y + t * (b.y - a.y) - at.y);
+        if (off < nearest) {
+            nearest = off;
+            piece = index;
+        }
+    }
+    return [
+        tidyRoute([...points.slice(0, piece), at]),
+        tidyRoute([at, ...points.slice(piece)]),
+    ];
+}
+function extentOfBox(box) {
+    return { minX: box.x, minY: box.y, maxX: box.x + box.width, maxY: box.y + box.height };
+}
+/** Whether the segment from `a` to `b` passes through the inside of `box`. */
+function segmentHits(a, b, box) {
+    if (box.maxX <= box.minX || box.maxY <= box.minY)
+        return false;
+    let t0 = 0;
+    let t1 = 1;
+    const dx = b.x - a.x;
+    const dy = b.y - a.y;
+    const edges = [
+        [-dx, a.x - box.minX],
+        [dx, box.maxX - a.x],
+        [-dy, a.y - box.minY],
+        [dy, box.maxY - a.y],
+    ];
+    for (const [p, q] of edges) {
+        if (p === 0) {
+            if (q <= 0)
+                return false;
+            continue;
+        }
+        const t = q / p;
+        if (p < 0)
+            t0 = Math.max(t0, t);
+        else
+            t1 = Math.min(t1, t);
+        if (t0 >= t1)
+            return false;
+    }
+    return true;
+}
+/**
+ * Where a jointed line's text rides: the middle of its longest level piece, if
+ * one is long enough to hold the text with line showing either side, and the
+ * middle of its longest piece otherwise. A level piece comes first because a
+ * text knocks a hole as wide as itself, which on an upright piece is a hole far
+ * wider than the line — and lines grouped on one side sit a text's height apart
+ * on their level pieces, never a text's width apart on their upright ones.
+ */
+function textSpot(points, textWidth) {
+    let best = { x: (points[0].x + points[points.length - 1].x) / 2, y: (points[0].y + points[points.length - 1].y) / 2 };
+    let level;
+    let longest = -1;
+    let longestLevel = -1;
+    for (let index = 1; index < points.length; index += 1) {
+        const a = points[index - 1];
+        const b = points[index];
+        const here = Math.hypot(b.x - a.x, b.y - a.y);
+        const middle = { x: (a.x + b.x) / 2, y: (a.y + b.y) / 2 };
+        if (here > longest + 0.5) {
+            longest = here;
+            best = middle;
+        }
+        if (Math.abs(b.y - a.y) < 0.5 && here >= textWidth + ARROW_LENGTH * 2 && here > longestLevel + 0.5) {
+            longestLevel = here;
+            level = middle;
+        }
+    }
+    return level ?? best;
+}
+function sharpPath(points) {
+    return points.map((point, index) => `${index === 0 ? 'M' : 'L'} ${round(point.x)} ${round(point.y)}`).join(' ');
+}
+/**
+ * A drawn line's element read back as a polyline, curves flattened. Reading
+ * the element rather than each drawing branch keeping its own record means the
+ * crossings are found on exactly what was drawn.
+ */
+function traceOf(element) {
+    const line = /<line x1="([-\d.]+)" y1="([-\d.]+)" x2="([-\d.]+)" y2="([-\d.]+)"/.exec(element);
+    if (line) {
+        return [
+            { x: Number(line[1]), y: Number(line[2]) },
+            { x: Number(line[3]), y: Number(line[4]) },
+        ];
+    }
+    const d = /d="([^"]*)"/.exec(element)?.[1] ?? '';
+    const tokens = d.match(/[MLC]|-?\d+(?:\.\d+)?(?:e-?\d+)?/g) ?? [];
+    const points = [];
+    let command = 'M';
+    for (let index = 0; index < tokens.length;) {
+        const token = tokens[index];
+        if (/[MLC]/.test(token)) {
+            command = token;
+            index += 1;
+            continue;
+        }
+        const read = () => {
+            const point = { x: Number(tokens[index]), y: Number(tokens[index + 1]) };
+            index += 2;
+            return point;
+        };
+        if (command === 'C') {
+            const from = points[points.length - 1];
+            const [c1, c2, to] = [read(), read(), read()];
+            for (let step = 1; step <= 12; step += 1) {
+                const t = step / 12;
+                const u = 1 - t;
+                points.push({
+                    x: u * u * u * from.x + 3 * u * u * t * c1.x + 3 * u * t * t * c2.x + t * t * t * to.x,
+                    y: u * u * u * from.y + 3 * u * u * t * c1.y + 3 * u * t * t * c2.y + t * t * t * to.y,
+                });
+            }
+        }
+        else {
+            points.push(read());
+        }
+    }
+    return points;
+}
+/**
+ * Where each line with a `crossing:` style crosses a line declared before it.
+ * The later line is the one that jumps, so the file's order says who goes over,
+ * and a line never jumps where it leaves or arrives — a crossing that close to
+ * an end is two lines meeting at a box, not passing each other.
+ */
+function findCrossings(drawn) {
+    const found = new Map();
+    drawn.forEach((later, index) => {
+        if (later.edge.look.crossing === 'none')
+            return;
+        const crossings = [];
+        for (const earlier of drawn.slice(0, index)) {
+            const reach = 3 + later.edge.look.thickness * 1.5 + earlier.edge.look.thickness / 2;
+            const clear = reach + arrowLength(later.edge.look.thickness);
+            const ends = [later.trace[0], later.trace[later.trace.length - 1], earlier.trace[0], earlier.trace[earlier.trace.length - 1]];
+            for (let i = 1; i < later.trace.length; i += 1) {
+                const a = later.trace[i - 1];
+                const b = later.trace[i];
+                for (let j = 1; j < earlier.trace.length; j += 1) {
+                    const at = intersect(a, b, earlier.trace[j - 1], earlier.trace[j]);
+                    if (!at)
+                        continue;
+                    if (ends.some((end) => Math.hypot(end.x - at.x, end.y - at.y) < clear))
+                        continue;
+                    if (crossings.some((c) => Math.hypot(c.at.x - at.x, c.at.y - at.y) < (c.reach + reach) * 1.2))
+                        continue;
+                    const length = Math.hypot(b.x - a.x, b.y - a.y) || 1;
+                    crossings.push({ at, along: { x: (b.x - a.x) / length, y: (b.y - a.y) / length }, reach });
+                }
+            }
+        }
+        if (crossings.length > 0)
+            found.set(later, crossings);
+    });
+    return found;
+}
+/** Where two segments cross, if they do. Lines that only touch or run together do not. */
+function intersect(a, b, c, d) {
+    const r = { x: b.x - a.x, y: b.y - a.y };
+    const s = { x: d.x - c.x, y: d.y - c.y };
+    const denominator = r.x * s.y - r.y * s.x;
+    if (Math.abs(denominator) < 1e-9)
+        return undefined;
+    const t = ((c.x - a.x) * s.y - (c.y - a.y) * s.x) / denominator;
+    const u = ((c.x - a.x) * r.y - (c.y - a.y) * r.x) / denominator;
+    if (t <= 0 || t >= 1 || u <= 0 || u >= 1)
+        return undefined;
+    return { x: a.x + r.x * t, y: a.y + r.y * t };
+}
+/**
+ * The jump drawn over one crossing: a half circle for `arc`, three sides of a
+ * square for `square`, and nothing for `gap`, which is the cut alone. A jump
+ * rises to the same side everywhere — up, or right on a line going straight up
+ * or down — so a row of them reads as one line hopping.
+ */
+function jumpAt(crossing, style) {
+    const { at, along, reach } = crossing;
+    let normal = { x: along.y, y: -along.x };
+    if (normal.y > 1e-6 || (Math.abs(normal.y) <= 1e-6 && normal.x < 0))
+        normal = { x: -normal.x, y: -normal.y };
+    const a = { x: at.x - along.x * reach, y: at.y - along.y * reach };
+    const b = { x: at.x + along.x * reach, y: at.y + along.y * reach };
+    if (style === 'arc') {
+        // Which way round the arc sweeps depends on which side of the line is up.
+        const sweep = along.x * normal.y - along.y * normal.x < 0 ? 1 : 0;
+        return `M ${round(a.x)} ${round(a.y)} A ${round(reach)} ${round(reach)} 0 0 ${sweep} ${round(b.x)} ${round(b.y)}`;
+    }
+    if (style === 'square') {
+        const up = (p) => ({ x: p.x + normal.x * reach, y: p.y + normal.y * reach });
+        return sharpPath([a, up(a), up(b), b]);
+    }
+    return undefined;
 }
 function union(a, b) {
     return {
@@ -1746,14 +2215,14 @@ function tidyRoute(points) {
  * piece at either end short of the arrowhead, so two corners never overlap and
  * the head always lands on a straight piece.
  */
-function roundedPath(points) {
+function roundedPath(points, arrow = ARROW_LENGTH) {
     const parts = [`M ${round(points[0].x)} ${round(points[0].y)}`];
     const kappa = 0.5523; // a cubic's handle, as a share of the radius, for a quarter circle
     for (let index = 1; index + 1 < points.length; index += 1) {
         const [before, corner, after] = [points[index - 1], points[index], points[index + 1]];
         const inward = Math.hypot(corner.x - before.x, corner.y - before.y);
         const outward = Math.hypot(after.x - corner.x, after.y - corner.y);
-        const radius = Math.max(0, Math.min(ROUTE_RADIUS, index === 1 ? inward - ARROW_LENGTH : inward / 2, index + 2 === points.length ? outward - ARROW_LENGTH : outward / 2));
+        const radius = Math.max(0, Math.min(ROUTE_RADIUS, index === 1 ? inward - arrow : inward / 2, index + 2 === points.length ? outward - arrow : outward / 2));
         const din = { x: (corner.x - before.x) / inward, y: (corner.y - before.y) / inward };
         const dout = { x: (after.x - corner.x) / outward, y: (after.y - corner.y) / outward };
         const enter = { x: corner.x - din.x * radius, y: corner.y - din.y * radius };
@@ -1871,12 +2340,66 @@ function loopReach(from, to, axis) {
 function sideAttr(edge, key) {
     const value = edge.attrs[key];
     if (value === undefined)
-        return undefined;
+        return impliedSide(edge, key);
     if (!ATTACH_SIDES.includes(value)) {
         throw new SourceError(`"${key}: ${value}" is not a side — use ${ATTACH_SIDES.join(', ')}`, edge.line);
     }
     return value;
 }
+/**
+ * The side a square line leaves or arrives on when its author named none.
+ *
+ * A curved or straight line with no sides aims straight at the other box, but a
+ * square one can only leave a side head-on, so it has to pick one. Boxes that
+ * share a column join top to bottom and boxes that share a row join side to
+ * side; otherwise the line goes across first and then down, the tie the mixed
+ * passes settled. An end whose partner did name a side keeps the line to one
+ * turn where it can. Everything after this treats the side as though it had
+ * been written, so the ends are spread and bundled like any named side.
+ *
+ * An edge through a `between` gap or past a named node is routed by its clauses,
+ * and one from a node to itself or to its own container has no outside to pick
+ * from, so none of those is given a side here.
+ */
+function impliedSide(edge, key) {
+    if (edge.look.path !== 'square' || edge.between || edge.passes)
+        return undefined;
+    if (contains(edge.from, edge.to) || contains(edge.to, edge.from))
+        return undefined;
+    const own = faceOf(key === 'from' ? edge.from : edge.to);
+    const other = faceOf(key === 'from' ? edge.to : edge.from);
+    const partnerKey = key === 'from' ? 'to' : 'from';
+    const partner = edge.attrs[partnerKey];
+    const overlapX = own.x < other.x + other.width && other.x < own.x + own.width;
+    const overlapY = own.y < other.y + other.height && other.y < own.y + own.height;
+    const across = centerOf(other).x >= centerOf(own).x ? 'right' : 'left';
+    const upDown = centerOf(other).y >= centerOf(own).y ? 'bottom' : 'top';
+    if (partner !== undefined && ATTACH_SIDES.includes(partner)) {
+        // The partner's side is fixed, so take whichever side of this box joins it
+        // in the fewest turns. The order breaks ties the way the rest of this does.
+        const theirs = anchorOn(other, partner, partner === 'top' || partner === 'bottom' ? centerOf(other).x : centerOf(other).y);
+        const order = overlapX && !overlapY ? [upDown, across] : [across, upDown];
+        const sides = [...order, ...ATTACH_SIDES.filter((side) => !order.includes(side))];
+        let best = sides[0];
+        let fewest = Infinity;
+        for (const side of sides) {
+            const mine = anchorOn(own, side, side === 'top' || side === 'bottom' ? centerOf(own).x : centerOf(own).y);
+            const [from, to] = key === 'from' ? [mine, theirs] : [theirs, mine];
+            const turns = tidyRoute(rightAngles(from, { x: from.tx, y: from.ty }, to, { x: to.tx, y: to.ty }, ROUTE_STUB)).length;
+            if (turns < fewest) {
+                fewest = turns;
+                best = side;
+            }
+        }
+        return best;
+    }
+    if (overlapX && !overlapY)
+        return upDown;
+    if (overlapY && !overlapX)
+        return across;
+    // Across first, then down: the start leaves across and the end is reached down.
+    return key === 'from' ? across : upDown;
+}
 function arrowMarker(color) {
     const id = markerId(color);
     return [

package/dist/resolve.js

@@ -1,5 +1,5 @@
-import { ALL_ATTR_KEYS, ATTR_KEYS, PART_SIDES, COLOR_KEYS, COLOR_PARTS, CONTENT_ALIGNMENTS, CONTENT_WIDTHS, describePlacement, nameTarget, } from './ast.js';
-import { ARROW_LENGTH, CHILD_GAP, DECK_STEP, DEFAULT_FONT_SIZE, DEFAULT_MARGIN, GAPS, HEADER_GAP, ICON_GAP, ICON_LINES, TEXT_CLEARANCE, PAD, SEPARATION_GAP, fontSizeFor, leafTop, textExtent, textStyleFor, widestLine, } from './constants.js';
+import { ALL_ATTR_KEYS, ATTR_KEYS, PART_SIDES, COLOR_KEYS, COLOR_PARTS, CONTENT_ALIGNMENTS, CONTENT_WIDTHS, LINE_VALUES, describePlacement, nameTarget, } from './ast.js';
+import { CHILD_GAP, DECK_STEP, DEFAULT_FONT_SIZE, DEFAULT_MARGIN, GAPS, HEADER_GAP, ICON_GAP, ICON_LINES, TEXT_CLEARANCE, PAD, SEPARATION_GAP, THICKNESS, arrowLength, fontSizeFor, leafTop, textExtent, textStyleFor, widestLine, } from './constants.js';
 import { fix, reachability, tightest } from './constrain.js';
 import { SourceError } from './errors.js';
 import { bodyFor } from './icons.js';
@@ -499,6 +499,7 @@ function buildEdges(statements, byName, styles, defaults) {
                 : {}),
             ...(between ? { between } : {}),
             ...(passes ? { passes } : {}),
+            look: lineLook(stmt.attrs, appearance, what, stmt.line),
             attrs: stmt.attrs,
             appearance,
             line: stmt.line,
@@ -506,6 +507,49 @@ function buildEdges(statements, byName, styles, defaults) {
     }
     return edges;
 }
+/**
+ * The line's bracket, checked, with a default for everything unsaid. A value is
+ * checked wherever it came from — a style's `path: squar` is as much a typo as
+ * an edge's — but `corners: rounded` is refused only when the edge itself says
+ * it on a curved line, which has no corners. From a style or a default it
+ * applies to the edges that have corners, the way a style's `fill:` lands on
+ * the nodes that have an inside.
+ */
+function lineLook(written, appearance, what, line) {
+    const word = (property) => {
+        const value = appearance[`line.${property}`];
+        if (value === undefined)
+            return LINE_VALUES[property][0];
+        if (!LINE_VALUES[property].includes(value)) {
+            throw new SourceError(`edge ${what}: "${property}: ${value}" is not a ${property} — use ${(property === 'thickness' ? ['thin', 'normal', 'thick'] : LINE_VALUES[property]).join(', ')}` +
+                (property === 'thickness' ? ', or a number of pixels' : ''), line);
+        }
+        return value;
+    };
+    const thickness = (() => {
+        const value = appearance['line.thickness'];
+        if (value !== undefined && /^[0-9.]/.test(value)) {
+            if (!/^\d+(\.\d+)?$/.test(value) || Number(value) <= 0) {
+                throw new SourceError(`edge ${what}: "thickness: ${value}" — a thickness is thin, normal, thick, ` +
+                    'or a plain number of pixels greater than zero, such as `thickness: 3`', line);
+            }
+            return Number(value);
+        }
+        return THICKNESS[word('thickness')];
+    })();
+    const look = {
+        path: word('path'),
+        corners: word('corners'),
+        crossing: word('crossing'),
+        pattern: word('pattern'),
+        thickness,
+    };
+    if (look.path === 'curved' && written['line.corners'] === 'rounded') {
+        throw new SourceError(`edge ${what}: a curved line has no corners to round — \`corners: rounded\` takes a ` +
+            '`path: square` or `path: straight` line', line);
+    }
+    return look;
+}
 /**
  * Give a node a width and height, sizing its children first. Also records each
  * child's offset within this node, which pass three turns into absolute
@@ -1358,10 +1402,11 @@ function corridorsIn(edges, locate, measurer, fontSize) {
         // The clearance is doubled because the text is drawn at the *midpoint* of
         // the line, so the room it needs is symmetric about that point whatever sits
         // at either end. The arrowhead is charged on both sides for the same reason:
-        // it covers `ARROW_LENGTH` of the line it arrives on, and reserving that at
-        // one end only would move the midpoint rather than lengthen the run.
+        // it covers the head's length of the line it arrives on, and reserving that
+        // at one end only would move the midpoint rather than lengthen the run. A
+        // thick line's head is longer, and takes the room it needs.
         const extent = (axis) => textExtent(edge.lines, edge.textAttrs, axis, measurer, fontSize, edge.line) +
-            (TEXT_CLEARANCE + ARROW_LENGTH) * 2;
+            (TEXT_CLEARANCE + arrowLength(edge.look.thickness)) * 2;
         corridors.push({
             edge,
             from,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "reladraw",
-  "version": "0.6.0",
+  "version": "0.7.1",
   "description": "A diagram language where you say where things go.",
   "type": "module",
   "bin": {