@zombie-mermaid/core 3.0.0 → 3.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zombie-mermaid/core",
-  "version": "3.0.0",
+  "version": "3.1.0",
   "license": "MIT",
   "description": "Shared types, theme, and text/statement utilities used by every zombie-mermaid renderer.",
   "repository": {

package/src/__tests__/render-utils.test.ts

@@ -0,0 +1,59 @@
+import { describe, it, expect } from 'vitest'
+import { f } from '../render-utils.ts'
+
+describe('f tagged template literal', () => {
+  it('rounds floats to 2 decimal places', () => {
+    expect(f`${3.14159}`).toBe('3.14')
+    expect(f`${0.1 + 0.2}`).toBe('0.3')
+    expect(f`${1.005}`).toBe('1')
+    expect(f`${1.1}`).toBe('1.1')
+    expect(f`${2.0}`).toBe('2')
+    expect(f`M ${'A'} ${3.14159} L ${10.5} ${-20.999}`).toBe(
+      'M A 3.14 L 10.5 -21',
+    )
+  })
+
+  it('keeps integers unchanged', () => {
+    expect(f`${42}`).toBe('42')
+    expect(f`${0}`).toBe('0')
+    expect(f`${-7}`).toBe('-7')
+  })
+
+  it('passes non-number values through as-is', () => {
+    expect(f`hello ${'world'}`).toBe('hello world')
+    expect(f`${'foo'}bar`).toBe('foobar')
+    expect(f`just text`).toBe('just text')
+    expect(f`${true}`).toBe('true')
+    expect(f`${null}`).toBe('null')
+    expect(f`${undefined}`).toBe('undefined')
+  })
+
+  it('normalizes -0 to 0', () => {
+    expect(f`${-0}`).toBe('0')
+    expect(f`${-0.001}`).toBe('0')
+  })
+
+  it('rounds very small magnitudes down to 0 rather than emitting scientific notation', () => {
+    expect(f`${1e-10}`).toBe('0')
+    expect(f`${-1e-10}`).toBe('0')
+  })
+
+  it('normalizes non-finite values to 0 instead of emitting invalid SVG tokens', () => {
+    // Reachable from degenerate zero-size geometry (e.g. a zero-length
+    // vector normalized by dividing by its own length). "NaN"/"Infinity"
+    // are not valid SVG numeric attribute values, unlike upstream's
+    // behavior of stringifying them literally.
+    expect(f`${NaN}`).toBe('0')
+    expect(f`${Infinity}`).toBe('0')
+    expect(f`${-Infinity}`).toBe('0')
+    expect(f`<rect x="${NaN}" width="${10.5}" />`).toBe(
+      '<rect x="0" width="10.5" />',
+    )
+  })
+
+  it('handles multiple interpolations mixing rounded and passthrough values', () => {
+    expect(
+      f`<rect x="${1.005}" y="${-20.999}" fill="${'red'}" data-n="${5}" />`,
+    ).toBe('<rect x="1" y="-21" fill="red" data-n="5" />')
+  })
+})

package/src/diagram-type.ts

@@ -10,8 +10,22 @@
 
 import { splitStatements } from './statements.ts'
 
+/**
+ * Every diagram type this library can detect and route to a renderer — the
+ * runtime source of truth `DiagramType` is derived from, so consumers that
+ * need to enumerate the types (e.g. the MCP `list_diagram_types` tool) never
+ * keep a duplicate list that could drift.
+ */
+export const DIAGRAM_TYPES = [
+  'flowchart',
+  'sequence',
+  'class',
+  'er',
+  'xychart',
+] as const
+
 /** The diagram types this library can detect and route to a renderer. */
-export type DiagramType = 'flowchart' | 'sequence' | 'class' | 'er' | 'xychart'
+export type DiagramType = (typeof DIAGRAM_TYPES)[number]
 
 /**
  * Detect the diagram type from the mermaid source text.

package/src/index.ts

@@ -27,6 +27,7 @@ export * from './direction.ts'
 export * from './direction-override.ts'
 export * from './init-directive.ts'
 export * from './multiline-utils.ts'
+export * from './render-utils.ts'
 export * from './statements.ts'
 export * from './style-directives.ts'
 export * from './text-metrics.ts'

package/src/multiline-utils.ts

@@ -7,6 +7,7 @@
 // ============================================================================
 
 import { LINE_HEIGHT_RATIO } from './text-metrics.ts'
+import { f } from './render-utils.ts'
 
 /**
  * Normalize label text: strip surrounding quotes, convert <br> tags and
@@ -216,7 +217,7 @@ export function renderMultilineText(
   // Single line — simple text element
   if (lines.length === 1) {
     const dy = fontSize * baselineShift
-    return `<text x="${cx}" y="${cy}" ${attrs} dy="${dy}">${renderLineContent(text)}</text>`
+    return f`<text x="${cx}" y="${cy}" ${attrs} dy="${dy}">${renderLineContent(text)}</text>`
   }
 
   // Multi-line — use tspan elements with vertical centering
@@ -228,11 +229,11 @@ export function renderMultilineText(
   const tspans = lines
     .map((line, i) => {
       const dy = i === 0 ? firstDy : lineHeight
-      return `<tspan x="${cx}" dy="${dy}">${renderLineContent(line)}</tspan>`
+      return f`<tspan x="${cx}" dy="${dy}">${renderLineContent(line)}</tspan>`
     })
     .join('')
 
-  return `<text x="${cx}" y="${cy}" ${attrs}>${tspans}</text>`
+  return f`<text x="${cx}" y="${cy}" ${attrs}>${tspans}</text>`
 }
 
 /**
@@ -266,8 +267,8 @@ export function renderMultilineTextWithBackground(
   const bgHeight = textHeight + padding * 2
 
   const rect =
-    `<rect x="${cx - bgWidth / 2}" y="${cy - bgHeight / 2}" ` +
-    `width="${bgWidth}" height="${bgHeight}" ${bgAttrs} />`
+    f`<rect x="${cx - bgWidth / 2}" y="${cy - bgHeight / 2}" ` +
+    f`width="${bgWidth}" height="${bgHeight}" ${bgAttrs} />`
 
   const textEl = renderMultilineText(text, cx, cy, fontSize, textAttrs)
 

package/src/render-utils.ts

@@ -0,0 +1,54 @@
+// ============================================================================
+// SVG numeric formatting — round interpolated coordinates/dimensions to 2dp.
+//
+// Ported from lukilabs/beautiful-mermaid#77 ("Round all floats to 2 decimal
+// places in SVG output", credit: GauBen). ELK layout and the curve/bezier
+// math in packages/svg-renderer/src/edge-curves.ts produce full
+// floating-point precision (e.g. `142.38427299999998`), which upstream's PR
+// pointed out bloats generated SVG for no visual benefit — nothing renders a
+// sub-hundredth-of-a-pixel difference. `f` is a tagged template literal used
+// in place of a plain template literal (`` f`<rect x="${x}" />` `` instead of
+// `` `<rect x="${x}" />` ``) everywhere flowchart/ER/class/sequence markup is
+// built, so every interpolated number gets rounded right where it is
+// stringified, with no change to non-numeric interpolations (ids, colors,
+// already-formatted strings).
+//
+// packages/svg-renderer/src/xychart/{renderer,layout}.ts already has its own
+// rounding (`r()`, 1dp) for unrelated axis-label-formatting reasons — this
+// helper is deliberately not applied there.
+// ============================================================================
+
+/**
+ * Round a number to at most 2 decimal places for SVG output.
+ *
+ * Non-finite input (`NaN`/`Infinity`, reachable from degenerate zero-size
+ * geometry — e.g. a normalized zero-length vector) is normalized to `0`
+ * rather than stringified literally. This is a deliberate improvement over
+ * upstream: `"NaN"`/`"Infinity"` are not valid SVG numeric attribute values,
+ * so passing them through would hand the browser malformed markup instead of
+ * just an odd-looking number. Every other case matches upstream exactly,
+ * including collapsing `-0` to `0`.
+ */
+function roundCoord(n: number): number {
+  if (!Number.isFinite(n)) return 0
+  return Number(n.toFixed(2))
+}
+
+/**
+ * Tagged template literal: stringifies interpolated values, rounding any
+ * `number` to at most 2 decimal places first. Non-number values (strings,
+ * booleans, etc.) pass through `String()` unchanged, same as an untagged
+ * template literal would.
+ *
+ * @example
+ * f`<rect x="${3.14159}" y="${-0.001}" />` // '<rect x="3.14" y="0" />'
+ */
+export function f(strings: TemplateStringsArray, ...values: unknown[]): string {
+  let out = strings[0] ?? ''
+  for (let i = 0; i < values.length; i++) {
+    const v = values[i]
+    out += typeof v === 'number' ? String(roundCoord(v)) : String(v)
+    out += strings[i + 1] ?? ''
+  }
+  return out
+}

package/src/theme.ts

@@ -13,6 +13,7 @@
 
 import { escapeXml, escapeAttr } from './multiline-utils.ts'
 import { parseHexColor } from './color-utils.ts'
+import { f } from './render-utils.ts'
 import {
   MONO_FONT_FAMILY as SVG_MONO_FONT_FAMILY,
   MONO_FONT_FACE_CSS as SVG_MONO_FONT_FACE_CSS,
@@ -705,8 +706,8 @@ export function svgOpenTag(
   }
 
   return (
-    `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${width} ${height}" ` +
-    `width="${width}" height="${height}"${a11yAttrs}${styleAttr}>` +
+    f`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${width} ${height}" ` +
+    f`width="${width}" height="${height}"${a11yAttrs}${styleAttr}>` +
     titleEl
   )
 }