reladraw 0.20.0 → 0.22.0

package/README.md

@@ -45,7 +45,7 @@ npm install -g reladraw
 reladraw render diagram.reladraw -o diagram.svg
 ```
 
-`reladraw check diagram.reladraw` prints the warnings without writing a picture, and `reladraw format diagram.reladraw` lines its statements up in columns.
+`reladraw check diagram.reladraw` prints the warnings without writing a picture, and `reladraw format diagram.reladraw` lines its statements up in columns. `reladraw render diagram.reladraw --page` writes a page for looking at it in a browser, with pan, zoom, full screen and the warnings beside it.
 
 Or from a clone, which also gets you the examples:
 
@@ -75,20 +75,22 @@ Each `<reladraw-diagram>` is replaced by its SVG. Indent the source however suit
 To install a skill to let your agent know how to use reladraw:
 
 ```
-npx skills add reladraw/reladraw -g
+reladraw install-skill -g
 ```
 
-That installs it for every agent you use (Claude Code, Codex, Cursor, Copilot and others), each in its own skills directory. Leave off `-g` to install it into the current project only. To install it for just one agent, name it with `-a`:
+That installs the skill that came with your copy of reladraw, so it teaches what your reladraw accepts, for every agent you use (Claude Code, Codex, Cursor, Copilot and others), each in its own skills directory. It hands the work to [skills](https://www.npmjs.com/package/skills), and passes on whatever you write after `install-skill`. Leave off `-g` to install it into the current project only. To install it for just one agent, name it with `-a`:
 
 ```
-npx skills add reladraw/reladraw -g -a claude-code
+reladraw install-skill -g -a claude-code
 ```
 
-That gets you a copy of the skill at the time you run it, so you'll need to re-run that command to get the latest skill when there is a new release.
+The skill is a copy, so after upgrading reladraw, run the command again to bring the skill up to date with it.
+
+To install the skill from the main branch instead, which can run ahead of the release on npm, run `npx skills add reladraw/reladraw -g`.
 
 ## Status
 
-Version 0.20.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.22.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.
 
 ## License
 

package/SYNTAX.md

@@ -1,4 +1,4 @@
-# Syntax reference — 0.20.0
+# Syntax reference — 0.22.0
 
 What the language accepts. The changelog at the end lists what changed in each published version; 0.17.0's changes are large, and its entry has a table of every old spelling and what to write instead.
 
@@ -241,7 +241,7 @@ above-left of X   above-right of X  below-left of X   below-right of X
 
 **A gap is exactly what was said.** `right of a` puts the box a `normal` gap from `a`'s right side. The gap goes in the placement's bracket, `right of a (gap: tight)`, or as a distance in front, `2 right of a`; writing both is refused as said twice. A diagonal distance is per axis: `2 below-right of a` is 2 across and 2 down.
 
-**A lone direction also centers on its target.** `right of a` alone puts the box level with `a`'s center, because walking right from something keeps you on its center line. That half gives way as soon as another placement says how high.
+**A lone direction also centers on its target.** `right of a` alone puts the box level with `a`'s center, because walking right from something keeps you on its center line. That half gives way as soon as another placement says how high, whichever box it is written on: with `node b right of a` and `node a even with b.1`, B goes where B.1 is level with A, rather than centered on it.
 
 ```
 node parser
@@ -316,7 +316,7 @@ A target need not be written first, but there must be an order in which each box
 
 ### One anchor
 
-Exactly one box in the file places itself, and every other is placed relative to it, directly or through others. Two unplaced boxes are refused by name. Chaining, `b right of a` then `c right of b`, is the plain way to write a few in a row; `layout:` ([Containers](#containers)) is for "these, in a line, in written order". Place against neighbors rather than hanging many boxes off one small one: a gap from a small box says nothing about the large ones also hanging off it.
+Exactly one box in the file places itself, and every other is placed relative to it, directly or through others. Two unplaced boxes are refused by name. The anchor may be split between two boxes, one saying nothing across and the other nothing up and down: with `node a "A"  even with b.1` and `node b "B" right of a`, A says nothing across, and B, once its centering on A gives way, nothing up and down. Chaining, `b right of a` then `c right of b`, is the plain way to write a few in a row; `layout:` ([Containers](#containers)) is for "these, in a line, in written order". Place against neighbors rather than hanging many boxes off one small one: a gap from a small box says nothing about the large ones also hanging off it.
 
 ### A box goes where it is placed
 
@@ -1033,6 +1033,14 @@ A key means one thing everywhere, so it can be wrong: `border:` on a node with n
 
 **Changing a color never moves anything.** Size is different: a bigger text or a thicker line takes more room.
 
+### A border's bracket
+
+```
+node host "Host"  border: (color: #d2904e, thickness: thick)
+```
+
+`border: red` is short for `border: (color: red)`. `thickness:` takes `thin`, `normal` (the default), `thick`, a multiple of normal such as `3`, or pixels such as `4px`; `border: thick` is refused with the bracket it meant. A thick border is drawn inside the box's outline and the box grows by the extra, so its padding is still measured from the inside of the stroke, a gap to its neighbor from the outside, and a line still ends on its outer edge. A stated `width:` or `height:` is the outside of the box, stroke included. A region's border is drawn inside the edge its points state, and the region doesn't grow.
+
 ### Styles
 
 ```
@@ -1114,9 +1122,12 @@ A default takes the words a style does and may wear a style of its own (`default
 
 ```
 diagram  theme: nord  background: #1e2229  text: (color: #e0e0e0)
+diagram  title: "How a login reaches the database"
 ```
 
-`diagram` holds what covers the whole drawing: `theme`, `background` (the page behind everything), `text: (color: …)` for every text, `guides: show`, and `checks: (…)` ([Findings](#errors-and-findings)). It has no name, since a file holds one diagram, and a second one is an error. `diagram text:` takes a color only; a text size belongs on a default.
+`diagram` holds what covers the whole drawing: `theme`, `background` (the page behind everything), `text: (color: …)` for every text, `guides: show`, `checks: (…)` ([Findings](#errors-and-findings)), and `title`. It has no name, since a file holds one diagram, and a second one is an error. `diagram text:` takes a color only; a text size belongs on a default.
+
+`title:` names the drawing, in quotes. It isn't drawn: the SVG carries it as its own title, which a browser shows on the tab and a screen reader announces, and a page made with `--page` is headed with it.
 
 ### Destinations
 
@@ -1168,14 +1179,25 @@ reladraw check diagram.reladraw
 | option | |
 |---|---|
 | `-o`, `--out` | where `render` writes; defaults to the input with `.svg`; `-` for standard output |
+| `--page` | `render` writes a page for looking at the diagram instead, defaulting to the input with `.html` |
 | `--theme <name>` | render in another theme, whatever the file says |
 | `--guides` | draw the guides |
 | `--checks "<kind>: on, …"` | turn kinds of finding on or off, over the file |
 | `--no-checks` | print no findings; errors still print |
 | `-v`, `--version` | print the version |
 
+`reladraw install-skill` installs the agent skill that came with this version of reladraw, by running `npx skills add` on it with `--copy`. What follows it goes to `skills`: `-g` to install for every project, `-a claude-code` for one agent.
+
 The output is a standalone SVG: every picture is drawn into it as path data, never from a font or a linked file. A web page can draw a diagram in place with `<reladraw-diagram>`; see "In a web page" in the README.
 
+### A page for looking at a diagram
+
+```
+reladraw render arch.reladraw --page
+```
+
+`--page` writes `arch.html`: one self-contained file, for opening in a browser, attaching or committing, that needs nothing running and fetches nothing. The page is in the diagram's own colors, so a dark diagram doesn't sit on a white page, and it is headed with `diagram title:`, or the file's name when there is none. Drag to pan; scroll, pinch or double-click to zoom; Fit shows the whole diagram and 100% returns it to its own scale. The zoom is always shown, with "Fit" beside it while the whole diagram is in view. There is a full-screen button. The Export menu copies the SVG, or saves it or a PNG, as `render` would draw it. The findings are listed beside it in a panel that folds away, and clicking one lights up what its line drew. A box's or a line's name shows under the pointer. Keys: `+` and `-` zoom, `0` fits, `1` is actual size, `f` is full screen.
+
 ### Formatting
 
 ```
@@ -1295,6 +1317,20 @@ Designed and absent from the code.
 
 Pre-1.0, so the minor number is where a breaking change goes. Every removal 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.22.0**
+
+- **`reladraw install-skill`** installs the agent skill that came with your reladraw, so it teaches what your copy accepts rather than what the main branch does. It hands the work to `skills`, passing on `-g`, `-a` and the rest. The npm package now carries the skill.
+- **The agent skill opens each diagram it draws as a page in the default browser**, with `reladraw render --page` as the last step of every drawing rather than only when asked to show it. It doesn't open one when there is no display, or when the user has said not to.
+- **The page says when it is showing the whole diagram**: its zoom reads "Fit · 62%" while fitted, and just the number once you zoom or pan. The Actual size button is now 100%, which is what it always did. Save SVG and Save PNG are under an Export button, which can also copy the SVG.
+- **The playground pans and zooms as the page does**: − and +, Fit, 100%, the wheel, a pinch, a drag, a double-click, and the keys + - 0 1, with the zoom shown between − and +. Its one Actual size button, whose label named the view you would go to rather than the one you were in, is gone. The view stays where you left it as you type. Copy SVG, Save SVG and Save PNG are now under one Export button, so the row of controls fits.
+
+**0.21.0**
+
+- **A diagram can have a title**: `diagram  title: "How a login reaches the database"`. The SVG carries it as its own title, which a browser shows on the tab. See [The diagram](#the-diagram).
+- **`reladraw render --page`** writes a page for looking at a diagram: one self-contained HTML file in the diagram's colors, headed with its title, that pans, zooms, goes full screen, saves the SVG or a PNG, lists the findings and lights up what each one is about. See [A page for looking at a diagram](#a-page-for-looking-at-a-diagram).
+- **A border can be thicker or thinner**: `border: (color: #d2904e, thickness: thick)`, mirroring the line's bracket. A thick border is drawn inside the box, and the box grows to keep its padding, so it may move what is placed beside it. See [A border's bracket](#a-borders-bracket).
+- **A box can be lined up with something inside a box placed against it.** `node a "Node A"  even with b.1` with `node b "Node B" right of a` used to be refused, "nothing anchors the diagram", because `right of a` also centered B on A. That centering now gives way, as it already did to a placement written on B itself, and B goes where B.1 is level with A.
+
 **0.20.0**
 
 - **`stays above`, `stays below`, `stays left of` and `stays right of`** keep a child placed in its box's corner clear of the other children: `node laptop.mark  icon: laptop  inside laptop top-right  stays above laptop.photos`. The laptop stays in the corner, and the box makes room. See [Against its own parent](#against-its-own-parent).

package/dist/ast.d.ts

@@ -354,6 +354,12 @@ export declare const TEXT_KEYS: readonly ["color", "size", "wrap", "align", "at"
  * 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", "curve", "turn", "step-out"];
+/**
+ * What a box's border takes in its bracket: `border: (color: red, thickness:
+ * thick)`, mirroring the line's. `border: red` is the short form of the color,
+ * and both are stored under the bare `border` key.
+ */
+export declare const BORDER_KEYS: readonly ["color", "thickness"];
 /**
  * The words each of the line's properties takes, the default first. Thickness
  * takes a multiple of normal (`2`) or pixels (`3px`) as well. `turn:` takes a fraction and
@@ -655,9 +661,10 @@ export interface DiagramStmt {
  * `text: (color: …)`, and sets the text color of everything at once — the
  * theme has one text color, shared by nodes and edges, and this is that.
  * `checks` takes a bracket too, `checks: (edge-crossings: on)`, turning kinds
- * of finding on or off by name.
+ * of finding on or off by name. `title` is quoted, and names the drawing: the
+ * SVG carries it as its own title, and a page made with `--page` heads with it.
  */
-export declare const DIAGRAM_KEYS: readonly ["theme", "background", "text", "checks", "guides"];
+export declare const DIAGRAM_KEYS: readonly ["theme", "background", "text", "checks", "guides", "title"];
 /**
  * `default leaf  fill: #2e5d3a` — a style that applies to every thing of one
  * kind without being named. The more specific wins: `node` covers every node,

package/dist/ast.js

@@ -298,6 +298,12 @@ export const TEXT_KEYS = ['color', 'size', 'wrap', 'align', 'at'];
  * of `line: (color: red)`, and both are stored under the bare `line` key.
  */
 export const LINE_KEYS = ['color', 'path', 'corners', 'crossing', 'pattern', 'thickness', 'curve', 'turn', 'step-out'];
+/**
+ * What a box's border takes in its bracket: `border: (color: red, thickness:
+ * thick)`, mirroring the line's. `border: red` is the short form of the color,
+ * and both are stored under the bare `border` key.
+ */
+export const BORDER_KEYS = ['color', 'thickness'];
 /**
  * The words each of the line's properties takes, the default first. Thickness
  * takes a multiple of normal (`2`) or pixels (`3px`) as well. `turn:` takes a fraction and
@@ -345,9 +351,10 @@ export const REGION_KEYS = ['style', 'fill', 'opacity', 'border', 'padding', 'pa
  * `text: (color: …)`, and sets the text color of everything at once — the
  * theme has one text color, shared by nodes and edges, and this is that.
  * `checks` takes a bracket too, `checks: (edge-crossings: on)`, turning kinds
- * of finding on or off by name.
+ * of finding on or off by name. `title` is quoted, and names the drawing: the
+ * SVG carries it as its own title, and a page made with `--page` heads with it.
  */
-export const DIAGRAM_KEYS = ['theme', 'background', 'text', 'checks', 'guides'];
+export const DIAGRAM_KEYS = ['theme', 'background', 'text', 'checks', 'guides', 'title'];
 export const DEFAULT_TARGETS = [
     'node',
     'leaf',

package/dist/cli.js

@@ -1,20 +1,25 @@
 #!/usr/bin/env node
+import { spawnSync } from 'node:child_process';
 import { existsSync, readFileSync } from 'node:fs';
 import { mkdir, readFile, writeFile } from 'node:fs/promises';
-import { dirname, resolve as resolvePath } from 'node:path';
+import { basename, dirname, resolve as resolvePath } from 'node:path';
+import { fileURLToPath } from 'node:url';
 import { nearMatch, readChecks } from './checks.js';
 import { SourceError } from './errors.js';
 import { format } from './format.js';
 import { DEFAULT_FORMAT, readFormatSettings, SETTINGS_FILE, settingsFileText } from './format-settings.js';
 import { draw } from './index.js';
+import { drawPage } from './page.js';
 import { THEME_NAMES, THEMES } from './themes.js';
 const USAGE = `reladraw — draw a diagram from stated placement
 
   reladraw render <input.reladraw> [-o <output.svg>] [options]
+  reladraw render <input.reladraw> --page [-o <output.html>] [options]
   reladraw check <input.reladraw> [options]
   reladraw format <input.reladraw>... [--check]
   reladraw format - [--check]
   reladraw format --init
+  reladraw install-skill [skills options]
 
   render      draw the diagram to an SVG, and print any findings: places
               where the picture, drawn as written, may not read as meant.
@@ -30,9 +35,19 @@ const USAGE = `reladraw — draw a diagram from stated placement
               folder up.
               --init writes a .reladraw-format here, every setting at its
               default with what it does.
+  install-skill
+              install the agent skill that came with this version of
+              reladraw, so it teaches what this tool accepts. It runs
+              npx skills add with --copy, and passes on what follows:
+              -g for every project, -a claude-code for one agent.
 
   -o, --out   where render writes the SVG. Defaults to the input path with
               its extension replaced by .svg. Use - for standard output.
+  --page      render writes a page for looking at the diagram instead: one
+              HTML file in the diagram's colors, headed with its title, that
+              pans, zooms, goes full screen, saves the SVG or a PNG, lists the
+              findings and names what is under the pointer. Defaults to the
+              input path with .html.
   --theme     render in this theme, whatever the file's \`diagram theme:\`
               says. One of ${THEME_NAMES.join(', ')}.
   --guides    draw the guides: everything written with \`guide\` in front,
@@ -44,8 +59,35 @@ const USAGE = `reladraw — draw a diagram from stated placement
               print the version.
   -h, --help  print this.
 `;
-const COMMANDS = ['render', 'check', 'format'];
+const COMMANDS = ['render', 'check', 'format', 'install-skill'];
+// The version of skills this was tried with, so a change there can't break it.
+const SKILLS_PACKAGE = 'skills@1.7.6';
+// The skill ships in the package beside dist/, as the one in the repository.
+// skills does the work of knowing where each agent keeps its skills; --copy
+// because an npx run leaves the package in a cache, where a link would break.
+function installSkill(args) {
+    const skills = fileURLToPath(new URL('../.claude/skills/', import.meta.url));
+    if (!existsSync(skills)) {
+        process.stderr.write(`reladraw: the skill isn't in this install of reladraw (looked in ${skills})\n`);
+        return 1;
+    }
+    const windows = process.platform === 'win32';
+    const command = [SKILLS_PACKAGE, 'add', skills, '--copy', ...args];
+    // On Windows npx is a .cmd, which Node runs only through a shell.
+    const result = spawnSync(windows ? 'npx.cmd' : 'npx', windows ? command.map((a) => `"${a}"`) : command, {
+        stdio: 'inherit',
+        shell: windows,
+    });
+    if (result.error) {
+        process.stderr.write(`reladraw: couldn't run npx to install the skill: ${result.error.message}\n`);
+        return 1;
+    }
+    return result.status ?? 1;
+}
 async function main(argv) {
+    // Everything after install-skill is for skills, -h and -v included.
+    if (argv[0] === 'install-skill')
+        return installSkill(argv.slice(1));
     if (argv.length === 0 || argv.includes('-h') || argv.includes('--help')) {
         process.stdout.write(USAGE);
         return argv.length === 0 ? 1 : 0;
@@ -79,6 +121,7 @@ async function main(argv) {
     let checks;
     let noChecks = false;
     let guides = false;
+    let page = false;
     for (let i = 1; i < argv.length; i += 1) {
         const arg = argv[i];
         if ((arg === '-o' || arg === '--out') && command === 'render') {
@@ -119,6 +162,13 @@ async function main(argv) {
         else if (arg === '--guides') {
             guides = true;
         }
+        else if (arg === '--page' && command === 'render') {
+            page = true;
+        }
+        else if (arg === '--page') {
+            process.stderr.write('reladraw: check writes nothing, so it takes no --page; reladraw render --page writes one\n');
+            return 1;
+        }
         else if (arg.startsWith('-') && arg !== '-') {
             process.stderr.write(`reladraw: unknown option ${arg}\n`);
             return 1;
@@ -157,16 +207,24 @@ async function main(argv) {
         overChecks = (fromFile) => readChecks(written, fromFile);
     }
     const source = await readFile(input, 'utf8');
+    const options = {
+        ...(theme === undefined ? {} : { theme: THEMES[theme] }),
+        ...(guides ? { guides: true } : {}),
+        // An icon's file is found from the diagram, not from wherever the tool
+        // happens to be run.
+        readIconFile: (path) => readFileSync(resolvePath(dirname(input), path), 'utf8'),
+        ...(noChecks ? { checks: false } : overChecks ? { checks: overChecks } : {}),
+    };
     let drawn;
     try {
-        drawn = draw(source, {
-            ...(theme === undefined ? {} : { theme: THEMES[theme] }),
-            ...(guides ? { guides: true } : {}),
-            // An icon's file is found from the diagram, not from wherever the tool
-            // happens to be run.
-            readIconFile: (path) => readFileSync(resolvePath(dirname(input), path), 'utf8'),
-            ...(noChecks ? { checks: false } : overChecks ? { checks: overChecks } : {}),
-        });
+        if (page) {
+            const made = drawPage(source, basename(input).replace(/\.[^.]+$/, ''), options);
+            drawn = { text: made.html, findings: made.findings };
+        }
+        else {
+            const made = draw(source, options);
+            drawn = { text: made.svg, findings: made.findings };
+        }
     }
     catch (error) {
         if (error instanceof SourceError) {
@@ -180,12 +238,12 @@ async function main(argv) {
     if (command === 'check')
         return 0;
     if (out === '-') {
-        process.stdout.write(drawn.svg);
+        process.stdout.write(drawn.text);
         return 0;
     }
-    const target = resolvePath(out ?? input.replace(/\.[^.]+$/, '') + '.svg');
+    const target = resolvePath(out ?? input.replace(/\.[^.]+$/, '') + (page ? '.html' : '.svg'));
     await mkdir(dirname(target), { recursive: true });
-    await writeFile(target, drawn.svg, 'utf8');
+    await writeFile(target, drawn.text, 'utf8');
     process.stderr.write(`${target}\n`);
     return 0;
 }

package/dist/constants.d.ts

@@ -55,6 +55,10 @@ export declare const ARROW_MARKER_WIDTH = 7;
 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>;
+/** A box's border as it always was, in pixels: `border: (thickness: normal)`. */
+export declare const BORDER_WIDTH = 1;
+/** What a border's `thickness: thin | normal | thick` draw, in pixels. */
+export declare const BORDER_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

package/dist/constants.js

@@ -65,6 +65,14 @@ export const THICKNESS = {
     normal: LINE_WIDTH,
     thick: LINE_WIDTH * 2,
 };
+/** A box's border as it always was, in pixels: `border: (thickness: normal)`. */
+export const BORDER_WIDTH = 1;
+/** What a border's `thickness: thin | normal | thick` draw, in pixels. */
+export const BORDER_THICKNESS = {
+    thin: BORDER_WIDTH / 2,
+    normal: BORDER_WIDTH,
+    thick: BORDER_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

package/dist/model.d.ts

@@ -30,6 +30,12 @@ export interface LayoutNode {
      * a document's are read; drawing alone depends on it, never placement.
      */
     corners: NodeCorners;
+    /**
+     * How wide the border is drawn, in pixels, from `border: (thickness: …)`;
+     * left out when it is the normal width. The stroke lies inside the outline,
+     * and the padding grows by the extra, so a thick border takes room.
+     */
+    borderWidth?: number;
     /** The text as written, before line splitting. */
     text: string;
     /** The text split into the lines that will be drawn, each as its runs. */
@@ -138,6 +144,8 @@ export interface LayoutMark {
     names: string[];
     appearance: Attrs;
     guide: boolean;
+    /** A region's border width in pixels, left out when normal; drawn inside its stated edge. */
+    borderWidth?: number;
     /** Its text, if it has one, and where that sits on the page (design.org 7.4). */
     text?: MarkTextBox;
     line: number;
@@ -325,6 +333,11 @@ export interface Layout {
     /** How a shown guide of each kind looks: `default guide node` and the rest. */
     guideLooks: Record<'node' | 'edge' | 'point' | 'region', Attrs>;
 }
+/**
+ * Whether a deck, which draws no outline of its own, was given one: a fill, or
+ * something about its border.
+ */
+export declare function outlineStated(appearance: Attrs): boolean;
 /**
  * Whether a node is joined to its container's text, directly or through
  * siblings joined to it: one unit with the text, placed by the text's position

package/dist/model.js

@@ -1,3 +1,10 @@
+/**
+ * Whether a deck, which draws no outline of its own, was given one: a fill, or
+ * something about its border.
+ */
+export function outlineStated(appearance) {
+    return appearance['fill'] !== undefined || appearance['border'] !== undefined || appearance['border.thickness'] !== undefined;
+}
 /**
  * Whether a node is joined to its container's text, directly or through
  * siblings joined to it: one unit with the text, placed by the text's position

package/dist/page.d.ts

@@ -0,0 +1,14 @@
+import { type Finding } from './checks.js';
+import type { DrawOptions } from './index.js';
+/**
+ * `reladraw render --page`: one diagram in one self-contained HTML page, made
+ * for looking at rather than embedding. The page is the diagram's own colors,
+ * headed with its title, and it pans, zooms, goes full screen, saves the SVG
+ * or a PNG, lists the findings, and names a box under the pointer. It needs
+ * nothing running and fetches nothing, so it can be attached, mailed or
+ * committed. `name` is the file's name, the title when the file states none.
+ */
+export declare function drawPage(source: string, name: string, options?: DrawOptions): {
+    html: string;
+    findings: Finding[];
+};