reladraw 0.13.0 → 0.14.0

package/README.md

@@ -82,7 +82,7 @@ That gets you a copy of the skill at the time you run it, so you'll need to re-r
 
 ## Status
 
-Version 0.13.0. Early stage, but works. The parser, layout engine, and SVG renderer are written in TypeScript, with zero runtime dependencies. There is a command-line tool that turns a .reladraw text file into an SVG, and an element that does the same inside a web page.
+Version 0.14.0. Early stage, but works. The parser, layout engine, and SVG renderer are written in TypeScript, with zero runtime dependencies. There is a command-line tool that turns a .reladraw text file into an SVG, and an element that does the same inside a web page.
 
 The language isn't stable yet, so expect the syntax to change.
 

package/SYNTAX.md

@@ -1,4 +1,4 @@
-# Syntax reference — 0.13.0
+# Syntax reference — 0.14.0
 
 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.
 
@@ -396,12 +396,55 @@ Separation leaves a tight gap, deliberately small — enough to read as two node
 ## Edges
 
 ```
-edge <from> -> <to> ["<text>"] [between <a> and <b> [vertically|horizontally]] [attributes]
-edge <to> <- <from> ["<text>"] [between <a> and <b> [vertically|horizontally]] [attributes]
-edge <from> <-> <to> ["<text>"] [between <a> and <b> [vertically|horizontally]] [attributes]
+edge <from> <arrow> <to> ["<text>"] [between <a> and <b> [vertically|horizontally]] [attributes]
 ```
 
-`a <- b` is exactly `b -> a` — same arrow, same picture. What changes is which name you write first, and that is worth having: the first name reads as the subject of the line, and plenty of edges are about the thing the arrow points at rather than the thing it leaves. `from:` and `to:` follow the arrow, not the writing order, so they still name the tail and the head.
+```
+edge a -> b       // an arrow at b
+edge a <- b       // an arrow at a
+edge a <-> b      // one at each end
+edge a -- b       // a plain line
+```
+
+`a <- b` draws the same picture as `b -> a`. What changes is which name you write first, and that is worth having: the first name reads as the subject of the line, and plenty of edges are about the thing the arrow points at rather than the thing it leaves. **`from:` and `to:` follow the writing order**, never the arrow: `from:` is always the first name's side and `to:` the second's, whichever way the arrow points.
+
+### What is drawn at each end
+
+The arrow is a mark, a line, a mark. The line is `-` or `--`, the two meaning the same, and either mark may be left off. A mark is a word, or a glyph that stands for one:
+
+| mark | draws | glyph |
+|---|---|---|
+| `arrow` | a filled arrowhead | `>` at the right end, `<` at the left |
+| `oarrow` | an outlined arrowhead | `\|>` at the right end, `<\|` at the left |
+| `dot` | a filled circle | `*` |
+| `odot` | an outlined circle | `o` |
+| `diamond` | a filled diamond | |
+| `odiamond` | an outlined diamond | |
+| `bar` | a stroke across the line | `\|` |
+| `none` | nothing | |
+
+The `o` in front means outlined, for every shape. A glyph that points is spelled the way it points, which is why `<->` reads as it does. So these are all the same arrow, and you write whichever reads best to you:
+
+```
+edge a o--> b
+edge a odot--arrow b
+edge a (odot)--(arrow) b
+edge a [odot] -- [arrow] b
+```
+
+A mark touches the dashes or is in brackets. `edge a -- dot b` is an error, because it reads just as well as a plain line to a node named `dot`.
+
+**Marks as attributes.** `from-mark:` and `to-mark:` say the same thing, one end at a time, and they are how a style carries marks:
+
+```
+style inherits  to-mark: oarrow
+edge dog -- animal  style: inherits
+edge cat -- animal  style: inherits
+```
+
+**An end with nothing written is left open, not empty.** `dog -- animal` is plain until something says otherwise, and here the style does. `none` is the word for "nothing at this end, whatever the style says": `edge a none--> b`, or `from-mark: none`.
+
+**A mark written in the arrow is final.** The edge's own `to-mark:` may repeat it but not contradict it — `edge a --> b  to-mark: dot` is an error, since both halves are on one line and one of them would be dead text. A style fills only the ends the arrow leaves open: a style giving every end a `bar`, applied to `a --> b`, draws a bar at `a` and still the arrow at `b`.
 
 Endpoints may be nested (`desktop1.files`). An edge never says where a node goes and routing is the renderer's problem, with one exception: an edge with text claims room in the gap it crosses, which is the next section.
 
@@ -454,7 +497,7 @@ The same rule covers every other case: sides at right angles where one faces awa
 
 Several lines along the same stretch take a lane each, side by side, instead of drawing on top of one another, nested so that none crosses another where it need not. Where one of them carries its text on that stretch, the others keep clear of the text as well as the line. The text rides on the line's longest straight piece that it does not land on a box from, and never changes which way the line goes.
 
-A curved line and a square one take the same way. The square one turns at corners. The curved one sweeps through them, each sweep as wide as the room around it allows without coming near a box or another line, and a line stepping sideways and carrying on the way it was going is one S. Where the room is tight a sweep comes close to a rounded corner; where there is room it flows. At an arrowhead, the line always finishes straight, so the head points square into the side.
+A curved line and a square one take the same way. The square one turns at corners. The curved one sweeps through them, each sweep as wide as the room around it allows without coming near a box or another line, and a line stepping sideways and carrying on the way it was going is one S. Where the room is tight a sweep comes close to a rounded corner; where there is room it flows. At an arrowhead or any other mark, the line always finishes straight, so the mark points square into the side.
 
 When there is no way at all — the side you named is flush against another box — the file is refused with the reason: `edge a -> b: cannot leave a's right side, b is against it`.
 
@@ -769,6 +812,7 @@ Every attribute, and what takes one. The kinds here are what a node's **body** i
 | `shape` | ✓ | | ✓ | | the outline the node is drawn with, `none` included |
 | `icon` | | ✓ | | | the picture the node is drawn as |
 | `from` `to` | | | | ✓ | which side the line leaves and arrives on |
+| `from-mark` `to-mark` | | | | ✓ | what is drawn at each end — see "What is drawn at each end" |
 | `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 |
@@ -849,7 +893,7 @@ A color attribute says which part of a thing it colors, and a part exists only o
 | `fill` | the area inside the outline | a node |
 | `border` | the outline | a node |
 | `text: (color: …)` | the text | every node, and an edge |
-| `line` | the drawn line and its arrowheads | an edge |
+| `line` | the drawn line and the marks at its ends | an edge |
 
 A word written on a kind that has no such part is refused by name, and the error lists the parts that kind does have — `border:` on a node with no body is a mistake, not something to ignore, for the same reason an unknown `diagram` key is.
 
@@ -1068,6 +1112,13 @@ 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.14.0**
+
+One breaking change: on an edge written with `<-`, `from:` and `to:` now name the sides of the first and second names written. They used to follow the arrow, so `disk <- writer  from: bottom` meant Writer's bottom; it now means Disk's. Swap the two on any `<-` edge that names a side. No other file draws differently.
+
+- A line can have no arrowhead: `edge a -- b`, or `edge a - b`.
+- Each end of a line can carry a mark: an arrowhead filled or outlined, a dot, a diamond or a bar, written in the arrow (`a o--> b`, `a diamond--arrow b`) or as `from-mark:` and `to-mark:`, which a style can carry. See "What is drawn at each end".
+
 **0.13.0**
 
 No syntax changes, and no file that worked is refused. Lines move: every line that goes round something, and every line with `below`/`above`/`left of`/`right of` or `between`, may be drawn differently.

package/dist/ast.d.ts

@@ -276,12 +276,34 @@ export interface NodeStmt {
     attrs: Attrs;
     line: number;
 }
+/**
+ * What may be drawn at an end of a line. The `o` prefix is the outlined form of
+ * the shape, one rule for every shape; `none` says there is definitely nothing,
+ * where an end with no mark written leaves it to a style.
+ */
+export declare const MARKS: readonly ["arrow", "oarrow", "dot", "odot", "diamond", "odiamond", "bar", "none"];
+export type Mark = (typeof MARKS)[number];
+/**
+ * The glyphs that stand for a mark, by the end they are written at. A glyph
+ * that points is spelled the way it points, so `<` is the arrow at the left end
+ * and `>` the one at the right, which is what makes `<->` read. The diamonds
+ * have none: nothing would explain itself, and `<>` is two arrows.
+ */
+export declare const MARK_GLYPHS: Record<'from' | 'to', Record<string, Mark>>;
+/** The marks written in an edge's arrow, by end. An end with none written is absent. */
+export interface EdgeMarks {
+    from?: Mark;
+    to?: Mark;
+}
 export interface EdgeStmt {
     kind: 'edge';
+    /** The first name written. `from:` and `to:` follow writing order, never the arrow. */
     from: string;
     to: string;
-    /** `<->` rather than `->`. */
-    both: boolean;
+    /** The arrow as written, `->` or `o--odiamond`, for quoting back. */
+    arrow: string;
+    /** The marks the arrow writes at each end: `->` is an arrow at `to`, `<-` one at `from`. */
+    marks: EdgeMarks;
     text?: string;
     /** The text's bracketed modifiers, as written. Usually empty. */
     textAttrs: Attrs;

package/dist/ast.js

@@ -240,6 +240,22 @@ export const LINE_VALUES = {
     pattern: ['solid', 'dashed', 'dotted', 'dash-dot'],
     thickness: ['normal', 'thin', 'thick'],
 };
+/**
+ * What may be drawn at an end of a line. The `o` prefix is the outlined form of
+ * the shape, one rule for every shape; `none` says there is definitely nothing,
+ * where an end with no mark written leaves it to a style.
+ */
+export const MARKS = ['arrow', 'oarrow', 'dot', 'odot', 'diamond', 'odiamond', 'bar', 'none'];
+/**
+ * The glyphs that stand for a mark, by the end they are written at. A glyph
+ * that points is spelled the way it points, so `<` is the arrow at the left end
+ * and `>` the one at the right, which is what makes `<->` read. The diamonds
+ * have none: nothing would explain itself, and `<>` is two arrows.
+ */
+export const MARK_GLYPHS = {
+    from: { '<': 'arrow', '<|': 'oarrow', '*': 'dot', o: 'odot', '|': 'bar' },
+    to: { '>': 'arrow', '|>': 'oarrow', '*': 'dot', o: 'odot', '|': 'bar' },
+};
 /**
  * The attributes a `diagram` statement understands. `text` takes a bracket,
  * `text: (color: …)`, and sets the text color of everything at once — the
@@ -333,7 +349,7 @@ export const ATTR_KEYS = {
     shape: ['style', 'gap', 'overlap', 'contents', 'badge', 'deck', 'shape', 'fill', 'border', 'text', 'url'],
     icon: ['style', 'gap', 'overlap', 'icon', 'text', 'url'],
     none: ['style', 'gap', 'overlap', 'shape', 'text', 'url'],
-    edge: ['style', 'from', 'to', 'line', 'text', 'url'],
+    edge: ['style', 'from', 'to', 'from-mark', 'to-mark', 'line', 'text', 'url'],
 };
 /**
  * Every word that is an attribute *somewhere*, which is what separates a

package/dist/grammar.d.ts

@@ -38,7 +38,7 @@ export type TokenKind =
  | 'keyword'
 /** The name a statement declares, right after its keyword. */
  | 'name'
-/** `->` and `<->`. */
+/** `->`, `<-`, `<->`, and `--` or `-` for a plain line. */
  | 'arrow'
 /** Placement and edge vocabulary: `right`, `of`, `level`, `with`, `and`, `between`, … */
  | 'relation'
@@ -71,19 +71,11 @@ export declare const STATEMENT_KEYWORDS: readonly ["node", "edge", "style", "dia
  * colors here without anybody remembering to come back.
  */
 export declare const RELATION_WORDS: string[];
-/**
- * The patterns, as source strings, so a generator can emit them into another
- * editor's grammar without reaching into a compiled RegExp. Each is written to
- * match at the point the scanner has reached; the scanner adds the sticky flag.
- *
- * A name may contain dots (containment) and hyphens, which is why the word
- * pattern is what it is rather than `\w+`.
- */
 export declare const PATTERNS: {
     readonly comment: "\\/\\/.*";
     readonly string: "\"(?:\\\\.|[^\"\\\\])*\"?";
     readonly keyword: `(?:${string})\\b`;
-    readonly arrow: "<->|->|<-";
+    readonly arrow: `${string}?-{1,2}${string}?(?=[ \\t]|$)`;
     readonly attribute: "[A-Za-z][A-Za-z0-9_-]*:";
     readonly color: "#[0-9A-Fa-f]{3,8}\\b";
     readonly relation: `(?:${string})\\b`;

package/dist/grammar.js

@@ -26,7 +26,7 @@
  * editor formats need and the reason a `.reladraw` grammar is small in all of
  * them.
  */
-import { DIRECTIONS, POSITIONS, SIDES, PASSAGE_AXES } from './ast.js';
+import { DIRECTIONS, MARKS, POSITIONS, SIDES, PASSAGE_AXES } from './ast.js';
 /**
  * The words a statement may open with. `parseStatement` in `parser.ts` is the
  * authority — its switch is what actually accepts them — and this list mirrors
@@ -71,6 +71,9 @@ function alternation(words) {
  * A name may contain dots (containment) and hyphens, which is why the word
  * pattern is what it is rather than `\w+`.
  */
+/** One end of an arrow: a mark word or glyph, bare or bracketed. Words first, so `odot` is not `o`. */
+const MARK_WORD = `(?:${[...MARKS].sort((a, b) => b.length - a.length).join('|')}|<\\||\\|>|[<>*o|])`;
+const ARROW_MARK = `(?:\\[${MARK_WORD}\\]|\\(${MARK_WORD}\\)|${MARK_WORD})`;
 export const PATTERNS = {
     comment: '\\/\\/.*',
     // The closing quote is optional: every string is unterminated for as long as
@@ -78,8 +81,10 @@ export const PATTERNS = {
     // rest of the file on every keystroke.
     string: '"(?:\\\\.|[^"\\\\])*"?',
     keyword: `(?:${alternation(STATEMENT_KEYWORDS)})\\b`,
-    // `<->` first, or `<-` would match its opening half and leave a stray `>`.
-    arrow: '<->|->|<-',
+    // A mark, one or two dashes, a mark — `->`, `o--odiamond`, `[dot]-`. It must
+    // end the token, so a hyphenated name stays a word. A mark written apart in
+    // brackets, `[dot] -- [arrow]`, colors as plain words either side of `--`.
+    arrow: `${ARROW_MARK}?-{1,2}${ARROW_MARK}?(?=[ \\t]|$)`,
     attribute: '[A-Za-z][A-Za-z0-9_-]*:',
     color: '#[0-9A-Fa-f]{3,8}\\b',
     relation: `(?:${alternation(RELATION_WORDS)})\\b`,

package/dist/model.d.ts

@@ -1,4 +1,4 @@
-import type { Attrs, Axis, Direction, Kind, Placement } from './ast.js';
+import type { Attrs, Axis, Direction, Kind, Mark, Placement } from './ast.js';
 import type { Line } from './text.js';
 import type { Body } from './icons.js';
 /** A `between` clause with its targets resolved. Mirrors `Passage` in `ast.ts`. */
@@ -115,7 +115,11 @@ export interface LayoutNode {
 export interface LayoutEdge {
     from: LayoutNode;
     to: LayoutNode;
-    both: boolean;
+    /** What is drawn at each end, settled: the arrow, then the edge's own attributes, then its style. */
+    marks: {
+        from: Mark;
+        to: Mark;
+    };
     text?: string;
     /** The text split into the lines that will be drawn, each as its runs. */
     lines?: Line[];

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, LINE_KEYS, LINE_VALUES, 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, MARKS, MARK_GLYPHS, OPPOSITE, isDirection, isPart, isPosition, listTargets, nameTarget, } from './ast.js';
 import { SourceError } from './errors.js';
 import { STATEMENT_KEYWORDS } from './grammar.js';
 import { isAttrKey, tokenizeLine } from './lexer.js';
@@ -516,27 +516,109 @@ function parseNode(head, line) {
         line,
     };
 }
+const NEEDS_ARROW = 'an edge needs a line between its endpoints: "->", "<-", "<->" or "--"';
 /**
- * `edge <from> -> <to> ["<text>"] [between <a> and <b>]`, with `<->` for a
- * two-headed arrow and `<-` for one pointing the other way.
+ * The arrow between an edge's two names: a mark, a shaft, a mark. The shaft is
+ * `-` or `--`, and either mark may be left off, so `--` is a plain line and
+ * `<->` an arrow at each end.
  *
- * `a <- b` is exactly `b -> a` and carries no meaning of its own downstream.
- * What it buys is the ordering: the name written first is the one the line is
- * about, and plenty of edges have the target as their subject.
+ * A mark is a word or a glyph, bare or in `()` or `[]`, and it must touch the
+ * dashes or be bracketed: `edge a -- dot b` would otherwise read like a line to
+ * a node named `dot`. So a bracketed mark may stand apart, which is why the
+ * arrow can span several tokens — `[dot] -- [arrow]` is three, and `(dot)` is
+ * three on its own, since the lexer splits a bracket that opens a token.
+ */
+function readArrow(head, line) {
+    let at = 2;
+    const pieces = [];
+    const bracketed = () => {
+        const token = head[at];
+        if (!token || token.quoted)
+            return;
+        if (token.text === '(' && head[at + 2]?.text === ')' && !head[at + 1].quoted) {
+            pieces.push(`(${head[at + 1].text})`);
+            at += 3;
+        }
+        else if (/^\[[^\]]*\]$/.test(token.text)) {
+            pieces.push(token.text);
+            at += 1;
+        }
+    };
+    bracketed();
+    const shaft = head[at];
+    if (!shaft || shaft.quoted || !shaft.text.includes('-'))
+        throw new SourceError(NEEDS_ARROW, line);
+    pieces.push(shaft.text);
+    at += 1;
+    if (shaft.text.endsWith('-'))
+        bracketed();
+    const text = pieces.join('');
+    const parts = /^([^-]*)(-+)([^-]*)$/.exec(text);
+    if (!parts) {
+        throw new SourceError(`"${text}" is not an arrow — the line is one run of dashes, with a mark at either end`, line);
+    }
+    if (parts[2].length > 2) {
+        throw new SourceError(`"${text}" has ${parts[2].length} dashes — the line is "-" or "--"`, line);
+    }
+    const from = readMark(parts[1], 'from', text, line);
+    const to = readMark(parts[3], 'to', text, line);
+    return {
+        text,
+        marks: { ...(from !== undefined ? { from } : {}), ...(to !== undefined ? { to } : {}) },
+        next: at,
+    };
+}
+/** One end of an arrow, as written: a mark word or glyph, perhaps bracketed, or nothing. */
+function readMark(written, end, arrow, line) {
+    if (written === '')
+        return undefined;
+    const inner = /^\((.*)\)$/.exec(written)?.[1] ?? /^\[(.*)\]$/.exec(written)?.[1] ?? written;
+    if (MARKS.includes(inner))
+        return inner;
+    const glyph = MARK_GLYPHS[end][inner];
+    if (glyph !== undefined)
+        return glyph;
+    const other = end === 'from' ? 'to' : 'from';
+    const turned = MARK_GLYPHS[other][inner];
+    if (turned !== undefined) {
+        // A pointing glyph written at the end it points away from: `>--` or `--<`.
+        const right = Object.entries(MARK_GLYPHS[end]).find(([, mark]) => mark === turned)[0];
+        throw new SourceError(`"${arrow}": "${inner}" points the other way — at the ${end === 'from' ? 'left' : 'right'} end ` +
+            `the ${turned} is "${right}", or write the word "${turned}"`, line);
+    }
+    throw new SourceError(`"${arrow}": "${inner}" is not a mark. The marks are ${MARKS.join(', ')}, and the glyphs ` +
+        `${Object.keys(MARK_GLYPHS.to).join(' ')} and ${Object.keys(MARK_GLYPHS.from).filter((g) => !(g in MARK_GLYPHS.to)).join(' ')}`, line);
+}
+/**
+ * `edge <from> <arrow> <to> ["<text>"] [between <a> and <b>]`. The arrow is
+ * read by `readArrow`.
+ *
+ * `from` and `to` are the order the names are written in, never the arrow's
+ * direction: `a <- b` is `a` then `b` with an arrow at `a`. With a mark at each
+ * end many lines have no direction at all, and the written order is the one
+ * every edge has — so `from:` names the first name's side on every edge.
  */
-const ARROWS = ['->', '<->', '<-'];
 function parseEdge(head, line) {
     const left = requireName(head[1], 'edge', line);
-    const arrow = head[2];
-    if (!arrow || arrow.quoted || !ARROWS.includes(arrow.text)) {
-        throw new SourceError('an edge needs "->", "<-" or "<->" between its endpoints', line);
-    }
-    const rightToken = head[3];
+    const arrow = readArrow(head, line);
+    const rightToken = head[arrow.next];
     if (!rightToken || rightToken.quoted) {
         throw new SourceError('an edge needs a node on the right of the arrow', line);
     }
-    const back = arrow.text === '<-';
-    let at = 4;
+    let at = arrow.next + 1;
+    const stray = head[at];
+    if (stray &&
+        !stray.quoted &&
+        !isAttrKey(stray) &&
+        stray.text !== '(' &&
+        stray.text !== 'between' &&
+        !isDirection(stray.text) &&
+        (MARKS.includes(rightToken.text) || Object.hasOwn(MARK_GLYPHS.to, rightToken.text))) {
+        // `edge a -- dot b`: a mark standing apart, which reads as a node named
+        // `dot`. Said outright rather than left to the "not a direction" error.
+        throw new SourceError(`edge ${left} ${arrow.text} ${rightToken.text} ${stray.text}: a mark touches the dashes or is ` +
+            `in brackets — write "${arrow.text}${rightToken.text}" or "${arrow.text} [${rightToken.text}]"`, line);
+    }
     const textToken = head[at]?.quoted ? head[at] : undefined;
     if (textToken)
         at += 1;
@@ -603,9 +685,10 @@ function parseEdge(head, line) {
     return {
         kind: 'edge',
         textAttrs: bracket.values,
-        from: back ? rightToken.text : left,
-        to: back ? left : rightToken.text,
-        both: arrow.text === '<->',
+        from: left,
+        to: rightToken.text,
+        arrow: arrow.text,
+        marks: arrow.marks,
         ...(textToken ? { text: textToken.text } : {}),
         ...(between ? { between } : {}),
         ...(passes.length > 0 ? { passes } : {}),

package/dist/render.js

@@ -50,7 +50,7 @@ export function render(layout, options = {}) {
         const coming = [...routes]
             .filter(([other]) => other !== edge && !sweeps.has(other))
             .map(([, way]) => way.points);
-        const d = sweptPath(route.points, sweepObstacles(edge, layout.nodes), [...swept, ...coming], arrowLength(edge.look.thickness), edge.both);
+        const d = sweptPath(route.points, sweepObstacles(edge, layout.nodes), [...swept, ...coming], arrowLength(edge.look.thickness), edge.marks);
         sweeps.set(edge, d);
         swept.push(traceOf(`d="${d}"`));
     }
@@ -91,11 +91,19 @@ export function render(layout, options = {}) {
         width: Math.ceil(ink.maxX) - Math.floor(ink.minX),
         height: Math.ceil(ink.maxY) - Math.floor(ink.minY),
     };
-    const arrowColors = new Set(layout.edges.map((edge) => lineOf(edge.appearance, theme, theme.edge)));
+    // One marker for each mark in each line color the drawing actually uses.
+    const markers = new Map();
+    for (const edge of layout.edges) {
+        const color = lineOf(edge.appearance, theme, theme.edge);
+        for (const mark of [edge.marks.from, edge.marks.to]) {
+            if (mark !== 'none')
+                markers.set(markerId(mark, color), [mark, color]);
+        }
+    }
     const svg = [
         `<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)),
+        ...[...markers.values()].map(([mark, color]) => markMarker(mark, color, theme.background)),
         // 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.
@@ -346,8 +354,8 @@ function drawEdge(edge, ends, route, sweep, nodes, theme, measurer, fontSize, ma
     const { start, end } = ends;
     const color = lineOf(edge.appearance, theme, 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)"` : '';
+    const markerEnd = edge.marks.to !== 'none' ? ` marker-end="url(#${markerId(edge.marks.to, color)})"` : '';
+    const markerStart = edge.marks.from !== 'none' ? ` marker-start="url(#${markerId(edge.marks.from, color)})"` : '';
     // 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.
@@ -2382,8 +2390,8 @@ function sideCurve(edge, { start, end, bow }) {
     const tip = (anchor, arrowed) => arrowed && anchor.side !== undefined
         ? { x: anchor.x + anchor.tx * head, y: anchor.y + anchor.ty * head }
         : { x: anchor.x, y: anchor.y };
-    const p0 = tip(start, edge.both);
-    const p3 = tip(end, true);
+    const p0 = tip(start, edge.marks.from !== 'none');
+    const p3 = tip(end, edge.marks.to !== 'none');
     const reach = controlReach(start, end);
     // A bundle whose sides were too short to spread it takes the rest of the
     // room in the middle — see `bowBundles`. Displacing both control points
@@ -2503,7 +2511,7 @@ const SWEEP_AIR = 5;
  * has. So where the room is tight the line looks nearly square, and where there
  * is room it flows.
  */
-function sweptPath(points, boxes, neighbors, arrow, both) {
+function sweptPath(points, boxes, neighbors, arrow, marks) {
     const kappa = 0.5523;
     const count = points.length;
     const legLength = (leg) => Math.hypot(points[leg + 1].x - points[leg].x, points[leg + 1].y - points[leg].y);
@@ -2515,9 +2523,9 @@ function sweptPath(points, boxes, neighbors, arrow, both) {
     const room = (leg) => {
         const length = legLength(leg);
         if (leg === 0)
-            return Math.max(0, length - (both ? arrow : 0));
+            return Math.max(0, length - (marks.from !== 'none' ? arrow : 0));
         if (leg === count - 2)
-            return Math.max(0, length - arrow);
+            return Math.max(0, length - (marks.to !== 'none' ? arrow : 0));
         return length / 2;
     };
     const cubicAt = (p0, c1, c2, p3, t) => {
@@ -2742,19 +2750,46 @@ function impliedSide(edge, key) {
     // 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);
+/**
+ * The shape of each mark, in a 10 by 10 box whose right edge is the end of the
+ * line, pointing along it. The marker scales with the stroke, so a unit is 0.7
+ * of the line's width and an outline of 1.4 units is as thick as the line.
+ *
+ * An outlined mark is filled with the page's background so the line running
+ * under it does not show through. Over a filled container that is the wrong
+ * color inside the outline; nothing has hit it yet.
+ */
+function markShape(mark, color, background) {
+    const outline = `fill="${background}" stroke="${color}" stroke-width="1.4"`;
+    switch (mark) {
+        case 'arrow':
+            return `<path d="M 0 0 L 10 5 L 0 10 z" fill="${color}"/>`;
+        case 'oarrow':
+            return `<path d="M 0.7 1.2 L 9.3 5 L 0.7 8.8 z" ${outline}/>`;
+        case 'dot':
+            return `<circle cx="5" cy="5" r="4" fill="${color}"/>`;
+        case 'odot':
+            return `<circle cx="5.3" cy="5" r="3.4" ${outline}/>`;
+        case 'diamond':
+            return `<path d="M 0 5 L 5 1.2 L 10 5 L 5 8.8 z" fill="${color}"/>`;
+        case 'odiamond':
+            return `<path d="M 0.9 5 L 5 1.9 L 9.1 5 L 5 8.1 z" ${outline}/>`;
+        case 'bar':
+            return `<rect x="5.5" y="0.5" width="1.4" height="9" fill="${color}"/>`;
+        case 'none':
+            return '';
+    }
+}
+/** One marker, drawn at either end: `auto-start-reverse` turns it round at the start. */
+function markMarker(mark, color, background) {
     return [
-        `    <marker id="${id}" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="${ARROW_MARKER_WIDTH}" markerHeight="${ARROW_MARKER_WIDTH}" orient="auto-start-reverse">`,
-        `      <path d="M 0 0 L 10 5 L 0 10 z" fill="${color}"/>`,
-        '    </marker>',
-        `    <marker id="${id}-back" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="${ARROW_MARKER_WIDTH}" markerHeight="${ARROW_MARKER_WIDTH}" orient="auto-start-reverse">`,
-        `      <path d="M 0 0 L 10 5 L 0 10 z" fill="${color}"/>`,
+        `    <marker id="${markerId(mark, color)}" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="${ARROW_MARKER_WIDTH}" markerHeight="${ARROW_MARKER_WIDTH}" orient="auto-start-reverse">`,
+        `      ${markShape(mark, color, background)}`,
         '    </marker>',
     ].join('\n');
 }
-function markerId(color) {
-    return `arrow-${color.replace(/[^a-zA-Z0-9]/g, '')}`;
+function markerId(mark, color) {
+    return `${mark}-${color.replace(/[^a-zA-Z0-9]/g, '')}`;
 }
 /** The rectangle actually drawn. Differs from the node box only for a deck. */
 function faceOf(node) {

package/dist/resolve.js

@@ -1,4 +1,4 @@
-import { ALL_ATTR_KEYS, ATTR_KEYS, PART_SIDES, COLOR_KEYS, COLOR_PARTS, CONTENT_ALIGNMENTS, CONTENT_WIDTHS, LINE_VALUES, describePlacement, nameTarget, } from './ast.js';
+import { ALL_ATTR_KEYS, ATTR_KEYS, MARKS, PART_SIDES, COLOR_KEYS, COLOR_PARTS, CONTENT_ALIGNMENTS, CONTENT_WIDTHS, LINE_VALUES, describePlacement, nameTarget, } from './ast.js';
 import { BARE_EDGE_RUN, 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';
@@ -430,6 +430,34 @@ function appearanceOf(attrs, styles, line) {
     }
     return { ...merged, ...attrs };
 }
+/**
+ * What is drawn at one end of an edge. A mark written in the arrow is final:
+ * the edge's own `from-mark:` or `to-mark:` may repeat it but not contradict
+ * it, since both halves are on one line and whichever lost would be dead text.
+ * An end the arrow leaves blank is unsaid, and the edge's attribute, then its
+ * style, then nothing, fills it. Layering is between places, never within one.
+ */
+function markAt(end, stmt, appearance, what) {
+    const key = `${end}-mark`;
+    const check = (value) => {
+        if (!MARKS.includes(value)) {
+            throw new SourceError(`edge ${what}: "${key}: ${value}" is not a mark — use ${MARKS.join(', ')}`, stmt.line);
+        }
+        return value;
+    };
+    const written = stmt.marks[end];
+    const own = stmt.attrs[key];
+    if (written !== undefined) {
+        if (own !== undefined && check(own) !== written) {
+            throw new SourceError(`edge ${what}: the arrow already puts ${written === 'none' ? 'nothing' : `a${/^[aeiou]/.test(written) ? 'n' : ''} ${written}`} ` +
+                `at ${stmt[end]}, and "${key}: ${own}" says otherwise. Say it once: leave that end of the ` +
+                `arrow blank and keep "${key}: ${own}", or drop "${key}:"`, stmt.line);
+        }
+        return written;
+    }
+    const given = appearance[key];
+    return given === undefined ? 'none' : check(given);
+}
 function buildEdges(statements, byName, styles, defaults) {
     const edges = [];
     for (const stmt of statements) {
@@ -477,7 +505,7 @@ function buildEdges(statements, byName, styles, defaults) {
             };
         });
         const appearance = { ...defaults.get('edge'), ...appearanceOf(stmt.attrs, styles, stmt.line) };
-        const what = `${stmt.from} -> ${stmt.to}`;
+        const what = `${stmt.from} ${stmt.arrow} ${stmt.to}`;
         checkAttrs('edge', what, stmt.attrs, stmt.line);
         checkStyleUse('edge', what, stmt.attrs, styles, stmt.line);
         if (stmt.attrs['url'] !== undefined && stmt.text === undefined) {
@@ -492,7 +520,10 @@ function buildEdges(statements, byName, styles, defaults) {
         edges.push({
             from,
             to,
-            both: stmt.both,
+            marks: {
+                from: markAt('from', stmt, appearance, what),
+                to: markAt('to', stmt, appearance, what),
+            },
             textAttrs,
             ...(stmt.text !== undefined
                 ? { text: stmt.text, lines: linesFor(stmt.text, textAttrs, `edge ${what}`, stmt.line) }
@@ -1468,10 +1499,11 @@ function corridorsIn(edges, locate, measurer, fontSize) {
         const to = locate(edge.to);
         if (!from || !to || from.index === to.index)
             continue;
-        // With no text, the gap still has to show a run of line behind each head,
+        // With no text, the gap still has to show a run of line behind each mark,
         // or two stacked children with an arrow between them draw as a head alone.
+        const marked = [edge.marks.from, edge.marks.to].filter((mark) => mark !== 'none').length;
         if (edge.text === undefined) {
-            const bare = BARE_EDGE_RUN + arrowLength(edge.look.thickness) * (edge.both ? 2 : 1);
+            const bare = BARE_EDGE_RUN + arrowLength(edge.look.thickness) * marked;
             corridors.push({
                 edge,
                 from,
@@ -1486,9 +1518,11 @@ function corridorsIn(edges, locate, measurer, fontSize) {
         // at either end. The arrowhead is charged on both sides for the same reason:
         // 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.
+        // thick line's head is longer, and takes the room it needs. A line with no
+        // mark at either end is charged for none.
+        const head = marked > 0 ? arrowLength(edge.look.thickness) : 0;
         const extent = (axis) => textExtent(edge.lines, edge.textAttrs, axis, measurer, fontSize, edge.line) +
-            (TEXT_CLEARANCE + arrowLength(edge.look.thickness)) * 2;
+            (TEXT_CLEARANCE + head) * 2;
         corridors.push({
             edge,
             from,

package/package.json

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