@jarenjs/mermaid 0.34.0

package/src/layout/sequence.js

@@ -0,0 +1,178 @@
+//@ts-check
+/**
+ * @file Sequence layout: actor lifeline x-positions, message y-advance,
+ * activation bars, note boxes and nested block frames
+ * (loop/alt/opt/par). Pure and deterministic; emits a host-free
+ * `PositionedDiagram`. Geometry is an approximation over the headless
+ * text metrics (no DOM) — pixel parity is a non-goal.
+ */
+
+import { textWidth } from '@jarenjs/view/helpers';
+import { coord as round } from '../utils.js';
+
+const FONT_SIZE = 14;
+const ACTOR_H = 34;
+const ACTOR_MIN_W = 80;
+const ACTOR_PAD = 20;
+const ACTOR_GAP = 60;
+const TOP = 12;
+const MARGIN = 12;
+const MSG_GAP = 40;
+const SELF_GAP = 52;
+const NOTE_H = 34;
+const NOTE_PAD = 10;
+const ACT_W = 10;
+const BLOCK_LABEL_H = 24;
+const BLOCK_PAD = 12;
+
+/**
+ * @param {any} ast sequence AST
+ * @returns {any} PositionedDiagram
+ */
+export function layoutSequence(ast) {
+  const actors = ast.participants.map((p) => ({
+    id: p.id,
+    label: p.label,
+    kind: p.kind,
+    w: Math.max(ACTOR_MIN_W, textWidth(p.label, FONT_SIZE, 700) + 2 * ACTOR_PAD),
+  }));
+  /** @type {Map<string, any>} */
+  const byId = new Map();
+
+  // Actor centers, left to right.
+  let cursor = MARGIN;
+  for (let i = 0; i < actors.length; i++) {
+    const a = actors[i];
+    a.x = cursor + a.w / 2;
+    a.boxX = cursor;
+    a.boxY = TOP;
+    a.h = ACTOR_H;
+    byId.set(a.id, a);
+    cursor += a.w + ACTOR_GAP;
+  }
+  const width = Math.max(cursor - ACTOR_GAP + MARGIN, ACTOR_MIN_W + 2 * MARGIN);
+
+  const centerOf = (id) => (byId.get(id)?.x ?? MARGIN);
+
+  const messages = [];
+  const notes = [];
+  const activations = [];
+  const blocks = [];
+  /** @type {Map<string, number[]>} activation start-y stack per actor */
+  const actStacks = new Map();
+
+  const state = { y: TOP + ACTOR_H + MSG_GAP };
+
+  const activate = (id) => {
+    if (!actStacks.has(id)) actStacks.set(id, []);
+    actStacks.get(id).push(state.y);
+  };
+  const deactivate = (id) => {
+    const stack = actStacks.get(id);
+    if (stack && stack.length) {
+      const startY = stack.pop();
+      const a = byId.get(id);
+      if (a) activations.push({ x: a.x - ACT_W / 2, y: startY, w: ACT_W, h: Math.max(state.y - startY, MSG_GAP / 2) });
+    }
+  };
+
+  /**
+   * @param {any[]} statements
+   */
+  const walk = (statements) => {
+    for (const stmt of statements) {
+      if (stmt.kind === 'message') {
+        const x1 = centerOf(stmt.from);
+        const x2 = centerOf(stmt.to);
+        if (stmt.activation === 'activate') activate(stmt.to);
+        if (stmt.from === stmt.to) {
+          messages.push({ x1, y: state.y, x2, label: stmt.text, line: stmt.line, head: stmt.head, self: true });
+          state.y += SELF_GAP;
+        }
+        else {
+          messages.push({ x1, y: state.y, x2, label: stmt.text, line: stmt.line, head: stmt.head, self: false });
+          state.y += MSG_GAP;
+        }
+        if (stmt.activation === 'deactivate') deactivate(stmt.from);
+      }
+      else if (stmt.kind === 'note') {
+        const xs = stmt.actors.map(centerOf);
+        const minX = Math.min(...xs);
+        const maxX = Math.max(...xs);
+        const textW = textWidth(stmt.text, FONT_SIZE) + 2 * NOTE_PAD;
+        let x, w;
+        if (stmt.placement === 'over') {
+          const span = maxX - minX;
+          w = Math.max(textW, span + ACTOR_MIN_W);
+          x = (minX + maxX) / 2 - w / 2;
+        }
+        else if (stmt.placement === 'left of') {
+          w = textW; x = minX - w - 10;
+        }
+        else {
+          w = textW; x = maxX + 10;
+        }
+        notes.push({ x, y: state.y, w, h: NOTE_H, text: stmt.text });
+        state.y += NOTE_H + 10;
+      }
+      else if (stmt.kind === 'activate') activate(stmt.actor);
+      else if (stmt.kind === 'deactivate') deactivate(stmt.actor);
+      else if (stmt.kind === 'block') {
+        const startY = state.y;
+        state.y += BLOCK_LABEL_H + BLOCK_PAD;
+        const dividers = [];
+        for (let bi = 0; bi < stmt.branches.length; bi++) {
+          if (bi > 0) {
+            dividers.push({ y: state.y, label: stmt.branches[bi].label });
+            state.y += BLOCK_LABEL_H;
+          }
+          walk(stmt.branches[bi].statements);
+        }
+        state.y += BLOCK_PAD;
+        const bx = MARGIN + 4;
+        blocks.push({
+          x: bx,
+          y: startY,
+          w: width - 2 * bx,
+          h: state.y - startY,
+          label: stmt.branches[0].label,
+          blockType: stmt.blockType,
+          dividers,
+        });
+        state.y += MSG_GAP / 2;
+      }
+    }
+  };
+
+  walk(ast.statements);
+
+  // Close any dangling activations at the bottom.
+  for (const [id, stack] of actStacks) {
+    while (stack.length) {
+      const startY = stack.pop();
+      const a = byId.get(id);
+      if (a) activations.push({ x: a.x - ACT_W / 2, y: startY, w: ACT_W, h: Math.max(state.y - startY, MSG_GAP / 2) });
+    }
+  }
+
+  const lineBottom = state.y + 6;
+  const height = lineBottom + ACTOR_H + MARGIN;
+
+  return {
+    type: 'sequence',
+    width: round(width),
+    height: round(height),
+    fontSize: FONT_SIZE,
+    lineTop: TOP + ACTOR_H,
+    lineBottom: round(lineBottom),
+    actors: actors.map((a) => ({
+      id: a.id, label: a.label, kind: a.kind,
+      x: round(a.x), boxX: round(a.boxX), boxY: a.boxY, w: round(a.w), h: a.h,
+      bottomY: round(lineBottom),
+    })),
+    messages: messages.map((m) => ({ ...m, x1: round(m.x1), x2: round(m.x2), y: round(m.y) })),
+    notes: notes.map((n) => ({ ...n, x: round(n.x), y: round(n.y), w: round(n.w) })),
+    activations: activations.map((a) => ({ x: round(a.x), y: round(a.y), w: a.w, h: round(a.h) })),
+    blocks: blocks.map((b) => ({ ...b, x: round(b.x), y: round(b.y), w: round(b.w), h: round(b.h), dividers: b.dividers.map((d) => ({ y: round(d.y), label: d.label })) })),
+  };
+}

package/src/layout/state.js

@@ -0,0 +1,65 @@
+//@ts-check
+/**
+ * @file State-diagram layout: an ADAPTER, not a second algorithm. The
+ * state AST (states + labeled transitions + `[*]` pseudo-states) maps
+ * onto the flowchart layout's input vocabulary — states as rounded
+ * nodes, transition labels as edge labels, the start/end pseudo-states
+ * as synthetic `statedot`/`doublecircle` nodes — and `layoutFlowchart`
+ * does the ranking, ordering and routing. Same AST → identical
+ * geometry, like every layout in this component.
+ *
+ * Composite states arrive flattened from the parser (the `parent`
+ * field is recorded but not drawn as a cluster in v1 — the honest
+ * limitation lives in MERMAID-FORMAT §6).
+ */
+
+import { layoutFlowchart } from './flowchart.js';
+
+/** Synthetic ids for the `[*]` pseudo-states (never valid state ids
+ * in source, since `[*]` is the only spelling the parser reserves). */
+const START_ID = '__start';
+const END_ID = '__end';
+
+/**
+ * Lay out a state AST through the flowchart engine.
+ * @param {any} ast state AST ({ states, transitions })
+ * @returns {any} PositionedDiagram
+ */
+export function layoutState(ast) {
+  const nodes = [];
+  const edges = [];
+  let hasStart = false;
+  let hasEnd = false;
+
+  for (const t of ast.transitions) {
+    if (t.from === '[*]') hasStart = true;
+    if (t.to === '[*]') hasEnd = true;
+  }
+  if (hasStart) nodes.push({ id: START_ID, label: '', shape: 'statedot' });
+  for (const s of ast.states) {
+    nodes.push({ id: s.id, label: s.label ?? s.id, shape: 'round' });
+  }
+  if (hasEnd) nodes.push({ id: END_ID, label: '', shape: 'doublecircle' });
+
+  for (const t of ast.transitions) {
+    edges.push({
+      from: t.from === '[*]' ? START_ID : t.from,
+      to: t.to === '[*]' ? END_ID : t.to,
+      label: t.label ?? null,
+      stroke: 'solid',
+      head: 'arrow',
+      tail: 'none',
+      length: 2,
+    });
+  }
+
+  return layoutFlowchart({
+    direction: 'TB',
+    nodes,
+    edges,
+    subgraphs: [],
+    classDefs: [],
+    classes: [],
+    styles: [],
+  });
+}

package/src/parser/class.js

@@ -0,0 +1,90 @@
+//@ts-check
+/**
+ * @file Class-diagram grammar → class AST. Supports `class Foo { … }`
+ * bodies, `Foo : +member` line form, and relations
+ * (`<|--`, `*--`, `o--`, `-->`, `..>`, `..|>`) with optional `: label`.
+ * Geometry-free: members and relations preserve declaration order.
+ */
+
+import { collectBraceBody } from '../utils.js';
+
+/** Relation operator between two class names, optional `: label`. */
+const RE_RELATION = /^(\S+)\s+([<>|*o.]{0,2}(?:--|\.\.)[<>|*o.]{0,2})\s+(\S+)(?:\s*:\s*(.*))?$/;
+/** `ClassName : member` line form. */
+const RE_MEMBER_LINE = /^(\S+)\s*:\s*(.+)$/;
+
+/**
+ * @param {string[]} lines
+ * @returns {object}
+ */
+export function parseClass(lines) {
+  /** @type {Map<string, { name: string, label: string, members: object[] }>} */
+  const classMap = new Map();
+  const order = [];
+  const relations = [];
+
+  const ensure = (name) => {
+    let cls = classMap.get(name);
+    if (cls === undefined) {
+      cls = { name, label: name, members: [] };
+      classMap.set(name, cls);
+      order.push(name);
+    }
+    return cls;
+  };
+
+  for (let li = 0; li < lines.length; li++) {
+    let line = lines[li].trim();
+    if (line === '' || line.startsWith('%%')) continue;
+
+    // class Foo { ... } (single or multi-line body)
+    if (line.startsWith('class ')) {
+      const rest = line.slice('class '.length).trim();
+      const brace = rest.indexOf('{');
+      if (brace === -1) { ensure(rest.replace(/[~<].*$/, '').trim()); continue; }
+      const name = rest.slice(0, brace).trim();
+      const cls = ensure(name);
+      // Consume until closing brace across lines.
+      let body;
+      ({ body, li } = collectBraceBody(lines, li, rest.slice(brace + 1)));
+      for (const raw of body.split('\n')) {
+        const mem = raw.trim();
+        if (mem !== '') cls.members.push(member(mem));
+      }
+      continue;
+    }
+
+    const rel = RE_RELATION.exec(line);
+    if (rel !== null) {
+      ensure(rel[1]);
+      ensure(rel[3]);
+      relations.push({ from: rel[1], to: rel[3], type: rel[2], label: rel[4] ? rel[4].trim() : null });
+      continue;
+    }
+
+    const ml = RE_MEMBER_LINE.exec(line);
+    if (ml !== null && !line.startsWith('class')) {
+      ensure(ml[1]).members.push(member(ml[2].trim()));
+      continue;
+    }
+  }
+
+  return { classes: order.map((n) => classMap.get(n)), relations };
+}
+
+/**
+ * Classify a member as a method (has `()`) or attribute, capturing a
+ * leading visibility marker.
+ * @param {string} text
+ * @returns {object}
+ */
+function member(text) {
+  let visibility = null;
+  const first = text.charCodeAt(0);
+  if (first === 0x2b || first === 0x2d || first === 0x23 || first === 0x7e) {
+    visibility = text[0];
+    text = text.slice(1);
+  }
+  const kind = text.indexOf('(') !== -1 ? 'method' : 'attribute';
+  return { kind, visibility, text: text.trim() };
+}

package/src/parser/config.js

@@ -0,0 +1,215 @@
+//@ts-check
+/**
+ * @file Config extraction: the leading `---` front-matter block and any
+ * `%%{init: {...}}%%` directives → a plain-JSON `config` (MERMAID-FORMAT
+ * §3).
+ *
+ * The raw source is never consumed here — this returns the cleaned body
+ * (front-matter, init directives and `%%` comments removed) plus the
+ * merged config and title, and the original source stays in the
+ * Markdown fence `value` so `toMarkdown` round-trips verbatim.
+ *
+ * Front-matter is a YAML subset. The engine may NOT statically import
+ * `@jarenjs/md` (two-layer rule), so a small built-in subset parser is
+ * the default; a host that already has `@jarenjs/md` can inject its
+ * richer `parseFrontmatter` through `options.parseFrontmatter`.
+ */
+
+/** A leading front-matter fence: `---` on its own line at the very top. */
+const FM_OPEN = /^---[ \t]*$/;
+/** An `%%{init: {...}}%%` (or `%%{ init: ... }%%`) directive line. */
+const RE_INIT = /^\s*%%\{\s*(?:init|initialize)\s*:\s*([\s\S]*?)\}%%\s*$/;
+/** A whole-line `%%` comment (but not an `%%{...}%%` directive). */
+const RE_COMMENT = /^\s*%%(?!\{)/;
+
+/**
+ * @typedef {object} MermaidConfigResult
+ * @property {Record<string, any>} config merged config object
+ * @property {string|null} title front-matter `title`, if any
+ * @property {string} body source with front-matter/init/comments stripped
+ */
+
+/**
+ * Extract config + title and return the cleaned diagram body.
+ * @param {string} source
+ * @param {{ parseFrontmatter?: (text: string) => any }} [options]
+ * @returns {MermaidConfigResult}
+ */
+export function parseMermaidConfig(source, options = {}) {
+  const normalized = source.replace(/\r\n?/g, '\n');
+  /** @type {Record<string, any>} */
+  let config = {};
+  let title = null;
+  let rest = normalized;
+
+  // 1. Front-matter: `---` … `---` only when it is the very first line.
+  const firstNl = rest.indexOf('\n');
+  if (firstNl !== -1 && FM_OPEN.test(rest.slice(0, firstNl))) {
+    const closeAt = findFrontmatterClose(rest, firstNl + 1);
+    if (closeAt !== -1) {
+      const fmText = rest.slice(firstNl + 1, closeAt.start);
+      const parsed = options.parseFrontmatter
+        ? safeCall(options.parseFrontmatter, fmText)
+        : parseYamlSubset(fmText);
+      if (parsed && typeof parsed === 'object') {
+        if (typeof parsed.title === 'string') title = parsed.title;
+        if (parsed.config && typeof parsed.config === 'object') {
+          config = mergeConfig(config, parsed.config);
+        }
+      }
+      rest = rest.slice(closeAt.end);
+    }
+  }
+
+  // 2. Init directives + comment stripping, line by line.
+  const lines = rest.split('\n');
+  const out = [];
+  for (let i = 0; i < lines.length; i++) {
+    const line = lines[i];
+    const initMatch = RE_INIT.exec(line);
+    if (initMatch) {
+      const obj = parseLooseObject(initMatch[1]);
+      if (obj && typeof obj === 'object') config = mergeConfig(config, obj);
+      continue;
+    }
+    if (RE_COMMENT.test(line)) continue;
+    out.push(line);
+  }
+
+  return { config, title, body: out.join('\n') };
+}
+
+/**
+ * Find the closing `---` fence starting at `from`.
+ * @param {string} text
+ * @param {number} from
+ * @returns {{ start: number, end: number } | -1}
+ */
+function findFrontmatterClose(text, from) {
+  let pos = from;
+  while (pos < text.length) {
+    let nl = text.indexOf('\n', pos);
+    if (nl === -1) nl = text.length;
+    const line = text.slice(pos, nl);
+    if (FM_OPEN.test(line)) {
+      return { start: pos, end: nl === text.length ? nl : nl + 1 };
+    }
+    pos = nl + 1;
+    if (nl === text.length) break;
+  }
+  return -1;
+}
+
+/**
+ * Parse a small YAML subset: `key: value` and one level of nesting via
+ * two-space indentation. Values are scalars (string/number/bool/null).
+ * Deliberately minimal — the documented default when `@jarenjs/md`'s
+ * parser is not injected.
+ * @param {string} text
+ * @returns {Record<string, any>}
+ */
+export function parseYamlSubset(text) {
+  const lines = text.split('\n');
+  const root = {};
+  /** @type {{ indent: number, obj: Record<string, any> }[]} */
+  const stack = [{ indent: -1, obj: root }];
+  for (let i = 0; i < lines.length; i++) {
+    const raw = lines[i];
+    if (raw.trim() === '' || raw.trim().startsWith('#')) continue;
+    let indent = 0;
+    while (indent < raw.length && raw.charCodeAt(indent) === 0x20) indent++;
+    const colon = raw.indexOf(':', indent);
+    if (colon === -1) continue;
+    const key = raw.slice(indent, colon).trim();
+    const valueText = raw.slice(colon + 1).trim();
+    while (stack.length > 1 && indent <= stack[stack.length - 1].indent) stack.pop();
+    const parent = stack[stack.length - 1].obj;
+    if (valueText === '') {
+      const child = {};
+      parent[key] = child;
+      stack.push({ indent, obj: child });
+    }
+    else {
+      parent[key] = parseScalar(valueText);
+    }
+  }
+  return root;
+}
+
+/**
+ * @param {string} v
+ * @returns {any}
+ */
+function parseScalar(v) {
+  if ((v.startsWith('"') && v.endsWith('"')) || (v.startsWith("'") && v.endsWith("'"))) {
+    return v.slice(1, -1);
+  }
+  if (v === 'true') return true;
+  if (v === 'false') return false;
+  if (v === 'null' || v === '~') return null;
+  if (v !== '' && !Number.isNaN(Number(v))) return Number(v);
+  return v;
+}
+
+/**
+ * Parse the relaxed object inside `%%{init: … }%%`. Tries strict JSON
+ * first, then a light normalization (quote bare keys, single→double
+ * quotes). Returns `null` on failure (config parsing never throws).
+ * @param {string} text
+ * @returns {Record<string, any> | null}
+ */
+export function parseLooseObject(text) {
+  const trimmed = text.trim();
+  const src = trimmed.startsWith('{') ? trimmed : '{' + trimmed + '}';
+  try {
+    return JSON.parse(src);
+  }
+  catch {
+    // fall through to lenient
+  }
+  try {
+    const lenient = src
+      .replace(/'/g, '"')
+      .replace(/([{,]\s*)([A-Za-z_$][\w$]*)(\s*:)/g, '$1"$2"$3');
+    return JSON.parse(lenient);
+  }
+  catch {
+    return null;
+  }
+}
+
+/**
+ * Shallow-merge nested config objects (one level deep for per-type
+ * keys like `flowchart`), returning a fresh object.
+ * @param {Record<string, any>} base
+ * @param {Record<string, any>} extra
+ * @returns {Record<string, any>}
+ */
+function mergeConfig(base, extra) {
+  const out = { ...base };
+  for (const key of Object.keys(extra)) {
+    const value = extra[key];
+    if (value && typeof value === 'object' && !Array.isArray(value)
+      && out[key] && typeof out[key] === 'object' && !Array.isArray(out[key])) {
+      out[key] = { ...out[key], ...value };
+    }
+    else {
+      out[key] = value;
+    }
+  }
+  return out;
+}
+
+/**
+ * @param {(text: string) => any} fn
+ * @param {string} text
+ * @returns {any}
+ */
+function safeCall(fn, text) {
+  try {
+    return fn(text);
+  }
+  catch {
+    return null;
+  }
+}

package/src/parser/er.js

@@ -0,0 +1,86 @@
+//@ts-check
+/**
+ * @file ER-diagram grammar → ER AST. Entity blocks
+ * (`CUSTOMER { string name PK }`) and relationships
+ * (`CUSTOMER ||--o{ ORDER : places`). Cardinality tokens are preserved
+ * verbatim for a faithful, geometry-free model.
+ */
+
+import { collectBraceBody } from '../utils.js';
+
+/** `LEFT <cardl>--<cardr> RIGHT : label` (relationship). */
+const RE_REL = /^(\S+)\s+([|}{o]{1,2})(--|\.\.)([|}{o]{1,2})\s+(\S+)\s*:\s*(.*)$/;
+
+/**
+ * @param {string[]} lines
+ * @returns {object}
+ */
+export function parseEr(lines) {
+  /** @type {Map<string, { name: string, attributes: object[] }>} */
+  const entityMap = new Map();
+  const order = [];
+  const relationships = [];
+
+  const ensure = (name) => {
+    let ent = entityMap.get(name);
+    if (ent === undefined) {
+      ent = { name, attributes: [] };
+      entityMap.set(name, ent);
+      order.push(name);
+    }
+    return ent;
+  };
+
+  for (let li = 0; li < lines.length; li++) {
+    let line = lines[li].trim();
+    if (line === '' || line.startsWith('%%')) continue;
+
+    // Relationships are matched BEFORE the '{' entity-block check: a
+    // cardinality token can itself contain a brace (`CUSTOMER ||--o{ ORDER`),
+    // so `indexOf('{')` alone would misread the relationship as an entity
+    // block. An entity opener (`CUSTOMER {`) has no `--`/`..` connector, so
+    // it can never match RE_REL.
+    const rel = RE_REL.exec(line);
+    if (rel !== null) {
+      ensure(rel[1]);
+      ensure(rel[5]);
+      relationships.push({
+        left: rel[1],
+        right: rel[5],
+        leftCard: rel[2],
+        rightCard: rel[4],
+        identifying: rel[3] === '--',
+        label: rel[6].trim(),
+      });
+      continue;
+    }
+
+    const brace = line.indexOf('{');
+    if (brace !== -1) {
+      const name = line.slice(0, brace).trim();
+      const ent = ensure(name);
+      let body;
+      ({ body, li } = collectBraceBody(lines, li, line.slice(brace + 1)));
+      for (const raw of body.split('\n')) {
+        const attr = raw.trim();
+        if (attr === '') continue;
+        const parts = attr.split(/\s+/);
+        entityAttr(ent, parts);
+      }
+      continue;
+    }
+  }
+
+  return { entities: order.map((n) => entityMap.get(n)), relationships };
+}
+
+/**
+ * @param {{ attributes: object[] }} ent
+ * @param {string[]} parts `[type, name, key?, "comment"?]`
+ */
+function entityAttr(ent, parts) {
+  const type = parts[0] ?? '';
+  const name = parts[1] ?? '';
+  const keys = parts.slice(2).filter((p) => p === 'PK' || p === 'FK' || p === 'UK');
+  ent.attributes.push({ type, name, keys });
+}