zombie-mermaid 2.2.1 → 2.2.2

package/src/__tests__/xychart-parser-errors.test.ts

@@ -0,0 +1,95 @@
+/**
+ * Error-message quality tests for the xychart-beta parser (issue #541).
+ *
+ * Before this pass, `parseXYChart` had zero `throw`/`Error` statements in
+ * the entire file (see docs/parser-error-audit-541.md): every malformed
+ * line — an unclosed bracket, a non-numeric value inside a numeric series —
+ * was silently dropped or silently coerced to `NaN`, producing a diagram
+ * that was missing content or subtly corrupted with no indication why.
+ * These tests assert the parser now throws an actionable error instead.
+ */
+import { describe, it, expect } from 'vitest'
+import { parseXYChart as parseXYChartStatements } from '@zombie-mermaid/mermaid-parser'
+import { splitStatements } from '@zombie-mermaid/core'
+
+/** Helper to parse — preprocesses text the same way index.ts does */
+function parseXYChart(sourceLines: string[]) {
+  return parseXYChartStatements(splitStatements(sourceLines.join('\n')))
+}
+
+describe('parseXYChart – non-numeric series data', () => {
+  it('throws on a non-numeric value in a bar series', () => {
+    expect(() =>
+      parseXYChart(['xychart-beta', 'x-axis [a, b, c]', 'bar [1, two, 3]']),
+    ).toThrow(/Invalid numeric value "two"/)
+  })
+
+  it('throws on a quoted non-numeric value in a bar series', () => {
+    expect(() =>
+      parseXYChart(['xychart-beta', 'x-axis [a, b, c]', 'bar [1, "two", 3]']),
+    ).toThrow(/Invalid numeric value/)
+  })
+
+  it('throws on a non-numeric value in a line series', () => {
+    expect(() =>
+      parseXYChart(['xychart-beta', 'x-axis [a, b]', 'line [10, oops]']),
+    ).toThrow(/Invalid numeric value "oops"/)
+  })
+
+  it('reports the 1-based position of the bad value', () => {
+    expect(() =>
+      parseXYChart(['xychart-beta', 'bar [1, 2, three, 4]']),
+    ).toThrow(/position 3/)
+  })
+
+  it('throws on an empty element from a stray comma', () => {
+    expect(() => parseXYChart(['xychart-beta', 'bar [1, , 3]'])).toThrow(
+      /Invalid numeric value ""/,
+    )
+  })
+
+  it('still parses a fully numeric series without throwing', () => {
+    expect(() =>
+      parseXYChart(['xychart-beta', 'x-axis [a, b, c]', 'bar [1, 2, 3]']),
+    ).not.toThrow()
+  })
+})
+
+describe('parseXYChart – malformed directives', () => {
+  it('throws on an unclosed x-axis bracket', () => {
+    expect(() =>
+      parseXYChart(['xychart-beta', 'x-axis [a, b, c', 'bar [1, 2, 3]']),
+    ).toThrow(/Malformed xychart-beta "x-axis" directive/)
+  })
+
+  it('throws on an unclosed bar bracket', () => {
+    expect(() => parseXYChart(['xychart-beta', 'bar [1, 2, 3'])).toThrow(
+      /Malformed xychart-beta "bar" directive/,
+    )
+  })
+
+  it('throws on an unclosed line bracket', () => {
+    expect(() => parseXYChart(['xychart-beta', 'line [1, 2, 3'])).toThrow(
+      /Malformed xychart-beta "line" directive/,
+    )
+  })
+
+  it('throws on a title-only x-axis (unsupported form)', () => {
+    expect(() =>
+      parseXYChart(['xychart-beta', 'x-axis "Just a title"']),
+    ).toThrow(/Malformed xychart-beta "x-axis" directive/)
+  })
+
+  it('throws on an unquoted title', () => {
+    expect(() =>
+      parseXYChart(['xychart-beta', 'title Unquoted Title']),
+    ).toThrow(/Malformed xychart-beta "title" directive/)
+  })
+
+  it('does not throw on an unrecognized line with no known keyword', () => {
+    // Unchanged behavior: a line that doesn't even attempt one of the five
+    // known directives still falls through silently — only a recognized
+    // keyword with broken syntax is now an error.
+    expect(() => parseXYChart(['xychart-beta', '###nonsense###'])).not.toThrow()
+  })
+})

package/src/browser.ts

@@ -9,9 +9,15 @@
 // ============================================================================
 
 import { renderMermaidSVGAsync } from './index.ts'
-import { renderMermaidASCII, diagramColorsToAsciiTheme } from './ascii/index.ts'
+import {
+  renderMermaidASCII,
+  diagramColorsToAsciiTheme,
+} from '@zombie-mermaid/ascii-renderer'
 import { THEMES, isWideChar } from '@zombie-mermaid/core'
-import { getSeriesColor, CHART_ACCENT_FALLBACK } from './xychart/colors.ts'
+import {
+  getSeriesColor,
+  CHART_ACCENT_FALLBACK,
+} from '@zombie-mermaid/mermaid-parser'
 
 export interface MermaidBrowserGlobal {
   renderMermaidSVGAsync: typeof renderMermaidSVGAsync

package/src/cli/mcp.ts

@@ -15,7 +15,7 @@
 
 import { StdioServerTransport } from '@modelcontextprotocol/sdk/server/stdio.js'
 import type { McpServer } from '@modelcontextprotocol/sdk/server/mcp.js'
-import { createMcpServer } from '../mcp/index.ts'
+import { createMcpServer } from '@zombie-mermaid/mcp'
 
 /**
  * Execute the `mcp` command: start the MCP server on stdio and resolve once

package/src/cli/render.ts

@@ -2,15 +2,15 @@ import { access, readFile, writeFile } from 'node:fs/promises'
 import {
   renderMermaidASCII,
   diagramColorsToAsciiTheme,
-} from '../ascii/index.ts'
-import type { AsciiRenderOptions } from '../ascii/index.ts'
-import { displayWidth } from '../ascii/display-width.ts'
-import { stripOsc8 } from '../ascii/hyperlinks.ts'
+} from '@zombie-mermaid/ascii-renderer'
+import type { AsciiRenderOptions } from '@zombie-mermaid/ascii-renderer'
+import { displayWidth } from '../../packages/ascii-renderer/src/display-width.ts'
+import { stripOsc8 } from '../../packages/ascii-renderer/src/hyperlinks.ts'
 import {
   DEFAULT_PADDING_X,
   DEFAULT_PADDING_Y,
   DEFAULT_BOX_BORDER_PADDING,
-} from '../ascii/types.ts'
+} from '../../packages/ascii-renderer/src/types.ts'
 import { renderMermaidSVG } from '../index.ts'
 import type { RenderOptions, DiagramColors } from '@zombie-mermaid/core'
 import { THEMES } from '@zombie-mermaid/core'
@@ -249,11 +249,15 @@ export async function runRender(
       }
     }
 
-    if (asciiFile !== undefined) {
-      await writeOutputFile(asciiFile, ascii + '\n', args.force)
-    } else {
-      out.write(ascii + '\n')
-    }
+    // ASCII has no "skip" destination (the `if (args.ascii)` guard above
+    // already covers "not requested") — it goes to stdout whenever no file
+    // was resolved for it, so "going to stdout" is simply "no ascii file".
+    await emit(
+      resolveTarget(asciiFile === undefined, asciiFile),
+      ascii + '\n',
+      out,
+      args.force,
+    )
   }
 
   if (args.svg) {
@@ -263,22 +267,14 @@ export async function runRender(
     }
     if (args.direction !== undefined) svgOpts.direction = args.direction
     const svg = renderMermaidSVG(text, svgOpts)
-    if (svgToStdout) {
-      out.write(svg)
-    } else if (svgFile !== undefined) {
-      await writeOutputFile(svgFile, svg, args.force)
-    }
+    await emit(resolveTarget(svgToStdout, svgFile), svg, out, args.force)
   }
 
   if (args.html) {
     const svg = renderMermaidSVG(text, themeColors ?? {})
     const title = args.input ? parsePath(args.input).name : undefined
     const html = buildHtmlViewer({ svg, title })
-    if (htmlToStdout) {
-      out.write(html)
-    } else if (htmlFile !== undefined) {
-      await writeOutputFile(htmlFile, html, args.force)
-    }
+    await emit(resolveTarget(htmlToStdout, htmlFile), html, out, args.force)
   }
 
   if (args.png) {
@@ -290,11 +286,7 @@ export async function runRender(
     if (args.direction !== undefined) svgOpts.direction = args.direction
     const svg = renderMermaidSVG(text, svgOpts)
     const png = await renderPng(svg)
-    if (pngToStdout) {
-      out.write(png)
-    } else if (pngFile !== undefined) {
-      await writeOutputFile(pngFile, png, args.force)
-    }
+    await emit(resolveTarget(pngToStdout, pngFile), png, out, args.force)
   }
 }
 
@@ -302,6 +294,48 @@ export async function runRender(
 // Helpers
 // ============================================================================
 
+/**
+ * Where one rendered format's output goes. Every format in `runRender`
+ * (ascii/svg/html/png) reduces to the same three-way choice — stdout, a
+ * named file, or nowhere — so the decision is made once here instead of
+ * being re-derived per format.
+ */
+type OutputTarget =
+  { kind: 'stdout' } | { kind: 'file'; path: string } | { kind: 'skip' }
+
+/**
+ * Decide a format's output target: stdout when `toStdout`, else the given
+ * `file` path when one was resolved for it, else skip (the format wasn't
+ * requested to go anywhere — see each call site's precomputed booleans).
+ */
+function resolveTarget(
+  toStdout: boolean,
+  file: string | undefined,
+): OutputTarget {
+  if (toStdout) return { kind: 'stdout' }
+  if (file !== undefined) return { kind: 'file', path: file }
+  return { kind: 'skip' }
+}
+
+/** Write `content` to the resolved `target`, or do nothing for `'skip'`. */
+async function emit(
+  target: OutputTarget,
+  content: string | Uint8Array,
+  out: Writable,
+  force: boolean,
+): Promise<void> {
+  switch (target.kind) {
+    case 'stdout':
+      out.write(content)
+      break
+    case 'file':
+      await writeOutputFile(target.path, content, force)
+      break
+    case 'skip':
+      break
+  }
+}
+
 function overwriteRefusal(path: string): Error {
   return new Error(
     `Refusing to overwrite existing file "${path}" — pass --force to replace it`,

package/src/cli/web.ts

@@ -12,7 +12,7 @@
 
 import { createServer } from 'node:http'
 import type { IncomingMessage, Server, ServerResponse } from 'node:http'
-import { renderMermaidASCII } from '../ascii/index.ts'
+import { renderMermaidASCII } from '@zombie-mermaid/ascii-renderer'
 import { renderMermaidSVG } from '../index.ts'
 import type { WebArgs } from './parse-args.ts'
 

package/src/diagram-registry.ts

@@ -11,13 +11,15 @@
 // imported back out of here, a cycle that blocks the monorepo split and
 // already dragged `elkjs` into `dist/ascii.js`).
 //
-// Only 'xychart' and 'er' are registered here. Those two are the only
-// diagram types whose existing renderer signatures adapt to a shared shape
-// with zero behavior change — see the issue-533 scoping doc (in the PR/
-// issue body) for why 'sequence', 'class', and 'flowchart' are NOT
-// registered yet and what would need to change first. The front door
-// checks this table first; anything absent falls through to its own
-// switch, completely unchanged.
+// Every diagram type is registered here, including 'flowchart' — see
+// docs/decisions/diagram-type-registry-partial.md for why it was the last
+// holdout (its ASCII path had no per-type wrapper function to slot in until
+// #745 extracted `renderFlowchartAscii`, and its SVG path carries
+// `%%{init: ...}%%` directive handling no other type has — see
+// `flowchartModule.layoutForSvg` below for how that's folded in without
+// growing `SvgRenderContext`). The front door (`renderMermaidSVGRaw` in
+// src/index.ts) has no fallback switch left; every `DiagramType` is a hit
+// here.
 //
 // `packages/core/src/diagram-type.ts` (the `DiagramType` union + `detectDiagramType`)
 // stays exactly as-is and is what the front doors use to key into this
@@ -29,19 +31,43 @@ import type {
   RenderOptions,
   DiagramColors,
   SvgEmitOptions,
+  MermaidGraph,
+  PositionedGraph,
+  CurveStyle,
+  Statement,
 } from '@zombie-mermaid/core'
 import type { FontSizes } from '@zombie-mermaid/svg-renderer'
 import { withDirectionOverride } from '@zombie-mermaid/core'
 
-import { parseXYChart } from './xychart/parser.ts'
-import { layoutXYChart } from './xychart/layout.ts'
-import { renderXYChartSvg } from './xychart/renderer.ts'
-import type { XYChart, PositionedXYChart } from './xychart/types.ts'
-
-import { parseErDiagram } from './er/parser.ts'
-import { layoutErDiagramSync } from './er/layout.ts'
-import { renderErSvg } from './er/renderer.ts'
-import type { ErDiagram, PositionedErDiagram } from './er/types.ts'
+import {
+  parseXYChart,
+  parseErDiagram,
+  parseSequenceDiagram,
+  parseClassDiagram,
+} from '@zombie-mermaid/mermaid-parser'
+import type {
+  XYChart,
+  PositionedXYChart,
+  ErDiagram,
+  PositionedErDiagram,
+  SequenceDiagram,
+  PositionedSequenceDiagram,
+  ClassDiagram,
+  PositionedClassDiagram,
+} from '@zombie-mermaid/mermaid-parser'
+import {
+  layoutXYChart,
+  renderXYChartSvg,
+  layoutErDiagramSync,
+  renderErSvg,
+  layoutSequenceDiagram,
+  renderSequenceSvg,
+  layoutClassDiagramSync,
+  renderClassSvg,
+  layoutGraphSync,
+  renderSvg as renderFlowchartSvg,
+} from '@zombie-mermaid/svg-renderer'
+import { parseMermaid } from './parser.ts'
 
 /**
  * Parameters shared by every per-type SVG renderer today, factored out of
@@ -85,10 +111,23 @@ export interface SvgRenderContext {
  * parse itself from raw text — which is why the ASCII entries live in
  * src/ascii/registry.ts as plain `(text, …) => string` functions instead of
  * a `renderAscii` method on this interface.
+ *
+ * `parse` takes both `lines` (the pre-split statement list from
+ * `splitStatements(decoded)`, computed once by the front door — what every
+ * already-registered type's parser wants) and `text` (the raw, un-split
+ * source `flowchartModule` below needs instead): `parseMermaid`'s
+ * `%%{init: ...}%%` directive extraction reads raw, un-commented lines that
+ * `splitStatements` has already discarded by the time `lines` exists, and
+ * its multi-line-statement continuation merging needs each statement's
+ * *originating physical line* grouping, which `splitStatements`'s flattened
+ * array has already lost. `xychartModule`/`erModule`/`sequenceModule`/
+ * `classModule` all ignore the second parameter — JS/TS functions may take
+ * fewer parameters than their declared type allows, so `parse: parseXYChart`
+ * (etc.) is unchanged from before this parameter was added.
  */
 export interface DiagramModule<TDiagram = unknown, TPositioned = unknown> {
   readonly type: DiagramType
-  parse(lines: string[]): TDiagram
+  parse(lines: Statement[], text: string): TDiagram
   layoutForSvg(diagram: TDiagram, options: RenderOptions): TPositioned
   renderSvg(
     positioned: TPositioned,
@@ -123,6 +162,69 @@ const xychartModule: DiagramModule<XYChart, PositionedXYChart> = {
   },
 }
 
+const sequenceModule: DiagramModule<
+  SequenceDiagram,
+  PositionedSequenceDiagram
+> = {
+  type: 'sequence',
+  parse: parseSequenceDiagram,
+  layoutForSvg: layoutSequenceDiagram,
+  renderSvg(positioned, ctx) {
+    return renderSequenceSvg(
+      positioned,
+      ctx.colors,
+      ctx.font,
+      ctx.transparent,
+      ctx.fontSizes,
+      ctx.embedSource,
+      ctx.title,
+      ctx.decorative,
+      ctx.emit,
+    )
+  },
+}
+
+/**
+ * Mirrors `resolveLinksEnabled()` in src/index.ts exactly (`interactivity`
+ * defaults unset to `'static'`; only `'none'` turns links off) — duplicated
+ * here rather than imported since that helper is private to src/index.ts and
+ * this module is imported BY src/index.ts, so importing it back would cycle.
+ */
+function resolveLinksEnabled(options: RenderOptions): boolean {
+  const interactivity = options.interactivity ?? 'static'
+  return interactivity !== 'none'
+}
+
+/**
+ * Mirrors `resolveAnimationEnabled()` in src/index.ts exactly (`interactivity`
+ * defaults unset to `'static'`; only `'full'` turns animation on) — duplicated
+ * here for the same import-direction reason `resolveLinksEnabled` above is.
+ */
+function resolveAnimationEnabled(options: RenderOptions): boolean {
+  const interactivity = options.interactivity ?? 'static'
+  return interactivity === 'full'
+}
+
+const classModule: DiagramModule<ClassDiagram, PositionedClassDiagram> = {
+  type: 'class',
+  parse: parseClassDiagram,
+  layoutForSvg: layoutClassDiagramSync,
+  renderSvg(positioned, ctx, options) {
+    return renderClassSvg(
+      positioned,
+      ctx.colors,
+      ctx.font,
+      ctx.transparent,
+      ctx.fontSizes,
+      ctx.embedSource,
+      ctx.title,
+      ctx.decorative,
+      resolveLinksEnabled(options),
+      ctx.emit,
+    )
+  },
+}
+
 const erModule: DiagramModule<ErDiagram, PositionedErDiagram> = {
   type: 'er',
   parse: parseErDiagram,
@@ -151,16 +253,76 @@ const erModule: DiagramModule<ErDiagram, PositionedErDiagram> = {
 }
 
 /**
- * The registry proper. Only diagram types listed here are looked up by the
- * SVG front door; anything absent (currently 'sequence', 'class',
- * 'flowchart') falls through to that front door's own switch, unchanged.
- * The ASCII front door's equivalent table is `asciiRegistry` in
- * src/ascii/registry.ts.
+ * `renderSvg`'s (the low-level flowchart/state SVG emitter, imported above
+ * as `renderFlowchartSvg`) `curve` parameter is the one piece of
+ * `SvgRenderContext`-adjacent state no other registered type needs: a
+ * `%%{init: {"flowchart": {"curve": ...}}}%%` directive on the diagram
+ * itself can supply a default, and `options.curve` always wins when set —
+ * see `applyInitConfig()` in packages/core/src/init-directive.ts, which
+ * `src/index.ts`'s pre-registry flowchart path used to call directly.
+ *
+ * That resolution needs the parsed diagram (for `initConfig`) AND the
+ * caller's `options` together, and the *result* is only needed later, by
+ * `renderSvg` — so rather than teach `SvgRenderContext` a diagram-specific
+ * `curve` field (every other field there is genuinely shared across types),
+ * `layoutForSvg` below resolves it once and carries it forward on
+ * `PositionedFlowchart`, right next to the `PositionedGraph` it was
+ * resolved alongside. `animationEnabled`/`linksEnabled` need no such
+ * carry-through: both derive from `options` alone via the
+ * `resolveAnimationEnabled`/`resolveLinksEnabled` helpers above, exactly
+ * like `class`'s `linksEnabled` already does, so `flowchartModule.renderSvg`
+ * just calls them directly.
+ */
+export interface PositionedFlowchart {
+  graph: PositionedGraph
+  curve: CurveStyle
+}
+
+const flowchartModule: DiagramModule<MermaidGraph, PositionedFlowchart> = {
+  type: 'flowchart',
+  // Ignores `lines` — see the `parse` doc comment on `DiagramModule` above
+  // for why flowchart/state needs the raw `text` instead.
+  parse: (_lines, text) => parseMermaid(text),
+  layoutForSvg(diagram, options) {
+    // Same order as src/index.ts's original fallback: direction override,
+    // then layout. `options.curve` wins over the diagram's own
+    // `%%{init: ...}%%` directive, which wins over the 'linear' default —
+    // see the doc comment on `PositionedFlowchart` above.
+    const graph = withDirectionOverride(diagram, options.direction)
+    return {
+      graph: layoutGraphSync(graph, options),
+      curve: options.curve ?? diagram.initConfig?.curve ?? 'linear',
+    }
+  },
+  renderSvg(positioned, ctx, options) {
+    return renderFlowchartSvg(
+      positioned.graph,
+      ctx.colors,
+      ctx.font,
+      ctx.transparent,
+      ctx.fontSizes,
+      positioned.curve,
+      ctx.embedSource,
+      resolveAnimationEnabled(options),
+      resolveLinksEnabled(options),
+      ctx.title,
+      ctx.decorative,
+      ctx.emit,
+    )
+  },
+}
+
+/**
+ * The registry proper — every `DiagramType` is looked up here by the SVG
+ * front door (`renderMermaidSVGRaw` in src/index.ts), which has no
+ * fallback switch left. The ASCII front door's equivalent table is
+ * `asciiRegistry` in src/ascii/registry.ts.
  *
  * Typed with `any` type parameters at the map level: each entry's own
  * `TDiagram`/`TPositioned` are only known inside that entry's own closure
- * (see `xychartModule`/`erModule` above, which are fully typed); the map
- * just needs one consistent shape to hold heterogeneous entries in.
+ * (see `xychartModule`/`erModule`/`flowchartModule` above, which are fully
+ * typed); the map just needs one consistent shape to hold heterogeneous
+ * entries in.
  */
 type AnyDiagramModule = DiagramModule<
   // eslint-disable-next-line @typescript-eslint/no-explicit-any -- see comment above; each entry is fully typed at its own definition site.
@@ -169,7 +331,10 @@ type AnyDiagramModule = DiagramModule<
   any
 >
 
-export const diagramRegistry: Partial<Record<DiagramType, AnyDiagramModule>> = {
+export const diagramRegistry: Record<DiagramType, AnyDiagramModule> = {
   xychart: xychartModule,
   er: erModule,
+  sequence: sequenceModule,
+  class: classModule,
+  flowchart: flowchartModule,
 }