@jarenjs/mermaid 0.34.0

package/src/theme.js

@@ -0,0 +1,180 @@
+//@ts-check
+/**
+ * @file Theme tokens. `createTheme` resolves a
+ * theme name (or overrides) into a flat token object of concrete colors
+ * *and* a matching set of `--mm-*` CSS custom properties.
+ *
+ * Both are used at once, deliberately: the render pass writes the
+ * concrete colors as SVG presentation attributes (so `toSvgString()` is
+ * a valid, self-colored standalone SVG with no CSS), and also stamps the
+ * `--mm-*` variables inline on the root `<svg>` plus a `class` on every
+ * shape, which `styles/mermaid.css` maps back to `var(--mm-*)`. Because
+ * the stamp is an inline style it beats every stylesheet rule — so the
+ * stamp itself is the re-theming hook: the `'host'` theme stamps each
+ * linked variable as `var(--<host-token>, <concrete>)` (see `HOST_VARS`),
+ * making diagrams follow a host's light/dark tokens live, with no
+ * re-render — memoized vnodes stay valid across a theme flip.
+ *
+ * Only the token tables live here; the resolution mechanics are shared
+ * (`@jarenjs/view/helpers` `resolveTheme`).
+ *
+ * The error-box tokens are `err*`, not `error*`, and must stay that way:
+ * every root stamps every token, `mm-error` is the class marking a root as
+ * an error box, and a `--mm-error-*` stamp would put that marker on every
+ * healthy diagram — so anything testing the marker by substring would read
+ * a working render as a failure.
+ */
+
+import { resolveTheme } from '@jarenjs/view/helpers';
+
+/** @type {Record<string, Record<string, string>>} */
+const THEMES = {
+  default: {
+    background: 'transparent',
+    nodeFill: '#dbeafe',
+    nodeStroke: '#2563eb',
+    nodeText: '#1f2020',
+    lineColor: '#333333',
+    edgeLabelText: '#333333',
+    edgeLabelBg: '#ffffff',
+    clusterFill: '#f1f5f9',
+    clusterStroke: '#94a3b8',
+    actorFill: '#dbeafe',
+    actorStroke: '#2563eb',
+    actorText: '#1f2020',
+    lifeline: '#999999',
+    activationFill: '#f4f4f4',
+    activationStroke: '#666666',
+    noteFill: '#fef3c7',
+    noteStroke: '#d97706',
+    noteText: '#1f2020',
+    errFill: '#fdf2f2',
+    errStroke: '#e74c3c',
+    errTitle: '#c0392b',
+    errText: '#7b241c',
+    errSource: '#555555',
+    fontFamily: '"trebuchet ms", verdana, arial, sans-serif',
+  },
+  dark: {
+    background: 'transparent',
+    nodeFill: '#1f2020',
+    nodeStroke: '#81B1DB',
+    nodeText: '#f4f4f4',
+    lineColor: '#cccccc',
+    edgeLabelText: '#e0e0e0',
+    edgeLabelBg: '#1f2020',
+    clusterFill: '#2b2b3a',
+    clusterStroke: '#6f6f9e',
+    actorFill: '#252526',
+    actorStroke: '#81B1DB',
+    actorText: '#f4f4f4',
+    lifeline: '#8a8a8a',
+    activationFill: '#31313a',
+    activationStroke: '#8a8a8a',
+    noteFill: '#3b3b26',
+    noteStroke: '#aaaa33',
+    noteText: '#f4f4f4',
+    errFill: '#2b1b1b',
+    errStroke: '#e74c3c',
+    errTitle: '#f5827a',
+    errText: '#f0c9c5',
+    errSource: '#8a8a8a',
+    fontFamily: '"trebuchet ms", verdana, arial, sans-serif',
+  },
+  neutral: {
+    background: 'transparent',
+    nodeFill: '#eee',
+    nodeStroke: '#999',
+    nodeText: '#111',
+    lineColor: '#666',
+    edgeLabelText: '#333',
+    edgeLabelBg: '#fff',
+    clusterFill: '#f4f4f4',
+    clusterStroke: '#bbb',
+    actorFill: '#eee',
+    actorStroke: '#999',
+    actorText: '#111',
+    lifeline: '#999',
+    activationFill: '#f4f4f4',
+    activationStroke: '#666',
+    noteFill: '#f3f3d9',
+    noteStroke: '#b7b76d',
+    noteText: '#111',
+    errFill: '#fdf2f2',
+    errStroke: '#e74c3c',
+    errTitle: '#c0392b',
+    errText: '#7b241c',
+    errSource: '#555555',
+    fontFamily: '"trebuchet ms", verdana, arial, sans-serif',
+  },
+  forest: {
+    background: 'transparent',
+    nodeFill: '#cde498',
+    nodeStroke: '#13540c',
+    nodeText: '#13540c',
+    lineColor: '#13540c',
+    edgeLabelText: '#13540c',
+    edgeLabelBg: '#e8f5e0',
+    clusterFill: '#cdffb2',
+    clusterStroke: '#6eaa49',
+    actorFill: '#cde498',
+    actorStroke: '#13540c',
+    actorText: '#13540c',
+    lifeline: '#6eaa49',
+    activationFill: '#e8f5e0',
+    activationStroke: '#13540c',
+    noteFill: '#fff5ad',
+    noteStroke: '#aaaa33',
+    noteText: '#13540c',
+    errFill: '#fdf2f2',
+    errStroke: '#e74c3c',
+    errTitle: '#c0392b',
+    errText: '#7b241c',
+    errSource: '#555555',
+    fontFamily: '"trebuchet ms", verdana, arial, sans-serif',
+  },
+};
+
+/**
+ * Host custom-property links for the `'host'` theme: token key → the host
+ * token it should follow (the site token vocabulary, docs/DESIGN.md §2). The
+ * default theme's concrete colors remain as `var()` fallbacks, so the
+ * same SVG is standalone-valid outside any host.
+ * @type {Record<string, string>}
+ */
+export const HOST_VARS = {
+  nodeFill: '--accent-soft',
+  nodeStroke: '--accent',
+  nodeText: '--fg',
+  lineColor: '--fg',
+  edgeLabelText: '--fg',
+  edgeLabelBg: '--bg',
+  clusterFill: '--surface',
+  clusterStroke: '--border',
+  actorFill: '--accent-soft',
+  actorStroke: '--accent',
+  actorText: '--fg',
+  lifeline: '--muted',
+  activationFill: '--surface',
+  activationStroke: '--muted',
+  noteFill: '--warn-soft',
+  noteStroke: '--warn',
+  noteText: '--fg',
+  errFill: '--fail-soft',
+  errStroke: '--fail',
+  errTitle: '--fail',
+  errText: '--fg',
+  errSource: '--muted',
+};
+
+/**
+ * Resolve a theme. The name `'host'` resolves the default tokens linked
+ * to the host token vocabulary via {@link HOST_VARS}.
+ * @param {string | Record<string, any>} [nameOrOverrides]
+ * @returns {{ name: string, tokens: Record<string, string>, cssVars: Record<string, string> }}
+ */
+export function createTheme(nameOrOverrides = 'default') {
+  return resolveTheme(THEMES, 'mm', nameOrOverrides, HOST_VARS);
+}
+
+export { THEMES };

package/src/to-mermaid.js

@@ -0,0 +1,317 @@
+//@ts-check
+/**
+ * @file Canonical Mermaid printer: AST → text (MERMAID-FORMAT §5).
+ * The reverse arrow of `parseMermaid`, mirroring
+ * `@jarenjs/md`'s `to-md.js`: one specialized closure per diagram type,
+ * a **round-trip fixed point** — `parseMermaid(toMermaid(doc))`
+ * deep-equals `doc.ast` for the fully-modeled types.
+ *
+ * The printer is *canonical*, not verbatim: it does not preserve source
+ * whitespace or comments (the stored Markdown fence `value` gives
+ * verbatim round-trip while a node is untransformed). Its job is
+ * to re-emit an edited AST as editable Mermaid text.
+ */
+
+//#region public ----------------------------------------------------
+
+/** @type {Record<string, (ast: any) => string>} */
+const PRINTERS = {
+  flowchart: printFlowchart,
+  sequence: printSequence,
+  class: printClass,
+  state: printState,
+  er: printEr,
+  gantt: printGantt,
+  pie: printPie,
+};
+
+/**
+ * Print a `DiagramDocument` (or a bare AST with a `diagram` field) to
+ * canonical Mermaid text. Config re-emits as a `%%{init}%%` header when
+ * present.
+ * @param {any} docOrAst
+ * @returns {string}
+ */
+export function toMermaid(docOrAst) {
+  const doc = docOrAst && typeof docOrAst === 'object' && docOrAst.$mermaid !== undefined
+    ? docOrAst
+    : null;
+  const diagram = doc ? doc.diagram : docOrAst?.diagram;
+  const ast = doc ? doc.ast : docOrAst;
+  const config = doc ? doc.config : undefined;
+  const title = doc ? doc.meta?.title : undefined;
+
+  let head = '';
+  if (title != null && title !== '') {
+    head += '---\ntitle: ' + title + '\n---\n';
+  }
+  if (config && typeof config === 'object' && Object.keys(config).length > 0) {
+    head += '%%{init: ' + JSON.stringify(config) + '}%%\n';
+  }
+
+  const printer = PRINTERS[diagram];
+  if (printer !== undefined) return head + printer(ast);
+  // Secondary/raw diagram: keyword + preserved body lines.
+  if (ast && Array.isArray(ast.lines)) {
+    return head + ast.diagram + '\n' + ast.lines.join('\n') + '\n';
+  }
+  return head + String(diagram ?? '') + '\n';
+}
+
+//#endregion
+//#region flowchart -------------------------------------------------
+
+/** Labels containing shape-closer characters must be quoted. */
+const RE_NEEDS_QUOTE = /[[\](){}<>|"]/;
+
+/**
+ * @param {any} ast
+ * @returns {string}
+ */
+function printFlowchart(ast) {
+  const out = ['flowchart ' + (ast.direction || 'TB')];
+
+  // 1. Every node declared once, in AST order — this fixes node order
+  //    on the round trip. Default nodes emit a bare id line.
+  for (const node of ast.nodes) {
+    out.push(nodeDecl(node));
+  }
+
+  // 2. Subgraphs: reference members by bare id (membership only).
+  for (const sg of ast.subgraphs) {
+    out.push(sg.label && sg.label !== ''
+      ? `subgraph ${sg.id} [${sg.label.replace(/\n/g, '<br/>')}]`
+      : `subgraph ${sg.id}`);
+    if (sg.direction) out.push('  direction ' + sg.direction);
+    for (const id of sg.nodes) out.push('  ' + id);
+    out.push('end');
+  }
+
+  // 3. Edges in AST order.
+  for (const e of ast.edges) {
+    const op = edgeOp(e);
+    const label = e.label != null ? `|${e.label.replace(/\n/g, '<br/>')}|` : '';
+    out.push(`${e.from} ${op}${label} ${e.to}`);
+  }
+
+  // 4. classDef / class / style, each in AST order.
+  for (const cd of ast.classDefs) out.push(`classDef ${cd.name} ${cd.styles}`);
+  for (const c of ast.classes) out.push(`class ${c.node} ${c.name}`);
+  for (const s of ast.styles) out.push(`style ${s.node} ${s.styles}`);
+
+  return out.join('\n') + '\n';
+}
+
+/**
+ * @param {any} node
+ * @returns {string}
+ */
+function nodeDecl(node) {
+  if (node.shape === 'rect' && node.label === node.id) return node.id;
+  return node.id + wrapShape(node.shape, node.label);
+}
+
+/**
+ * @param {string} shape
+ * @param {string} label
+ * @returns {string}
+ */
+function wrapShape(shape, label) {
+  // The parser turns `<br/>` into a newline; printing that newline raw would
+  // end the statement. Emitting the tag back is what makes a transformed
+  // diagram round-trip to source that still parses.
+  const text = label.replace(/\n/g, '<br/>');
+  const l = RE_NEEDS_QUOTE.test(text) ? '"' + text.replace(/"/g, '') + '"' : text;
+  switch (shape) {
+    case 'round': return `(${l})`;
+    case 'stadium': return `([${l}])`;
+    case 'subroutine': return `[[${l}]]`;
+    case 'cylinder': return `[(${l})]`;
+    case 'circle': return `((${l}))`;
+    case 'doublecircle': return `(((${l})))`;
+    case 'diamond': return `{${l}}`;
+    case 'hexagon': return `{{${l}}}`;
+    case 'parallelogram': return `[/${l}/]`;
+    case 'parallelogram_alt': return `[\\${l}\\]`;
+    case 'trapezoid': return `[/${l}\\]`;
+    case 'trapezoid_alt': return `[\\${l}/]`;
+    case 'asymmetric': return `>${l}]`;
+    default: return `[${l}]`;
+  }
+}
+
+/**
+ * Reconstruct the canonical link operator (the exact inverse of
+ * `classifyLink` in the parser).
+ * @param {any} e
+ * @returns {string}
+ */
+function edgeOp(e) {
+  const tail = e.tail === 'arrow' ? '<' : e.tail === 'circle' ? 'o' : e.tail === 'cross' ? 'x' : '';
+  const head = e.head === 'arrow' ? '>' : e.head === 'circle' ? 'o' : e.head === 'cross' ? 'x' : '';
+  const n = Math.max(1, e.length | 0);
+  let mid;
+  if (e.stroke === 'thick') mid = '='.repeat(n);
+  else if (e.stroke === 'dotted') mid = '-' + '.'.repeat(n) + '-';
+  else mid = '-'.repeat(Math.max(2, n));
+  return tail + mid + head;
+}
+
+//#endregion
+//#region sequence --------------------------------------------------
+
+/**
+ * @param {any} ast
+ * @returns {string}
+ */
+function printSequence(ast) {
+  const out = ['sequenceDiagram'];
+  if (ast.autonumber) out.push('autonumber');
+  for (const p of ast.participants) {
+    const decl = p.kind === 'actor' ? 'actor' : 'participant';
+    out.push(p.label === p.id ? `${decl} ${p.id}` : `${decl} ${p.id} as ${p.label}`);
+  }
+  printSeqStatements(ast.statements, out, 0);
+  return out.join('\n') + '\n';
+}
+
+/**
+ * @param {any[]} statements
+ * @param {string[]} out
+ * @param {number} depth
+ */
+function printSeqStatements(statements, out, depth) {
+  const pad = '  '.repeat(depth);
+  for (const stmt of statements) {
+    if (stmt.kind === 'message') {
+      const arrow = arrowToken(stmt.line, stmt.head);
+      const act = stmt.activation === 'activate' ? '+' : stmt.activation === 'deactivate' ? '-' : '';
+      out.push(`${pad}${stmt.from}${arrow}${act}${stmt.to}: ${stmt.text}`);
+    }
+    else if (stmt.kind === 'note') {
+      out.push(`${pad}note ${stmt.placement} ${stmt.actors.join(',')}: ${stmt.text}`);
+    }
+    else if (stmt.kind === 'activate' || stmt.kind === 'deactivate') {
+      out.push(`${pad}${stmt.kind} ${stmt.actor}`);
+    }
+    else if (stmt.kind === 'block') {
+      const branchWord = stmt.blockType === 'par' ? 'and'
+        : stmt.blockType === 'critical' ? 'option' : 'else';
+      const b0 = stmt.branches[0];
+      out.push(`${pad}${stmt.blockType}${b0.label ? ' ' + b0.label : ''}`);
+      printSeqStatements(b0.statements, out, depth + 1);
+      for (let i = 1; i < stmt.branches.length; i++) {
+        const b = stmt.branches[i];
+        out.push(`${pad}${branchWord}${b.label ? ' ' + b.label : ''}`);
+        printSeqStatements(b.statements, out, depth + 1);
+      }
+      out.push(`${pad}end`);
+    }
+  }
+}
+
+/**
+ * The exact inverse of `classifyArrow`.
+ * @param {'solid'|'dotted'} line
+ * @param {'arrow'|'open'|'cross'|'point'} head
+ * @returns {string}
+ */
+function arrowToken(line, head) {
+  const dash = line === 'dotted' ? '--' : '-';
+  const tip = head === 'arrow' ? '>>' : head === 'cross' ? 'x' : head === 'point' ? ')' : '>';
+  return dash + tip;
+}
+
+//#endregion
+//#region class / state / er / gantt / pie (best effort) ------------
+
+/**
+ * @param {any} ast
+ * @returns {string}
+ */
+function printClass(ast) {
+  const out = ['classDiagram'];
+  for (const cls of ast.classes) {
+    if (cls.members.length === 0) {
+      out.push(`class ${cls.name}`);
+    }
+    else {
+      out.push(`class ${cls.name} {`);
+      for (const m of cls.members) out.push(`  ${m.visibility ?? ''}${m.text}`);
+      out.push('}');
+    }
+  }
+  for (const r of ast.relations) {
+    out.push(`${r.from} ${r.type} ${r.to}${r.label ? ' : ' + r.label : ''}`);
+  }
+  return out.join('\n') + '\n';
+}
+
+/**
+ * @param {any} ast
+ * @returns {string}
+ */
+function printState(ast) {
+  const out = ['stateDiagram-v2'];
+  // an id-only state no transition mentions must still be DECLARED, or
+  // the canonical round trip silently drops it (`state x` is the
+  // parser's own spelling for exactly that)
+  const mentioned = new Set();
+  for (const t of ast.transitions) {
+    mentioned.add(t.from);
+    mentioned.add(t.to);
+  }
+  for (const s of ast.states) {
+    if (s.label !== s.id) out.push(`${s.id} : ${s.label}`);
+    else if (!mentioned.has(s.id)) out.push(`state ${s.id}`);
+  }
+  for (const t of ast.transitions) {
+    out.push(`${t.from} --> ${t.to}${t.label ? ' : ' + t.label : ''}`);
+  }
+  return out.join('\n') + '\n';
+}
+
+/**
+ * @param {any} ast
+ * @returns {string}
+ */
+function printEr(ast) {
+  const out = ['erDiagram'];
+  for (const e of ast.entities) {
+    if (e.attributes.length === 0) { out.push(e.name); continue; }
+    out.push(`${e.name} {`);
+    for (const a of e.attributes) out.push(`  ${a.type} ${a.name}${a.keys.length ? ' ' + a.keys.join(' ') : ''}`);
+    out.push('}');
+  }
+  for (const r of ast.relationships) {
+    out.push(`${r.left} ${r.leftCard}${r.identifying ? '--' : '..'}${r.rightCard} ${r.right} : ${r.label}`);
+  }
+  return out.join('\n') + '\n';
+}
+
+/**
+ * @param {any} ast
+ * @returns {string}
+ */
+function printGantt(ast) {
+  const out = ['gantt'];
+  for (const key of Object.keys(ast.meta)) out.push(`${key} ${ast.meta[key]}`.trim());
+  for (const section of ast.sections) {
+    if (section.name) out.push(`section ${section.name}`);
+    for (const t of section.tasks) out.push(`${t.name} : ${t.info}`);
+  }
+  return out.join('\n') + '\n';
+}
+
+/**
+ * @param {any} ast
+ * @returns {string}
+ */
+function printPie(ast) {
+  const out = ['pie' + (ast.showData ? ' showData' : '')];
+  if (ast.title) out.push('title ' + ast.title);
+  for (const s of ast.slices) out.push(`"${s.label}" : ${s.value}`);
+  return out.join('\n') + '\n';
+}
+
+//#endregion

package/src/utils.js

@@ -0,0 +1,64 @@
+//@ts-check
+/**
+ * @file Small shared helpers for the mermaid engine.
+ *
+ * `hashContent` and `coord` are re-exported rather than re-implemented, so
+ * this package agrees with the rest of the suite by construction:
+ * `hashContent` is the one content fingerprint (the same source produces
+ * the same vnode `key`, `meta.hash` and memo key whether it flows through
+ * the Markdown engine or this one), and `coord` is the one SVG coordinate
+ * quantization, so a layout pass emits geometry at exactly the precision
+ * the renderer would round it to — which is what keeps the golden JSON and
+ * the SVG it renders to byte-stable instead of carrying float noise.
+ */
+
+export { hashContent } from '@jarenjs/core/string';
+export { coord } from '@jarenjs/view/helpers';
+
+/**
+ * The first whitespace-delimited token of a line: everything up to the
+ * first space or tab (the whole line when there is neither). The
+ * grammars are line-oriented and keyword-led, so this is how both the
+ * type dispatcher and the sequence parser read a line's keyword —
+ * no allocation beyond the returned slice.
+ * @param {string} line
+ * @returns {string}
+ */
+export function firstToken(line) {
+  let i = 0;
+  while (i < line.length && line.charCodeAt(i) !== 0x20 && line.charCodeAt(i) !== 0x09) i++;
+  return line.slice(0, i);
+}
+
+/**
+ * Split a source string into lines, dropping a single trailing newline
+ * and normalizing CRLF/CR to LF first. Comment/blank stripping is the
+ * caller's job (each dialect handles its own comment marker).
+ * @param {string} source
+ * @returns {string[]}
+ */
+export function toLines(source) {
+  const normalized = source.replace(/\r\n?/g, '\n');
+  const end = normalized.endsWith('\n') ? normalized.length - 1 : normalized.length;
+  return normalized.slice(0, end).split('\n');
+}
+
+/**
+ * Accumulate a `{ ... }` body that may span multiple lines. `head` is
+ * the text after the opening brace on the current line; lines are
+ * consumed until one contains the closing brace. Returns the body text
+ * before the `}` and the advanced line index so the caller's loop can
+ * continue after the block (class and ER entity bodies share this).
+ * @param {string[]} lines
+ * @param {number} li - index of the line the `{` sits on
+ * @param {string} head - text after the opening brace
+ * @returns {{ body: string, li: number }}
+ */
+export function collectBraceBody(lines, li, head) {
+  let body = head;
+  while (body.indexOf('}') === -1 && li + 1 < lines.length) {
+    li++;
+    body += '\n' + lines[li];
+  }
+  return { body: body.slice(0, body.indexOf('}')), li };
+}

package/styles/mermaid.css

@@ -0,0 +1,115 @@
+/* @jarenjs/mermaid — component stylesheet.
+ *
+ * Two things happen here, decoupled from the site's design tokens (sizes
+ * in `em`, like md.css):
+ *
+ * 1. It extends the unscoped `.md-mermaid` placeholder rules from
+ *    `@jarenjs/md`'s md.css (centered block, max-width svg) so a mermaid
+ *    fence rendered inside a Markdown article sits correctly.
+ * 2. It defines a self-scoped `.mermaid` class carrying the `--mm-*`
+ *    token vocabulary (light values plus a `.dark` override) and maps
+ *    each `mm-*` shape class to `var(--mm-*)`. The render pass stamps
+ *    the same variables *inline* on the root `<svg>`, and inline custom
+ *    properties beat these stylesheet blocks — so for pipeline-rendered
+ *    SVGs the stamp decides the colors. Re-theming a live diagram goes
+ *    through the `'host'` theme (`src/theme.js` `HOST_VARS`), whose
+ *    stamped values reference the host's tokens. The token blocks below
+ *    theme class-marked markup that carries no inline stamp, and are the
+ *    reference list of the vocabulary. `toSvgString()` output stays
+ *    standalone-valid via concrete presentation-attribute colors.
+ */
+
+/* --- md-embedded diagrams ----------------------------------------- */
+.md-mermaid.mermaid-block {
+  margin: 0.9em 0;
+  text-align: center;
+  /* A wide diagram scrolls. It must not be scaled to fit: the layout already
+     chose a legible font size, and shrinking the SVG scales that text down
+     with everything else — on a phone a 14px label lands near 11px, which is
+     the whole reason this rule is not `max-width: 100%`. */
+  overflow-x: auto;
+  overscroll-behavior-x: contain;
+}
+.md-mermaid.mermaid-block svg { max-width: none; height: auto; }
+/* Once zoomed the viewBox owns the view, so the element is constrained to the
+   frame and panning has something to pan within. */
+.md-mermaid.mermaid-block.mm-zoomed { overflow: hidden; }
+.md-mermaid.mermaid-block.mm-zoomed svg { max-width: 100%; }
+
+/* --- self-scoped diagram ------------------------------------------ */
+.mermaid {
+  --mm-node-fill: #dbeafe;
+  --mm-node-stroke: #2563eb;
+  --mm-node-text: #1f2020;
+  --mm-line-color: #333333;
+  --mm-edge-label-text: #333333;
+  --mm-edge-label-bg: #ffffff;
+  --mm-cluster-fill: #f1f5f9;
+  --mm-cluster-stroke: #94a3b8;
+  --mm-actor-fill: #dbeafe;
+  --mm-actor-stroke: #2563eb;
+  --mm-actor-text: #1f2020;
+  --mm-lifeline: #999999;
+  --mm-activation-fill: #f4f4f4;
+  --mm-activation-stroke: #666666;
+  --mm-note-fill: #fef3c7;
+  --mm-note-stroke: #d97706;
+  --mm-note-text: #1f2020;
+  --mm-err-fill: #fdf2f2;
+  --mm-err-stroke: #e74c3c;
+  --mm-err-title: #c0392b;
+  --mm-err-text: #7b241c;
+  --mm-err-source: #555555;
+
+  display: block;
+  max-width: 100%;
+  height: auto;
+}
+
+/* Cascade over the render pass's presentation attributes. */
+.mermaid .mm-node-shape { fill: var(--mm-node-fill); stroke: var(--mm-node-stroke); }
+.mermaid .mm-label,
+.mermaid .mm-node text { fill: var(--mm-node-text); }
+.mermaid .mm-edge-line { stroke: var(--mm-line-color); }
+.mermaid .mm-arrowhead { fill: var(--mm-line-color); stroke: var(--mm-line-color); }
+.mermaid .mm-edge-label { fill: var(--mm-edge-label-text); }
+.mermaid .mm-edge-label-bg { fill: var(--mm-edge-label-bg); }
+.mermaid .mm-cluster-rect { fill: var(--mm-cluster-fill); stroke: var(--mm-cluster-stroke); }
+.mermaid .mm-actor rect { fill: var(--mm-actor-fill); stroke: var(--mm-actor-stroke); }
+.mermaid .mm-actor text { fill: var(--mm-actor-text); }
+.mermaid .mm-lifeline { stroke: var(--mm-lifeline); }
+.mermaid .mm-activation { fill: var(--mm-activation-fill); stroke: var(--mm-activation-stroke); }
+.mermaid .mm-note rect { fill: var(--mm-note-fill); stroke: var(--mm-note-stroke); }
+.mermaid .mm-note text { fill: var(--mm-note-text); }
+
+.mermaid.mm-error { font-family: monospace; }
+.mermaid .mm-error-box { fill: var(--mm-err-fill); stroke: var(--mm-err-stroke); }
+.mermaid .mm-error-title { fill: var(--mm-err-title); }
+.mermaid .mm-error-msg { fill: var(--mm-err-text); }
+.mermaid .mm-error-source { fill: var(--mm-err-source); }
+
+/* --- dark scheme --------------------------------------------------- */
+.dark .mermaid, .mermaid.dark {
+  --mm-node-fill: #1f2020;
+  --mm-node-stroke: #81B1DB;
+  --mm-node-text: #f4f4f4;
+  --mm-line-color: #cccccc;
+  --mm-edge-label-text: #e0e0e0;
+  --mm-edge-label-bg: #1f2020;
+  --mm-cluster-fill: #2b2b3a;
+  --mm-cluster-stroke: #6f6f9e;
+  --mm-actor-fill: #252526;
+  --mm-actor-stroke: #81B1DB;
+  --mm-actor-text: #f4f4f4;
+  --mm-lifeline: #8a8a8a;
+  --mm-activation-fill: #31313a;
+  --mm-activation-stroke: #8a8a8a;
+  --mm-note-fill: #3b3b26;
+  --mm-note-stroke: #aaaa33;
+  --mm-note-text: #f4f4f4;
+  --mm-err-fill: #2b1b1b;
+  --mm-err-stroke: #e74c3c;
+  --mm-err-title: #f5827a;
+  --mm-err-text: #f0c9c5;
+  --mm-err-source: #8a8a8a;
+}