@zombie-mermaid/svg-renderer 3.1.0 → 3.2.0

package/src/registry.ts

@@ -54,6 +54,9 @@ import {
   parseErDiagram,
   parseSequenceDiagram,
   parseClassDiagram,
+  parseArchitecture,
+  architectureToGraph,
+  parseC4Diagram,
 } from '@zombie-mermaid/mermaid-parser'
 import type {
   XYChart,
@@ -64,6 +67,9 @@ import type {
   PositionedSequenceDiagram,
   ClassDiagram,
   PositionedClassDiagram,
+  ArchitectureDiagram,
+  C4Diagram,
+  PositionedC4Diagram,
 } from '@zombie-mermaid/mermaid-parser'
 import { layoutXYChart } from './xychart/layout.ts'
 import { renderXYChartSvg } from './xychart/renderer.ts'
@@ -73,6 +79,8 @@ import { layoutSequenceDiagram } from './sequence/layout.ts'
 import { renderSequenceSvg } from './sequence/renderer.ts'
 import { layoutClassDiagramSync } from './class/layout.ts'
 import { renderClassSvg } from './class/renderer.ts'
+import { layoutC4DiagramSync } from './c4/layout.ts'
+import { renderC4Svg } from './c4/renderer.ts'
 import { layoutGraphSync } from './layout-engine.ts'
 import { renderSvg as renderFlowchartSvg } from './renderer.ts'
 import { parseMermaid } from '../../../src/parser.ts'
@@ -323,6 +331,55 @@ const flowchartModule: DiagramModule<MermaidGraph, PositionedFlowchart> = {
   },
 }
 
+const c4Module: DiagramModule<C4Diagram, PositionedC4Diagram> = {
+  type: 'c4',
+  parse: parseC4Diagram,
+  // Mermaid's C4 renderer has no direction: shapes are placed in rows in
+  // declaration order, so `options.direction` does not apply to the SVG.
+  layoutForSvg(diagram, options) {
+    return layoutC4DiagramSync(diagram, options)
+  },
+  renderSvg(positioned, ctx) {
+    return renderC4Svg(
+      positioned,
+      ctx.colors,
+      ctx.font,
+      ctx.transparent,
+      ctx.fontSizes,
+      ctx.embedSource,
+      ctx.title,
+      ctx.decorative,
+      ctx.emit,
+    )
+  },
+}
+
+/**
+ * Architecture diagrams are lowered to the flowchart model
+ * (`architectureToGraph` in `@zombie-mermaid/mermaid-parser`) and ride the
+ * flowchart layout + renderer, so this module is `flowchartModule` with a
+ * different `parse`. The lowered graph carries no `%%{init}%%` config, so
+ * `curve` is `options.curve` or 'linear'.
+ */
+const architectureModule: DiagramModule<
+  ArchitectureDiagram,
+  PositionedFlowchart
+> = {
+  type: 'architecture',
+  parse: parseArchitecture,
+  layoutForSvg(diagram, options) {
+    const graph = withDirectionOverride(
+      architectureToGraph(diagram),
+      options.direction,
+    )
+    return {
+      graph: layoutGraphSync(graph, options),
+      curve: options.curve ?? 'linear',
+    }
+  },
+  renderSvg: flowchartModule.renderSvg,
+}
+
 /**
  * The registry proper — every `DiagramType` is looked up here by the SVG
  * front door (`renderMermaidSVG` in ./index.ts), which has no fallback
@@ -348,4 +405,7 @@ export const diagramRegistry: Record<DiagramType, AnyDiagramModule> = {
   sequence: sequenceModule,
   class: classModule,
   flowchart: flowchartModule,
+  architecture: architectureModule,
+
+  c4: c4Module,
 }

package/src/xychart/layout.ts

@@ -82,13 +82,10 @@ function layoutVertical(chart: XYChart): PositionedXYChart {
     throw new Error('XY chart: y-axis range was not set by the parser')
   }
   const yTicks = niceTickValues(yRange.min, yRange.max)
+  const yLabels = formatTickLabels(yTicks)
   const maxYLabelWidth = Math.max(
-    ...yTicks.map((v) =>
-      estimateTextWidth(
-        formatTickValue(v),
-        XY.axisLabelFontSize,
-        XY.axisLabelFontWeight,
-      ),
+    ...yLabels.map((label) =>
+      estimateTextWidth(label, XY.axisLabelFontSize, XY.axisLabelFontWeight),
     ),
     XY.yLabelWidth,
   )
@@ -127,8 +124,8 @@ function layoutVertical(chart: XYChart): PositionedXYChart {
   const xTicks = buildXTicks(chart, xScale, top + plotH, bandWidth)
 
   // Y-axis ticks
-  const yAxisTicks: AxisTick[] = yTicks.map((v) => ({
-    label: formatTickValue(v),
+  const yAxisTicks: AxisTick[] = yTicks.map((v, i) => ({
+    label: yLabels[i]!,
     x: left,
     y: yScale(v),
     tx: left - XY.tickLength,
@@ -251,6 +248,7 @@ function layoutHorizontal(chart: XYChart): PositionedXYChart {
     throw new Error('XY chart: y-axis range was not set by the parser')
   }
   const valueTicks = niceTickValues(yRange.min, yRange.max)
+  const valueLabels = formatTickLabels(valueTicks)
 
   // Compute category label widths for left margin
   const dataCount = getDataCount(chart)
@@ -293,8 +291,8 @@ function layoutHorizontal(chart: XYChart): PositionedXYChart {
   const catScale = (i: number) => top + (i + 0.5) * bandHeight
 
   // X-axis (bottom): value ticks
-  const xTicks: AxisTick[] = valueTicks.map((v) => ({
-    label: formatTickValue(v),
+  const xTicks: AxisTick[] = valueTicks.map((v, i) => ({
+    label: valueLabels[i]!,
     x: valueScale(v),
     y: top + plotH,
     tx: valueScale(v),
@@ -606,7 +604,7 @@ function layoutLines(
 }
 
 /** Generate "nice" tick values for a numeric range */
-function niceTickValues(min: number, max: number): number[] {
+export function niceTickValues(min: number, max: number): number[] {
   const range = max - min
   if (range <= 0) return [min]
 
@@ -628,6 +626,24 @@ function niceTickValues(min: number, max: number): number[] {
   return ticks
 }
 
+/**
+ * Format a set of evenly-spaced tick values with enough decimal places to
+ * keep every label distinct. Precision comes from the tick step, not the
+ * magnitude of the value: a 0.5 step around 100 needs one decimal, or
+ * 99.5 and 100.5 both collapse into neighbouring whole numbers.
+ */
+export function formatTickLabels(ticks: number[]): string[] {
+  const step = ticks.length > 1 ? Math.abs(ticks[1]! - ticks[0]!) : 0
+  // The -1e-9 keeps an exact power-of-ten step (0.1) from rounding up
+  const decimals =
+    step > 0 && step < 1 ? Math.ceil(-Math.log10(step) - 1e-9) : 0
+  return ticks.map((v) =>
+    Number.isInteger(v) && decimals === 0
+      ? String(v)
+      : String(Number(v.toFixed(decimals))),
+  )
+}
+
 function formatTickValue(v: number): string {
   if (Number.isInteger(v)) return String(v)
   // Limit decimal places

package/src/xychart/renderer.ts

@@ -506,17 +506,21 @@ function roundedRightBarPath(
 }
 
 // ============================================================================
-// Smooth line interpolation — Natural cubic spline
+// Smooth line interpolation — monotone cubic (Fritsch-Carlson / PCHIP)
 //
-// Computes the mathematically smoothest curve through all data points by
-// minimizing total curvature (integrated second derivative). Treats y as a
-// function of x, so the curve can never go backwards.
+// A natural cubic spline is smooth but not shape-preserving: near a sharp
+// spike it overshoots the data, drawing a peak above the maximum or a dip
+// below the minimum (even below a zero baseline). Monotone cubic
+// interpolation keeps each segment monotone between its two points and puts a
+// flat tangent at every local extremum, so the curve never leaves the range of
+// the data. y is treated as a function of x, so the curve never goes backwards.
 //
-// Algorithm: tridiagonal system for second derivatives (Thomas algorithm),
-// then convert each cubic segment to SVG cubic Bezier commands.
+// Each cubic segment is converted to an SVG cubic Bezier command.
 // ============================================================================
 
-function smoothCurvePath(points: Array<{ x: number; y: number }>): string {
+export function smoothCurvePath(
+  points: Array<{ x: number; y: number }>,
+): string {
   if (points.length === 0) return ''
   if (points.length === 1) return `M${r(points[0]!.x)},${r(points[0]!.y)}`
   if (points.length === 2) {
@@ -526,12 +530,10 @@ function smoothCurvePath(points: Array<{ x: number; y: number }>): string {
   const n = points.length
 
   // From here on, n >= 3 (the n <= 2 cases returned above). Every index used
-  // below — including offsets like i-1/i+1 and n-2 — is bound by a `< n - 1`
-  // or `< n` loop condition, or is a fixed offset from n itself, into arrays
-  // sized exactly `n` or `n - 1`. Non-null assertions on those accesses are
-  // the same bounds-checked idiom as loop-index array access elsewhere in
-  // this codebase and are left as-is (justified, not asserting past a real
-  // gap in type info).
+  // below is bound by a `< n - 1` or `< n` loop condition, or is a fixed
+  // offset from n itself, into arrays sized exactly `n` or `n - 1`.
+  // Non-null assertions on those accesses are the same bounds-checked idiom as
+  // loop-index array access elsewhere in this codebase.
 
   // 1. Interval widths and secant slopes
   const h: number[] = []
@@ -541,37 +543,26 @@ function smoothCurvePath(points: Array<{ x: number; y: number }>): string {
     delta.push(h[i]! === 0 ? 0 : (points[i + 1]!.y - points[i]!.y) / h[i]!)
   }
 
-  // 2. Solve tridiagonal system for second derivatives c[] (natural boundary: c[0] = c[n-1] = 0)
-  const c = new Array<number>(n).fill(0)
-  if (n > 2) {
-    // Forward elimination
-    const cp = new Array<number>(n).fill(0) // modified upper diagonal
-    const dp = new Array<number>(n).fill(0) // modified right-hand side
-    for (let i = 1; i < n - 1; i++) {
-      const diag = 2 * (h[i - 1]! + h[i]!)
-      const rhs = 3 * (delta[i]! - delta[i - 1]!)
-      if (i === 1) {
-        cp[i] = h[i]! / diag
-        dp[i] = rhs / diag
-      } else {
-        const w = diag - h[i - 1]! * cp[i - 1]!
-        cp[i] = h[i]! / w
-        dp[i] = (rhs - h[i - 1]! * dp[i - 1]!) / w
-      }
-    }
-    // Back substitution
-    for (let i = n - 2; i >= 1; i--) {
-      c[i] = dp[i]! - cp[i]! * c[i + 1]!
-    }
-  }
-
-  // 3. Compute first derivatives (slopes) at each knot
+  // 2. Tangent at each knot (Fritsch-Carlson). Interior: weighted harmonic
+  //    mean of the adjacent secants, or 0 at a local extremum / flat run.
   const slopes = new Array<number>(n).fill(0)
-  for (let i = 0; i < n - 1; i++) {
-    slopes[i] = delta[i]! - (h[i]! * (2 * c[i]! + c[i + 1]!)) / 3
+  for (let i = 1; i < n - 1; i++) {
+    const d0 = delta[i - 1]!
+    const d1 = delta[i]!
+    if (d0 * d1 <= 0) continue
+    const w1 = 2 * h[i]! + h[i - 1]!
+    const w2 = h[i]! + 2 * h[i - 1]!
+    slopes[i] = (w1 + w2) / (w1 / d0 + w2 / d1)
+  }
+  // Ends: one-sided three-point estimate, clamped so it can't overshoot.
+  const endSlope = (h0: number, h1: number, d0: number, d1: number): number => {
+    let m = ((2 * h0 + h1) * d0 - h0 * d1) / (h0 + h1)
+    if (m * d0 <= 0) m = 0
+    else if (d0 * d1 <= 0 && Math.abs(m) > 3 * Math.abs(d0)) m = 3 * d0
+    return m
   }
-  // Slope at last point: derivative of last segment at its end
-  slopes[n - 1] = delta[n - 2]! + (h[n - 2]! * c[n - 2]!) / 3
+  slopes[0] = endSlope(h[0]!, h[1]!, delta[0]!, delta[1]!)
+  slopes[n - 1] = endSlope(h[n - 2]!, h[n - 3]!, delta[n - 2]!, delta[n - 3]!)
 
   // 4. Convert to cubic Bezier — control points strictly between endpoints in x
   let path = `M${r(points[0]!.x)},${r(points[0]!.y)}`