@rse/gradia 0.9.0 → 0.9.2

package/README.md

@@ -7,7 +7,6 @@ Gradia
 <p/>
 <img src="https://nodei.co/npm/@rse/gradia.png?downloads=true&stars=true" alt=""/>
 
-<p/>
 [![github (author stars)](https://img.shields.io/github/stars/rse?logo=github&label=author%20stars&color=%233377aa)](https://github.com/rse)
 [![github (author followers)](https://img.shields.io/github/followers/rse?label=author%20followers&logo=github&color=%234477aa)](https://github.com/rse)
 
@@ -19,12 +18,19 @@ described in a concise textual input language, as SVG diagrams. Three
 diagram types are supported which fit the scenario of visualizing object
 graphs:
 
-- `graph`: a loosly grid-snapped layered layout of the whole graph,
+- `graph`: a loosely grid-snapped layered layout of the whole graph,
   based on the Dagre algorithm of [@antv/layout](https://github.com/antvis/layout).
 - `hub`: a hub graph, placing one primary hub node between its input and
   output nodes.
 - `grid`: a compact grid of tiles for an edge-less graph.
 
+Playground
+----------
+
+See [playground.html](smp/playground.html) for a demo playground.
+
+![Playground](smp/playground.png)
+
 Installation
 ------------
 
@@ -39,12 +45,52 @@ Usage
 $ gradia [-t graph|hub|grid] [-f <format>] [-c <name>=<value>] -o <file>.svg <graph>.txt
 ```
 
+The diagram type is selected with the `-t` command-line option or, when
+this is absent, by the `#type` directive inside the input, and defaults
+to `graph`.
+
 The output format is `svg:standalone` (a standalone SVG/XML document,
 the default), `svg:embedded` (the SVG without the `<?xml?>` declaration,
 for direct embedding into HTML), `url:xml` (a `data:image/svg+xml` URL
 with URL-encoded XML), or `url:base64` (a `data:image/svg+xml` URL with
 Base64-encoded XML).
 
+MCP Service
+-----------
+
+```sh
+$ gradia --mcp [-t graph|hub|grid] [-f <format>] [-c <name>=<value>]
+```
+
+With the `-m`/`--mcp` option, **Gradia** instead runs as a [Model Context
+Protocol](https://modelcontextprotocol.io/) (MCP) service on stdio,
+exposing a single tool `gradia_render` which renders a graph description
+into an SVG diagram. The tool takes the arguments `input` (the graph
+description), `type`, `format`, and `config` (an object of rendering
+options), and returns the rendered SVG document or data URL as its text
+result. Its description carries the entire input language grammar, so
+an AI agent can author graph descriptions without further context. The
+command-line options `--type`, `--format`, and `--config` act as the
+defaults underlying the tool call arguments.
+
+As the tool call arguments are treated as untrusted, the `config`
+argument rejects the option `font-embed` and a `font-family` value
+pointing to a WOFF2 file. Both remain available through the
+(trusted) command-line options of the service.
+
+Configure the service in an MCP client with:
+
+```json
+{
+    "mcpServers": {
+        "gradia": {
+            "command": "npx",
+            "args": [ "-y", "@rse/gradia", "--mcp" ]
+        }
+    }
+}
+```
+
 Input Syntax
 ------------
 
@@ -78,7 +124,9 @@ separated by `|`.
 <string-char>    ::= ( <char> - ( "\"" | "\\" | <newline> ) ) | ( "\\" ( <char> - <newline> ) )
 <comment>        ::= "#" { <char> - <newline> }
 <directive>      ::= "#config" <whitespace> { <whitespace> } <option> <whitespace> { <whitespace> } ( <string> | <word> )
+                   | "#type" <whitespace> { <whitespace> } <type>
 <option>         ::= <letter> { <letter> | <digit> | "-" }
+<type>           ::= "graph" | "hub" | "grid"
 <word>           ::= <char> - <whitespace> { <char> - <whitespace> }
 <newline>        ::= "\n"
 <whitespace>     ::= " " | "\t" | "\r"
@@ -104,10 +152,10 @@ separated by `|`.
 - A `<string>` cannot span lines. Inside it, `\` escapes the following
   character (especially `\"` and `\\`).
 
-- A `<directive>` is a `<comment>` which occupies its entire line,
-  starts with the keyword `#config`, and whose `<option>` is one of the
-  recognized rendering options (see below). All other comments are
-  ignored.
+- A `<directive>` is a `<comment>` which occupies its entire line and
+  starts with the keyword `#config` or `#type`. For `#config`, the
+  `<option>` has to be one of the recognized rendering options (see
+  below). All other comments are ignored.
 
 ### Semantic Rules
 
@@ -149,18 +197,54 @@ separated by `|`.
 
 ### Directives
 
-A `<directive>` sets one of the rendering options, which otherwise are
-settable through the corresponding `--config <option>=<value>`
+A `#type` directive sets the diagram type (`graph`, `hub`, or `grid`),
+which otherwise is settable through the `-t`/`--type` command-line
+option (which takes precedence). The last occurrence wins and an invalid
+type is silently ignored. Without both, the type defaults to `graph`.
+
+A `#config` directive sets one of the rendering options, which otherwise
+are settable through the corresponding `--config <option>=<value>`
 command-line options. The recognized options are:
 
 ```
-font-family                  color-node-ghost-name        color-group-name
-                             color-node-ghost-box         color-group-box
-color-node-regular-name      color-node-ghost-border      color-group-border
-color-node-regular-box
-color-node-regular-border    color-node-primary-name      color-edge-line
-                             color-node-primary-box       color-edge-name
-                             color-node-primary-border    color-edge-arity
+font-family                  color-edge-line              graph-columns-max
+color-node-regular-name      color-edge-name              graph-channel-width-max
+color-node-regular-box       color-edge-arity             graph-gutter-height-max
+color-node-regular-border    color-edge-halo              graph-node-separation
+color-node-primary-name      size-canvas-margin           graph-rank-separation
+color-node-primary-box       size-node-width-min          hub-channel-width-max
+color-node-primary-border    size-node-height-scale       hub-channel-width-min
+color-node-ghost-name        size-edge-corner-radius      hub-node-gap
+color-node-ghost-box         size-edge-hop-radius         grid-columns-max
+color-node-ghost-border      size-edge-track-gap          grid-gap-horizontal
+color-group-name             group-box-padding            grid-gap-vertical
+color-group-box              group-box-gap
+color-group-border
+```
+
+The `size-*`, `group-*`, `graph-*`, `hub-*`, and `grid-*` options
+control the rendering geometry (canvas margin, node box sizing, edge
+routing, group box spacing, and the per-diagram-type layout) and take
+non-negative numbers.
+
+The `font-family` and `color-*` options are embedded directly into the
+generated SVG. When such an option is *not* explicitly configured, the
+SVG references the CSS custom property `--gradia-<option>` (definable by
+the embedding document, e.g. for the `svg:embedded` output format) and
+falls back to the built-in default. An explicitly configured value is
+hard-coded into the SVG instead. The resulting precedence is: first
+`#config`/`--config`, then the CSS custom property `--gradia-<option>`,
+and finally the built-in default.
+
+The `font-family` option is either a built-in font family, a plain font
+family name, or the path to a WOFF2 file. The only built-in font family
+is `Source Sans 3`, shipped as a variable WOFF2 file by the NPM
+dependency [source-sans](https://github.com/adobe-fonts/source-sans),
+and hence the only font which can be embedded without an external font
+file:
+
+```sh
+$ gradia -c font-family="Source Sans 3" -c font-embed=true -o graph.svg graph.txt
 ```
 
 The option `font-embed`, and a `font-family` value pointing to a WOFF2
@@ -170,6 +254,8 @@ as untrusted. Both are available on the command-line only.
 ### Example
 
 ```
+#type   graph
+
 #config color-node-primary-box  #336699
 #config color-edge-line         #999999
 

package/dst/gradia-api-config.d.ts

@@ -16,10 +16,35 @@ export declare const configDefaults: {
     "color-edge-line": string;
     "color-edge-name": string;
     "color-edge-arity": string;
+    "color-edge-halo": string;
+    "size-canvas-margin": number;
+    "size-node-width-min": number;
+    "size-node-height-scale": number;
+    "size-edge-corner-radius": number;
+    "size-edge-hop-radius": number;
+    "size-edge-track-gap": number;
+    "group-box-padding": number;
+    "group-box-gap": number;
+    "graph-columns-max": number;
+    "graph-channel-width-max": number;
+    "graph-gutter-height-max": number;
+    "graph-node-separation": number;
+    "graph-rank-separation": number;
+    "hub-channel-width-max": number;
+    "hub-channel-width-min": number;
+    "hub-node-gap": number;
+    "grid-columns-max": number;
+    "grid-gap-horizontal": number;
+    "grid-gap-vertical": number;
 };
 export type Config = typeof configDefaults;
+export type ConfigEmbedded = {
+    [K in keyof Config]: Config[K] extends string ? K : never;
+}[keyof Config];
+export declare const cssValueOf: (explicit: Partial<Config>, key: ConfigEmbedded) => string;
 export declare const parseDirectives: (input: string) => Partial<Config>;
 export declare const resolveFont: (config: Config) => {
     family: string;
     embed?: string;
+    weight?: string;
 };

package/dst/gradia-api-config.js

@@ -6,6 +6,7 @@
 /*  built-in dependencies  */
 import fs from "node:fs";
 import path from "node:path";
+import url from "node:url";
 /*  the rendering configuration and its default values  */
 export const configDefaults = {
     "font-family": "Helvetica",
@@ -24,8 +25,37 @@ export const configDefaults = {
     "color-group-border": "#c0d0e0",
     "color-edge-line": "#999999",
     "color-edge-name": "#333333",
-    "color-edge-arity": "#333333"
+    "color-edge-arity": "#333333",
+    "color-edge-halo": "#ffffff",
+    "size-canvas-margin": 40, /*  outer margin of the canvas             */
+    "size-node-width-min": 220, /*  minimum node box width                 */
+    "size-node-height-scale": 2.25, /*  height scale of node boxes             */
+    "size-edge-corner-radius": 20, /*  corner rounding radius of edges        */
+    "size-edge-hop-radius": 8, /*  radius of edge crossing hops           */
+    "size-edge-track-gap": 12, /*  offset between parallel edge routes    */
+    "group-box-padding": 30, /*  inner padding of group boxes           */
+    "group-box-gap": 40, /*  vertical gap between group boxes       */
+    "graph-columns-max": 5, /*  graph: max side-by-side nodes          */
+    "graph-channel-width-max": 140, /*  graph: max width of column channels    */
+    "graph-gutter-height-max": 90, /*  graph: max height of row gutters       */
+    "graph-node-separation": 30, /*  graph: layered layout node separation  */
+    "graph-rank-separation": 60, /*  graph: layered layout rank separation  */
+    "hub-channel-width-max": 340, /*  hub: max width of column channels      */
+    "hub-channel-width-min": 240, /*  hub: min width of column channels      */
+    "hub-node-gap": 20, /*  hub: vertical gap of stacked nodes     */
+    "grid-columns-max": 4, /*  grid: max side-by-side tiles           */
+    "grid-gap-horizontal": 40, /*  grid: horizontal gap between tiles     */
+    "grid-gap-vertical": 20 /*  grid: vertical gap between tiles       */
 };
+/*  resolve a directly embedded configuration option into a CSS value:
+    an explicitly configured value is hard-coded (stripped of the
+    characters which would end the CSS declaration, to prevent a CSS
+    injection from untrusted values), while otherwise the value is
+    fetched at display time from the CSS custom property
+    "--gradia-<option>", falling back to the built-in default  */
+export const cssValueOf = (explicit, key) => Object.hasOwn(explicit, key) ?
+    explicit[key].replace(/[;{}]/g, "") :
+    `var(--gradia-${key}, ${configDefaults[key]})`;
 /*  parse "#config <option> <value>" configuration directives from a graph
     description (lines which are otherwise treated as plain comments)  */
 export const parseDirectives = (input) => {
@@ -40,16 +70,45 @@ export const parseDirectives = (input) => {
             description, as they would let it read arbitrary local WOFF2 files  */
         if (key === "font-embed" || (key === "font-family" && val.endsWith(".woff2")))
             continue;
-        partial[key] = typeof configDefaults[key] === "boolean" ?
-            val === "true" : val;
+        if (typeof configDefaults[key] === "boolean")
+            partial[key] = val === "true";
+        else if (typeof configDefaults[key] === "number") {
+            /*  silently skip invalid numeric values, as directives are
+                lines of an untrusted input and never abort the rendering  */
+            const num = Number(val);
+            if (val === "" || !Number.isFinite(num) || num < 0)
+                continue;
+            partial[key] = num;
+        }
+        else
+            partial[key] = val;
     }
     return partial;
 };
-/*  resolve the configured font family: either a plain family name or a
-    path to a WOFF2 file (its content optionally embedded as base64)  */
+/*  the built-in font families, shipped as WOFF2 files by NPM
+    dependencies and hence embeddable without any external font file  */
+const fontsBuiltIn = {
+    "Source Sans 3": {
+        file: "source-sans/WOFF2/VF/SourceSans3VF-Upright.ttf.woff2",
+        weight: "200 900"
+    }
+};
+/*  resolve the configured font family: either a built-in font family, a
+    plain font family name, or a path to a WOFF2 file (the content of
+    the two former optionally embedded as base64, together with the
+    weight range of the embedded, potentially variable, font)  */
 export const resolveFont = (config) => {
     const spec = config["font-family"];
-    if (spec.endsWith(".woff2")) {
+    if (Object.hasOwn(fontsBuiltIn, spec)) {
+        const builtIn = fontsBuiltIn[spec];
+        if (config["font-embed"]) {
+            const file = url.fileURLToPath(import.meta.resolve(builtIn.file));
+            return { family: spec, embed: fs.readFileSync(file).toString("base64"), weight: builtIn.weight };
+        }
+        else
+            return { family: spec };
+    }
+    else if (spec.endsWith(".woff2")) {
         const family = path.basename(spec, ".woff2");
         if (config["font-embed"])
             return { family, embed: fs.readFileSync(spec).toString("base64") };
@@ -57,7 +116,9 @@ export const resolveFont = (config) => {
             return { family };
     }
     else if (config["font-embed"])
-        throw new Error("option \"font-embed\" requires option \"font-family\" to be the path to a WOFF2 file");
+        throw new Error("option \"font-embed\" requires option \"font-family\" to be a built-in font " +
+            `family (${Object.keys(fontsBuiltIn).map((name) => `"${name}"`).join(", ")}) ` +
+            "or the path to a WOFF2 file");
     else
         return { family: spec };
 };

package/dst/gradia-api-parser.js

@@ -133,7 +133,7 @@ export const parse = (input) => {
                 /*  a node has to stay in a single group, so reject any
                     attempt to re-assign it to a different group  */
                 if (attr.key === "group" && node.attrs[k].val !== attr.val)
-                    throw new Error(`node "${id}" cannot be member of more than one group ` +
+                    throw new Error(`node "${id}" cannot be a member of more than one group ` +
                         `("${node.attrs[k].val}" vs "${attr.val}") ` +
                         `at line ${start.line}, column ${start.col}`);
                 node.attrs[k] = attr;

package/dst/gradia-api-render-base.d.ts

@@ -1,20 +1,16 @@
+import { ConfigEmbedded } from "./gradia-api-config.js";
 export declare const FS_NAME = 30;
 export declare const FS_TYPE = 16;
 export declare const FS_ATTR = 22;
 export declare const FS_EDGE = 16;
 export declare const FS_ARITY = 16;
 export declare const FS_GROUP = 24;
-export declare const MARGIN = 40;
-export declare const SLOT = 12;
-export declare const RADIUS = 20;
-export declare const HOP = 8;
-export declare const SCALE_H = 2.25;
 export declare const textWidth: (text: string, size: number) => number;
 export declare const escapeXML: (text: string) => string;
 export type Poly = [number, number][];
 export interface NodeStyle {
-    fill: string;
-    stroke: string;
-    text: string;
+    fill: ConfigEmbedded;
+    stroke: ConfigEmbedded;
+    text: ConfigEmbedded;
     dash?: string;
 }

package/dst/gradia-api-render-base.js

@@ -3,18 +3,14 @@
 **  Copyright (c) 2026 Dr. Ralf S. Engelschall <rse@engelschall.com>
 **  Distributed under MIT license <https://spdx.org/licenses/MIT.html>
 */
-/*  rendering geometry constants  */
-export const FS_NAME = 30; /*  font size of node names          */
-export const FS_TYPE = 16; /*  font size of node types          */
-export const FS_ATTR = 22; /*  font size of node attributes     */
-export const FS_EDGE = 16; /*  font size of edge labels         */
-export const FS_ARITY = 16; /*  font size of edge arities        */
-export const FS_GROUP = 24; /*  font size of group tags          */
-export const MARGIN = 40; /*  outer margin of the canvas       */
-export const SLOT = 12; /*  offset between parallel routes   */
-export const RADIUS = 20; /*  corner rounding radius of edges  */
-export const HOP = 8; /*  radius of edge crossing hops     */
-export const SCALE_H = 2.25; /*  height scale of node boxes       */
+/*  rendering font size constants (the further geometry is configurable,
+    see the "size-*" and per-diagram-type options in the configuration)  */
+export const FS_NAME = 30; /*  font size of node names       */
+export const FS_TYPE = 16; /*  font size of node types       */
+export const FS_ATTR = 22; /*  font size of node attributes  */
+export const FS_EDGE = 16; /*  font size of edge labels      */
+export const FS_ARITY = 16; /*  font size of edge arities     */
+export const FS_GROUP = 24; /*  font size of group tags       */
 /*  estimate rendered text width (no canvas available under Node,
     factor tuned for the average glyph advance of Source Sans 3)  */
 export const textWidth = (text, size) => text.length * size * 0.52;

package/dst/gradia-api-render-edge.d.ts

@@ -15,9 +15,9 @@ export interface TrackUser {
     posOut: number;
     mirror: boolean;
 }
-export declare const assignTracks: (users: TrackUser[], width: number, pad: number) => Map<number, number>;
+export declare const assignTracks: (users: TrackUser[], width: number, pad: number, gap: number) => Map<number, number>;
 export declare const computeHops: (polys: Poly[]) => Map<number, number[]>[];
-export declare const pathOf: (poly: Poly, hop: Map<number, number[]>) => string;
+export declare const pathOf: (poly: Poly, hop: Map<number, number[]>, rounding: number, hopRadius: number) => string;
 export declare const pointAt: (poly: Poly, fraction: number) => {
     x: number;
     y: number;

package/dst/gradia-api-render-edge.js

@@ -3,7 +3,6 @@
 **  Copyright (c) 2026 Dr. Ralf S. Engelschall <rse@engelschall.com>
 **  Distributed under MIT license <https://spdx.org/licenses/MIT.html>
 */
-import { RADIUS, HOP, SLOT } from "./gradia-api-render-base.js";
 /*  edge attachment port geometry  */
 const PORT_SEP = 24; /*  maximum separation of adjacent ports     */
 const PORT_PAD = 10; /*  padding of the port band inside the box  */
@@ -66,7 +65,7 @@ export const assignPorts = (edges, sides, cx, cy, boxW, boxH) => {
     neighbor (back turners get near tracks entry-position-ordered,
     forward turners far tracks, reversed for mirrored users which
     enter the channel/gutter from the far side)  */
-export const assignTracks = (users, width, pad) => {
+export const assignTracks = (users, width, pad, gap) => {
     const order = (list, mirror) => {
         const dir = mirror ? -1 : +1;
         const backs = list.filter((u) => u.posOut < u.posIn)
@@ -79,7 +78,7 @@ export const assignTracks = (users, width, pad) => {
         ...order(users.filter((u) => !u.mirror), false),
         ...order(users.filter((u) => u.mirror), true)
     ];
-    const step = Math.min(SLOT, (width - pad) / Math.max(ordered.length - 1, 1));
+    const step = Math.min(gap, (width - pad) / Math.max(ordered.length - 1, 1));
     const offsets = new Map();
     ordered.forEach((u, idx) => {
         offsets.set(u.edge, (idx - (ordered.length - 1) / 2) * step);
@@ -122,17 +121,17 @@ export const computeHops = (polys) => {
 };
 /*  convert an edge polyline into an SVG path with rounded corners
     at the bends and semi-circular hops at the crossing points  */
-export const pathOf = (poly, hop) => {
+export const pathOf = (poly, hop, rounding, hopRadius) => {
     const len = (a, b) => Math.abs(b[0] - a[0]) + Math.abs(b[1] - a[1]);
     const radius = (k) => {
         if (k <= 0 || k >= poly.length - 1)
             return 0;
-        let r = Math.min(RADIUS, len(poly[k - 1], poly[k]) / 2, len(poly[k], poly[k + 1]) / 2);
+        let r = Math.min(rounding, len(poly[k - 1], poly[k]) / 2, len(poly[k], poly[k + 1]) / 2);
         /*  shrink the corner rounding when a crossing hop sits close
             to the bend, so the hop is never swallowed by the arc  */
         for (const seg of [k - 1, k])
             for (const hx of hop.get(seg) ?? [])
-                r = Math.min(r, Math.max(Math.abs(hx - poly[k][0]) - HOP - 2, 4));
+                r = Math.min(r, Math.max(Math.abs(hx - poly[k][0]) - hopRadius - 2, 4));
         return r;
     };
     const d = [];
@@ -159,14 +158,14 @@ export const pathOf = (poly, hop) => {
             const groups = [];
             for (const hx of xs) {
                 const g = groups[groups.length - 1];
-                if (g !== undefined && Math.abs(hx - g[g.length - 1]) <= HOP * 2 + 14)
+                if (g !== undefined && Math.abs(hx - g[g.length - 1]) <= hopRadius * 2 + 14)
                     g.push(hx);
                 else
                     groups.push([hx]);
             }
             for (const g of groups) {
-                let x1 = g[0] - dir * HOP;
-                let x2 = g[g.length - 1] + dir * HOP;
+                let x1 = g[0] - dir * hopRadius;
+                let x2 = g[g.length - 1] + dir * hopRadius;
                 /*  clamp the arc into the drawable segment part, so
                     crossings close to a corner still get their hop  */
                 if ((x1 - p0[0]) * dir < 0)
@@ -174,7 +173,7 @@ export const pathOf = (poly, hop) => {
                 if ((p1[0] - x2) * dir < 0)
                     x2 = p1[0];
                 d.push(`L ${x1} ${a[1]}`);
-                d.push(`A ${Math.abs(x2 - x1) / 2} ${HOP} 0 0 ${dir > 0 ? 1 : 0} ${x2} ${a[1]}`);
+                d.push(`A ${Math.abs(x2 - x1) / 2} ${hopRadius} 0 0 ${dir > 0 ? 1 : 0} ${x2} ${a[1]}`);
             }
         }
         d.push(`L ${p1[0]} ${p1[1]}`);

package/dst/gradia-api-render-group.d.ts

@@ -1,4 +1,5 @@
 import { Node, Graph } from "./gradia-api-model.js";
+import { Config } from "./gradia-api-config.js";
 import { Layout } from "./gradia-api-render-svg.js";
 export declare const groupOf: (node: Node) => string | undefined;
 export interface GroupPart {
@@ -6,4 +7,4 @@ export interface GroupPart {
     graph: Graph;
 }
 export declare const partitionGroups: (graph: Graph) => GroupPart[] | null;
-export declare const composeGroups: (parts: GroupPart[], layouts: Layout[]) => Layout;
+export declare const composeGroups: (parts: GroupPart[], layouts: Layout[], config: Config) => Layout;

package/dst/gradia-api-render-group.js

@@ -3,11 +3,9 @@
 **  Copyright (c) 2026 Dr. Ralf S. Engelschall <rse@engelschall.com>
 **  Distributed under MIT license <https://spdx.org/licenses/MIT.html>
 */
-import { FS_GROUP, MARGIN, textWidth } from "./gradia-api-render-base.js";
+import { FS_GROUP, textWidth } from "./gradia-api-render-base.js";
 /*  rendering geometry constants  */
-const GROUP_PAD = 30; /*  inner padding of group boxes              */
-const GROUP_HEAD = 34; /*  extra top space for the group tag         */
-const GROUP_GAP = 40; /*  vertical gap between stacked group boxes  */
+const GROUP_HEAD = 34; /*  extra top space for the group tag  */
 /*  the special "group" annotation (assigning a node to a named group)  */
 export const groupOf = (node) => node.attrs.findLast((attr) => attr.key === "group")?.val;
 /*  partition the graph into its named groups (in order of first
@@ -65,24 +63,28 @@ const boundsOf = (layout) => {
     (a node id is unique across the groups, as every node is a member
     of exactly one group, so the maps can be merged and the coordinate
     functions can dispatch on the node id)  */
-export const composeGroups = (parts, layouts) => {
+export const composeGroups = (parts, layouts, config) => {
+    /*  resolve the configurable rendering geometry  */
+    const margin = config["size-canvas-margin"];
+    const pad = config["group-box-padding"];
+    const gap = config["group-box-gap"];
     /*  stack the group boxes vertically and determine the coordinate
         offset which shifts each layout into its group box  */
     const groups = [];
     const dxs = [];
     const dys = [];
     const groupIdx = new Map();
-    let y = MARGIN;
+    let y = margin;
     layouts.forEach((layout, i) => {
         const b = boundsOf(layout);
-        const w = Math.max(b.maxX - b.minX + GROUP_PAD * 2, textWidth(parts[i].name, FS_GROUP) + GROUP_PAD * 2);
-        const h = b.maxY - b.minY + GROUP_PAD * 2 + GROUP_HEAD;
-        dxs.push(MARGIN + GROUP_PAD - b.minX);
-        dys.push(y + GROUP_HEAD + GROUP_PAD - b.minY);
+        const w = Math.max(b.maxX - b.minX + pad * 2, textWidth(parts[i].name, FS_GROUP) + pad * 2);
+        const h = b.maxY - b.minY + pad * 2 + GROUP_HEAD;
+        dxs.push(margin + pad - b.minX);
+        dys.push(y + GROUP_HEAD + pad - b.minY);
         for (const node of layout.nodes)
             groupIdx.set(node.id, i);
-        groups.push({ name: parts[i].name, x: MARGIN, y, w, h });
-        y += h + GROUP_GAP;
+        groups.push({ name: parts[i].name, x: margin, y, w, h });
+        y += h + gap;
     });
     /*  merge the per-group layouts into the composed layout  */
     const merge = (pick) => new Map(layouts.flatMap((layout) => Array.from(pick(layout).entries())));

package/dst/gradia-api-render-node.d.ts

@@ -2,7 +2,7 @@ import { Attr, Node } from "./gradia-api-model.js";
 import { Config } from "./gradia-api-config.js";
 import { NodeStyle } from "./gradia-api-render-base.js";
 export declare const isPrimary: (node: Node) => boolean;
-export declare const defaultStyleOf: (config: Config) => (node: Node) => NodeStyle;
+export declare const defaultStyleOf: (node: Node) => NodeStyle;
 export declare const typeOf: (node: Node) => string | undefined;
 export declare const attrsOfNode: (node: Node) => Attr[];
 export declare const urlOf: (node: Node) => string | undefined;
@@ -11,7 +11,7 @@ export declare const ATTR_H = 30;
 export declare const ATTR_P = 8;
 export declare const TYPE_H = 26;
 export declare const TYPE_D = 36;
-export declare const measureNodes: (nodes: Node[], scaleOf: (node: Node) => number) => {
+export declare const measureNodes: (nodes: Node[], config: Config, scaleOf: (node: Node) => number) => {
     boxW: Map<string, number>;
     boxH: Map<string, number>;
     contentH: Map<string, number>;

package/dst/gradia-api-render-node.js

@@ -7,14 +7,14 @@ import { FS_NAME, FS_TYPE, FS_ATTR, textWidth } from "./gradia-api-render-base.j
 /*  the special "primary" annotation (rendered as a distinct node coloring)  */
 export const isPrimary = (node) => node.attrs.findLast((attr) => attr.key === "primary")?.val === "true";
 /*  the default node box coloring (primary node boxes get a distinct one)  */
-export const defaultStyleOf = (config) => (node) => isPrimary(node) ? {
-    fill: config["color-node-primary-box"],
-    stroke: config["color-node-primary-border"],
-    text: config["color-node-primary-name"]
+export const defaultStyleOf = (node) => isPrimary(node) ? {
+    fill: "color-node-primary-box",
+    stroke: "color-node-primary-border",
+    text: "color-node-primary-name"
 } : {
-    fill: config["color-node-regular-box"],
-    stroke: config["color-node-regular-border"],
-    text: config["color-node-regular-name"]
+    fill: "color-node-regular-box",
+    stroke: "color-node-regular-border",
+    text: "color-node-regular-name"
 };
 /*  the special "type" annotation (rendered above the node name)  */
 export const typeOf = (node) => node.attrs.findLast((attr) => attr.key === "type")?.val;
@@ -48,8 +48,7 @@ export const TYPE_D = 36; /*  baseline distance of the type to the name */
 /*  determine node box sizes from their textual content
     (boxes are scaled up in height by a per-node factor to
     give the edges more attachment room)  */
-export const measureNodes = (nodes, scaleOf) => {
-    const MIN_W = 220; /*  minimum node box width            */
+export const measureNodes = (nodes, config, scaleOf) => {
     const PAD_W = 18; /*  left/right node box text padding  */
     /*  the resulting node box dimensions  */
     const boxW = new Map();
@@ -66,7 +65,7 @@ export const measureNodes = (nodes, scaleOf) => {
             w = Math.max(w, textWidth(`${attr.key}: ${attr.val}`, FS_ATTR));
         const h = MIN_H + (type !== undefined ? TYPE_H : 0) +
             (attrs.length > 0 ? attrs.length * ATTR_H + ATTR_P : 0);
-        boxW.set(node.id, Math.max(MIN_W, Math.ceil(w) + PAD_W * 2));
+        boxW.set(node.id, Math.max(config["size-node-width-min"], Math.ceil(w) + PAD_W * 2));
         boxH.set(node.id, Math.ceil(h * scaleOf(node)));
         contentH.set(node.id, h);
     }

package/dst/gradia-api-render-svg.d.ts

@@ -20,4 +20,4 @@ export interface Layout {
     styleOf?: (node: Node) => NodeStyle;
     groups?: GroupBox[];
 }
-export declare const renderSVG: (layout: Layout, config: Config) => string;
+export declare const renderSVG: (layout: Layout, config: Config, explicit: Partial<Config>) => string;