zombie-mermaid 2.2.1 → 2.2.2

package/src/index.ts

@@ -37,17 +37,17 @@ export { fromShikiTheme, THEMES, DEFAULTS } from '@zombie-mermaid/core'
 export { parseMermaid } from './parser.ts'
 import {
   resolveCssColors,
-  layoutGraphSync,
-  renderSvg,
   resolveFontSizes,
 } from '@zombie-mermaid/svg-renderer'
-export { renderMermaidASCII, renderMermaidAscii } from './ascii/index.ts'
-export type { AsciiRenderOptions } from './ascii/index.ts'
+export {
+  renderMermaidASCII,
+  renderMermaidAscii,
+} from '@zombie-mermaid/ascii-renderer'
+export type { AsciiRenderOptions } from '@zombie-mermaid/ascii-renderer'
 export { createLayoutCache } from '@zombie-mermaid/svg-renderer'
 export type { LayoutCache } from '@zombie-mermaid/svg-renderer'
 
 import { decodeXML } from 'entities'
-import { parseMermaid } from './parser.ts'
 import type {
   RenderOptions,
   DiagramColors,
@@ -60,17 +60,9 @@ import {
   isMonospaceFont,
   setMonospaceMetrics,
   detectDiagramType,
-  applyInitConfig,
-  withDirectionOverride,
   splitStatements,
 } from '@zombie-mermaid/core'
 
-import { parseSequenceDiagram } from './sequence/parser.ts'
-import { layoutSequenceDiagram } from './sequence/layout.ts'
-import { renderSequenceSvg } from './sequence/renderer.ts'
-import { parseClassDiagram } from './class/parser.ts'
-import { layoutClassDiagramSync } from './class/layout.ts'
-import { renderClassSvg } from './class/renderer.ts'
 import { diagramRegistry } from './diagram-registry.ts'
 import type { SvgRenderContext } from './diagram-registry.ts'
 
@@ -133,42 +125,15 @@ function resolveSvgEmit(options: RenderOptions): SvgEmitOptions {
   }
 }
 
-/**
- * Resolve the effective interactivity level, defaulting unset to `'static'`.
- * See `RenderOptions.interactivity` for what each level means.
- */
-function resolveInteractivity(
-  options: RenderOptions,
-): 'none' | 'static' | 'full' {
-  return options.interactivity ?? 'static'
-}
-
-/**
- * Whether flowchart/state-diagram edge animation (`e1@{ animate: true }`)
- * should render. Gated to `'full'` only — CSS animation is tier-2 *motion*
- * (see docs/decisions/no-script-interactivity.md), so the default
- * (`'static'`, tier 1 + tier 2 minus motion) and `'none'` both render the
- * edge as a still line.
- */
-function resolveAnimationEnabled(options: RenderOptions): boolean {
-  return resolveInteractivity(options) === 'full'
-}
-
-/**
- * Whether flowchart `click`-based links (`<a href>`) and `<title>` tooltips
- * should render. Gated behind `interactivity !== 'none'` — `'none'` is meant
- * for print/rasterized output, where a link is meaningless, so it strips
- * both; `'static'` and `'full'` both keep them.
- */
-function resolveLinksEnabled(options: RenderOptions): boolean {
-  return resolveInteractivity(options) !== 'none'
-}
-
-// Whether xychart hover tooltips should render (`interactivity` wins over
-// the deprecated `interactive` boolean when both are set) now lives next to
-// the xychart registry entry in src/diagram-registry.ts, since xychart's
-// SVG dispatch is fully handled by the registry lookup below — there is no
-// remaining switch case here for it to serve.
+// Interactivity-derived render gates — whether xychart hover tooltips
+// render, whether flowchart/state edge animation (`e1@{ animate: true }`)
+// plays, and whether `click`-based links/`<title>` tooltips render — all
+// now live next to their diagram type's registry entry in
+// src/diagram-registry.ts (`resolveAnimationEnabled`/`resolveLinksEnabled`
+// there, duplicated rather than imported since that module is imported BY
+// this file — see those functions' own comments for why), since every
+// diagram type's SVG dispatch is fully handled by the registry lookup
+// below and there is no remaining switch case here for them to serve.
 
 /**
  * Render Mermaid diagram text to an SVG string — synchronously.
@@ -247,90 +212,28 @@ function renderMermaidSVGRaw(text: string, options: RenderOptions): string {
 
   const lines = splitStatements(decoded)
 
-  // Registry lookup first (see src/diagram-registry.ts — issue #533):
-  // 'xychart' and 'er' are registered there and handled identically to how
-  // their switch cases below used to read, just via the shared adapter
-  // shape instead. Anything not registered (currently 'sequence', 'class',
-  // 'flowchart') falls through to the switch, unchanged.
+  // Registry dispatch (see src/diagram-registry.ts — issue #533 / #745):
+  // every diagram type, including 'flowchart' (and the 'state' pipeline it
+  // shares), is registered there and handled identically to how each
+  // type's original switch case (or, for 'flowchart', its inline fallback)
+  // used to read, just via the shared adapter shape instead. `parse` takes
+  // both `lines` (what every already-registered type's parser wants) and
+  // `decoded` (the raw text flowchart/state's parser needs instead — see
+  // the `parse` doc comment on `DiagramModule`).
   const registered = diagramRegistry[diagramType]
-  if (registered) {
-    const diagram = registered.parse(lines)
-    const positioned = registered.layoutForSvg(diagram, options)
-    const ctx: SvgRenderContext = {
-      colors,
-      font,
-      transparent,
-      fontSizes,
-      embedSource,
-      title,
-      decorative,
-      emit,
-    }
-    return registered.renderSvg(positioned, ctx, options)
-  }
-
-  switch (diagramType) {
-    case 'sequence': {
-      const diagram = parseSequenceDiagram(lines)
-      const positioned = layoutSequenceDiagram(diagram, options)
-      return renderSequenceSvg(
-        positioned,
-        colors,
-        font,
-        transparent,
-        fontSizes,
-        embedSource,
-        title,
-        decorative,
-        emit,
-      )
-    }
-    case 'class': {
-      const diagram = parseClassDiagram(lines)
-      const positioned = layoutClassDiagramSync(diagram, options)
-      return renderClassSvg(
-        positioned,
-        colors,
-        font,
-        transparent,
-        fontSizes,
-        embedSource,
-        title,
-        decorative,
-        resolveLinksEnabled(options),
-        emit,
-      )
-    }
-    case 'flowchart':
-    default: {
-      const parsed = parseMermaid(decoded)
-      // A diagram's own `%%{init: ...}%%` supplies defaults; an explicit
-      // render option always wins. See packages/core/src/init-directive.ts.
-      const effective = parsed.initConfig
-        ? applyInitConfig(options, parsed.initConfig)
-        : options
-      // `direction` replaces the header's (or a state diagram's top-level
-      // `direction` line's) direction before layout; nested subgraph /
-      // composite-state directions live on the subgraph objects and still
-      // apply on top of it. See packages/core/src/direction-override.ts.
-      const graph = withDirectionOverride(parsed, effective.direction)
-      const positioned = layoutGraphSync(graph, effective)
-      return renderSvg(
-        positioned,
-        colors,
-        font,
-        transparent,
-        fontSizes,
-        effective.curve ?? 'linear',
-        embedSource,
-        resolveAnimationEnabled(options),
-        resolveLinksEnabled(options),
-        title,
-        decorative,
-        emit,
-      )
-    }
+  const diagram = registered.parse(lines, decoded)
+  const positioned = registered.layoutForSvg(diagram, options)
+  const ctx: SvgRenderContext = {
+    colors,
+    font,
+    transparent,
+    fontSizes,
+    embedSource,
+    title,
+    decorative,
+    emit,
   }
+  return registered.renderSvg(positioned, ctx, options)
 }
 
 /**

package/src/parser.ts

@@ -2,14 +2,14 @@ import type {
   MermaidGraph,
   MermaidNode,
   MermaidSubgraph,
-  Direction,
   NodeShape,
   EdgeStyle,
+  Statement,
 } from '@zombie-mermaid/core'
 import {
-  isDirection,
+  toDirection,
   normalizeBrTags,
-  splitStatements,
+  splitStatementsByLine,
   extractInitConfig,
   applyClickStatement as applyClickStatementShared,
   parseStyleProps,
@@ -22,8 +22,8 @@ import {
   matchExpandedBlock,
   parseExpandedMeta,
   resolveShapeName,
-} from './expanded-shapes.ts'
-import type { ExpandedNodeMeta } from './expanded-shapes.ts'
+} from '@zombie-mermaid/mermaid-parser'
+import type { ExpandedNodeMeta } from '@zombie-mermaid/mermaid-parser'
 /** Remove a single layer of matching wrapping quotes (`"…"` or `'…'`). */
 function stripWrappingQuotes(s: string): string {
   const t = s.trim()
@@ -48,26 +48,15 @@ function stripWrappingQuotes(s: string): string {
 // that we don't need a grammar generator or full parser combinator.
 // ============================================================================
 
-/**
- * Normalize a regex-captured direction token to a `Direction`.
- *
- * Accepts `string | undefined` because every call site passes a regex
- * capture group value (`match[1]`, typed as possibly-`undefined` under
- * `noUncheckedIndexedAccess`) straight through. Each call site's regex
- * guards the capture with the same `(TD|TB|LR|BT|RL)` alternation
- * (case-insensitively), so the group always participates in the match in
- * practice — but that's a regex-structure guarantee the type checker can't
- * see across the call site. Validating `undefined` here, instead of
- * asserting non-null at each call site, turns a hypothetical violation into
- * a clear, descriptive error rather than a raw `undefined` crash.
- */
-export function toDirection(raw: string | undefined): Direction {
-  const upper = raw?.toUpperCase()
-  if (upper === undefined || !isDirection(upper)) {
-    throw new Error(`Invalid direction: "${raw}"`)
-  }
-  return upper
-}
+// `toDirection` used to be defined here, with this file as its only caller.
+// #624 gave it a second caller — `packages/mermaid-parser/src/er/parser.ts`,
+// which cannot import this umbrella file without creating a cycle
+// (mermaid-parser -> umbrella -> mermaid-parser) — so it moved to
+// `packages/core/src/direction.ts` alongside `isDirection`, for the same
+// reason that one moved under #625. Re-exported here so existing importers
+// of `toDirection` from `./parser.ts` (this file's own tests included) keep
+// working unchanged.
+export { toDirection } from '@zombie-mermaid/core'
 
 /**
  * All diagram-type headers this library recognizes, for the "supported
@@ -103,6 +92,75 @@ function suggestedHeaderFor(header: string): string | undefined {
   return undefined
 }
 
+/**
+ * Matches the start of a statement that continues the *previous* one's edge
+ * chain rather than beginning a new one: Mermaid lets a vertex-chain
+ * statement break across lines, with the link operator leading the next
+ * line — e.g.
+ *
+ *   start([Start])
+ *   ==> green([Change some code])
+ *   ==> finish([Finish])
+ *
+ * is one chained statement (`start ==> green ==> finish`), identical to
+ * writing it on one line. `splitStatementsByLine` only knows about newlines
+ * and `;` as separators, so without this it hands `parseFlowchart` three
+ * unrelated-looking statements — the continuation lines start with a bare
+ * arrow and no node group, so `parseEdgeLine` can't find a source node and
+ * drops them entirely (see issue mermaid-js/mermaid#6049's repro, reported
+ * against this parser).
+ *
+ * Covers every arrow opener `parseEdgeLine` itself recognizes (ARROW_REGEX /
+ * TEXT_ARROW_REGEX below): a solid/thick run (`--`, `===`), a dotted run
+ * (`-.`, `-.-`), a `~~~` run, each optionally preceded by a `<` marker and/or
+ * an edge id (`e1@-->`).
+ *
+ * Deliberately excludes the `o`/`x` start markers ARROW_REGEX also accepts
+ * (`o--o`, `x--x`): unlike `<`, both are also valid bare node ids, so a
+ * first-body-line statement like `x-->Y` would otherwise be misread as an
+ * `x`-marked continuation of the header and merged into it, corrupting the
+ * header line (`flowchart TD x-->Y`) instead of parsing `x` as its own node.
+ * A genuine marked-start continuation line is rare enough that losing it is
+ * the safer tradeoff.
+ */
+const CONTINUATION_START_REGEX = /^(?:[\w-]+@)?<?(?:-{2,}|={2,}|-\.+-?|~{3,})/
+
+/**
+ * Rejoin a continuation statement onto the one it continues.
+ *
+ * `splitStatementsByLine` groups statements by their originating physical
+ * line, which is what makes this safe: only the *first* statement in a
+ * group is eligible to merge backward into the previous group's last
+ * statement (a genuine multi-line continuation, see
+ * `CONTINUATION_START_REGEX`). A later statement in the same group got
+ * there via an explicit `;` on that line (`A --> B; --> C`) — that boundary
+ * must stay a boundary, or `--> C` would wrongly become part of the chain
+ * instead of the source-less fragment it actually is.
+ */
+function mergeContinuationLines(groups: Statement[][]): Statement[] {
+  const merged: Statement[] = []
+  for (const group of groups) {
+    group.forEach((statement, index) => {
+      if (
+        index === 0 &&
+        merged.length > 0 &&
+        CONTINUATION_START_REGEX.test(statement.text)
+      ) {
+        // Keep the *first* line's number: a merged statement is reported at
+        // the line its logical statement began, not the continuation line.
+        const prev = merged[merged.length - 1]!
+        merged[merged.length - 1] = {
+          text: `${prev.text} ${statement.text}`,
+          line: prev.line,
+        }
+      } else {
+        merged.push(statement)
+      }
+    })
+  }
+  return merged
+}
+
 /**
  * Parse Mermaid text into a logical graph structure.
  * Auto-detects diagram type (flowchart or state diagram).
@@ -111,23 +169,23 @@ function suggestedHeaderFor(header: string): string | undefined {
 export function parseMermaid(text: string): MermaidGraph {
   /*
    * Init directives must be read from the raw lines: `%%{init: ...}%%` begins
-   * with `%%`, so splitStatements — which treats `%%` as a comment and
+   * with `%%`, so splitStatementsByLine — which treats `%%` as a comment and
    * truncates the line there — would otherwise discard it along with real
    * comments before it could be seen.
    */
   const initConfig = extractInitConfig(text.split('\n').map((l) => l.trim()))
 
-  const lines = splitStatements(text)
+  const lines = mergeContinuationLines(splitStatementsByLine(text))
 
   if (lines.length === 0) {
     throw new Error('Empty mermaid diagram')
   }
 
   // Detect diagram type from header
-  const header = lines[0]!
+  const headerStmt = lines[0]!
 
   // State diagram: "stateDiagram-v2" or "stateDiagram"
-  const graph = /^stateDiagram(-v2)?\s*$/i.test(header)
+  const graph = /^stateDiagram(-v2)?\s*$/i.test(headerStmt.text)
     ? parseStateDiagram(lines)
     : parseFlowchart(lines)
 
@@ -139,16 +197,17 @@ export function parseMermaid(text: string): MermaidGraph {
 // Flowchart parser
 // ============================================================================
 
-function parseFlowchart(lines: string[]): MermaidGraph {
+function parseFlowchart(lines: Statement[]): MermaidGraph {
   // parseFlowchart is only ever invoked by parseMermaid, which has already
   // verified `lines` is non-empty — but that invariant isn't visible to the
   // type checker across the function boundary, so validate it here instead
   // of asserting past it.
-  const header = lines[0]
-  if (header === undefined) {
+  const headerStmt = lines[0]
+  if (headerStmt === undefined) {
     /* v8 ignore next */
     throw new Error('parseFlowchart called with no lines')
   }
+  const header = headerStmt.text
 
   const headerMatch = header.match(
     /^(?:graph|flowchart)\s+(TD|TB|LR|BT|RL)\s*$/i,
@@ -164,8 +223,8 @@ function parseFlowchart(lines: string[]): MermaidGraph {
       const rest = partialFlowchartMatch[1]!.trim()
       throw new Error(
         rest.length > 0
-          ? `Invalid direction "${rest}" in header "${header}". Expected one of: TD, TB, LR, BT, RL.`
-          : `Missing direction in header "${header}". Expected e.g. "graph TD" or "flowchart LR" — one of: TD, TB, LR, BT, RL.`,
+          ? `Line ${headerStmt.line}: Invalid direction "${rest}" in header "${header}". Expected one of: TD, TB, LR, BT, RL.`
+          : `Line ${headerStmt.line}: Missing direction in header "${header}". Expected e.g. "graph TD" or "flowchart LR" — one of: TD, TB, LR, BT, RL.`,
       )
     }
 
@@ -178,7 +237,7 @@ function parseFlowchart(lines: string[]): MermaidGraph {
         ? ` Did you mean "${suggestion}"?`
         : ''
     throw new Error(
-      `Invalid mermaid header: "${header}".${hint} Supported headers: ${SUPPORTED_HEADERS}.`,
+      `Line ${headerStmt.line}: Invalid mermaid header: "${header}".${hint} Supported headers: ${SUPPORTED_HEADERS}.`,
     )
   }
 
@@ -200,7 +259,8 @@ function parseFlowchart(lines: string[]): MermaidGraph {
   const subgraphStack: MermaidSubgraph[] = []
 
   for (let i = 1; i < lines.length; i++) {
-    const line = lines[i]!
+    const stmt = lines[i]!
+    const line = stmt.text
 
     // --- classDef / class assignment / style — shared with the class-diagram
     // parser, see packages/core/src/style-directives.ts ---
@@ -313,7 +373,7 @@ function parseFlowchart(lines: string[]): MermaidGraph {
 //   }
 // ============================================================================
 
-function parseStateDiagram(lines: string[]): MermaidGraph {
+function parseStateDiagram(lines: Statement[]): MermaidGraph {
   const graph: MermaidGraph = {
     direction: 'TD',
     nodes: new Map(),
@@ -335,7 +395,8 @@ function parseStateDiagram(lines: string[]): MermaidGraph {
   let endCount = 0
 
   for (let i = 1; i < lines.length; i++) {
-    const line = lines[i]!
+    const stmt = lines[i]!
+    const line = stmt.text
 
     // --- direction override ---
     const dirMatch = line.match(/^direction\s+(TD|TB|LR|BT|RL)\s*$/i)
@@ -803,8 +864,9 @@ function expandedNodeLabel(id: string, meta: ExpandedNodeMeta): string {
  * browser without script.
  *
  * The actual grammar and href-safety rules live in packages/core/src/click-directive.ts,
- * shared with the class diagram parser (src/class/parser.ts) — this is a
- * thin wrapper binding it to this parser's `graph.interactions` map.
+ * shared with the class diagram parser
+ * (packages/mermaid-parser/src/class/parser.ts) — this is a thin wrapper
+ * binding it to this parser's `graph.interactions` map.
  */
 function applyClickStatement(line: string, graph: MermaidGraph): void {
   applyClickStatementShared(line, graph.interactions)