@zombie-mermaid/svg-renderer 3.1.0 → 4.0.0

package/dist/index.d.cts

@@ -26,6 +26,13 @@ import { SvgEmitOptions } from '@zombie-mermaid/core';
 import { XYChart } from '@zombie-mermaid/mermaid-parser';
 import { XyChartRenderOptions } from '@zombie-mermaid/core';
 
+/**
+ * Distance from the bottom of a stick-figure (`actor`) icon to the vertical
+ * centre of its label. Shared with the renderer so the label lands where the
+ * layout reserved room for it.
+ */
+export declare const ACTOR_LABEL_OFFSET = 14;
+
 /** Arrow head dimensions — matches spec: 8px wide × ~5px tall */
 export declare const ARROW_HEAD: {
     readonly width: 8;
@@ -122,6 +129,11 @@ export declare const CLS: {
     /** Horizontal / vertical padding inside a note box, around its text */
     readonly notePadX: 10;
     readonly notePadY: 6;
+    /** Space reserved above a namespace's classes for its title */
+    readonly namespaceTitleHeight: 28;
+    /** Padding between a namespace frame and its classes (other three sides) */
+    readonly namespacePad: 16;
+    readonly namespaceTitleFontSize: 12;
 };
 
 /**
@@ -168,10 +180,14 @@ export declare function directionToElk(dir: Direction | undefined, fallback: Elk
  *   single fixed orientation, matching Mermaid's own TB class rendering —
  *   which `../class/layout.ts` relies on to put a `note for X` above its
  *   class.
- * - **ER** — `RIGHT`. An ER diagram's `direction` is optional
+ * - **C4** — `DOWN`. `C4Diagram.direction` is never set by the parser (C4
+ *   sources have no direction statement), only by `RenderOptions.direction`,
+ *   so an unset one is the top-down layout every C4 diagram is drawn in.
+ * - **ER** — `DOWN`. An ER diagram's `direction` is optional
  *   (`ErDiagram.direction?`), left `undefined` when the source has no
- *   `direction` statement, and this renderer has always laid those out
- *   left-to-right. `direction TB`/`LR`/`BT`/`RL` in the source (or
+ *   `direction` statement, and official Mermaid lays those out top-to-bottom
+ *   (#1250; this renderer used to lay them out left-to-right).
+ *   `direction TB`/`LR`/`BT`/`RL` in the source (or
  *   `RenderOptions.direction`, applied via `withDirectionOverride`) still
  *   wins over it.
  *
@@ -185,7 +201,8 @@ export declare const ELK_DIRECTION_FALLBACK: {
     readonly flowchart: "DOWN";
     readonly state: "DOWN";
     readonly class: "DOWN";
-    readonly er: "RIGHT";
+    readonly er: "DOWN";
+    readonly c4: "DOWN";
 };
 
 /** The four values ELK's `elk.direction` option accepts in this codebase. */
@@ -304,6 +321,14 @@ export declare type FontSizes = {
     [K in keyof typeof FONT_SIZES]: number;
 };
 
+/**
+ * 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 declare function formatTickLabels(ticks: number[]): string[];
+
 /** Vertical gap between a subgraph header band and the content area below it (px).
  * Without this, nested subgraph headers sit flush against their parent's header band.
  * Increased from 8 to 12 to provide more clearance for edges routing near headers. */
@@ -328,6 +353,15 @@ export declare function layoutClassDiagramSync(diagram: ClassDiagram, options?:
  */
 export declare function layoutErDiagramSync(diagram: ErDiagram, options?: ErRenderOptions): PositionedErDiagram;
 
+/**
+ * Lay out a flowchart, with its subgraphs arranged the way mermaid.js arranges
+ * them (see `layout-engine/compound-flat.ts`). Anything that layout doesn't
+ * handle, or can't make fit, is laid out by `layoutGraphSync`, so this is a
+ * drop-in for it wherever the graph is a flowchart. Other diagram types that
+ * share the engine (state, architecture) keep using `layoutGraphSync`.
+ */
+export declare function layoutFlowchartSync(graph: MermaidGraph, options?: FlowchartRenderOptions): PositionedGraph;
+
 /**
  * Lay out a parsed MermaidGraph using ELK.js (synchronous).
  * Returns a fully positioned graph ready for rendering.
@@ -351,6 +385,9 @@ export declare const MONO_FONT: "'JetBrains Mono'";
 /** Full CSS fallback chain for monospace text */
 export declare const MONO_FONT_STACK: "'JetBrains Mono', 'SF Mono', 'Fira Code', ui-monospace, monospace";
 
+/** Generate "nice" tick values for a numeric range */
+export declare function niceTickValues(min: number, max: number): number[];
+
 /** Padding inside node shapes */
 export declare const NODE_PADDING: {
     /** Horizontal padding inside rectangles/rounded/stadium (increased from 16 for better label fit) */
@@ -552,6 +589,11 @@ export declare function resolveCssColors(svg: string, colors: DiagramColors): st
  */
 export declare function resolveFontSizes(overrides?: FontSizeOptions): FontSizes;
 
+export declare function smoothCurvePath(points: Array<{
+    x: number;
+    y: number;
+}>): string;
+
 /** Stroke widths per element type (in px) */
 export declare const STROKE_WIDTHS: {
     readonly outerBox: 1;
@@ -610,4 +652,12 @@ export declare function themeCssVariables(options?: RenderOptions): string;
  */
 export declare function withDataSrc(svgTag: string, source: string | undefined): string;
 
+/**
+ * Step between shown x-axis labels: 1 when every pair of neighbouring labels
+ * keeps `X_LABEL_MIN_GAP` of clear space, otherwise the smallest n for which
+ * every pair of shown (every n-th) labels does. Checked pairwise on the real
+ * widths so one long label doesn't thin out an otherwise roomy axis.
+ */
+export declare function xLabelStep(labels: string[], bandWidth: number): number;
+
 export { }

package/dist/index.d.ts

@@ -26,6 +26,13 @@ import { SvgEmitOptions } from '@zombie-mermaid/core';
 import { XYChart } from '@zombie-mermaid/mermaid-parser';
 import { XyChartRenderOptions } from '@zombie-mermaid/core';
 
+/**
+ * Distance from the bottom of a stick-figure (`actor`) icon to the vertical
+ * centre of its label. Shared with the renderer so the label lands where the
+ * layout reserved room for it.
+ */
+export declare const ACTOR_LABEL_OFFSET = 14;
+
 /** Arrow head dimensions — matches spec: 8px wide × ~5px tall */
 export declare const ARROW_HEAD: {
     readonly width: 8;
@@ -122,6 +129,11 @@ export declare const CLS: {
     /** Horizontal / vertical padding inside a note box, around its text */
     readonly notePadX: 10;
     readonly notePadY: 6;
+    /** Space reserved above a namespace's classes for its title */
+    readonly namespaceTitleHeight: 28;
+    /** Padding between a namespace frame and its classes (other three sides) */
+    readonly namespacePad: 16;
+    readonly namespaceTitleFontSize: 12;
 };
 
 /**
@@ -168,10 +180,14 @@ export declare function directionToElk(dir: Direction | undefined, fallback: Elk
  *   single fixed orientation, matching Mermaid's own TB class rendering —
  *   which `../class/layout.ts` relies on to put a `note for X` above its
  *   class.
- * - **ER** — `RIGHT`. An ER diagram's `direction` is optional
+ * - **C4** — `DOWN`. `C4Diagram.direction` is never set by the parser (C4
+ *   sources have no direction statement), only by `RenderOptions.direction`,
+ *   so an unset one is the top-down layout every C4 diagram is drawn in.
+ * - **ER** — `DOWN`. An ER diagram's `direction` is optional
  *   (`ErDiagram.direction?`), left `undefined` when the source has no
- *   `direction` statement, and this renderer has always laid those out
- *   left-to-right. `direction TB`/`LR`/`BT`/`RL` in the source (or
+ *   `direction` statement, and official Mermaid lays those out top-to-bottom
+ *   (#1250; this renderer used to lay them out left-to-right).
+ *   `direction TB`/`LR`/`BT`/`RL` in the source (or
  *   `RenderOptions.direction`, applied via `withDirectionOverride`) still
  *   wins over it.
  *
@@ -185,7 +201,8 @@ export declare const ELK_DIRECTION_FALLBACK: {
     readonly flowchart: "DOWN";
     readonly state: "DOWN";
     readonly class: "DOWN";
-    readonly er: "RIGHT";
+    readonly er: "DOWN";
+    readonly c4: "DOWN";
 };
 
 /** The four values ELK's `elk.direction` option accepts in this codebase. */
@@ -304,6 +321,14 @@ export declare type FontSizes = {
     [K in keyof typeof FONT_SIZES]: number;
 };
 
+/**
+ * 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 declare function formatTickLabels(ticks: number[]): string[];
+
 /** Vertical gap between a subgraph header band and the content area below it (px).
  * Without this, nested subgraph headers sit flush against their parent's header band.
  * Increased from 8 to 12 to provide more clearance for edges routing near headers. */
@@ -328,6 +353,15 @@ export declare function layoutClassDiagramSync(diagram: ClassDiagram, options?:
  */
 export declare function layoutErDiagramSync(diagram: ErDiagram, options?: ErRenderOptions): PositionedErDiagram;
 
+/**
+ * Lay out a flowchart, with its subgraphs arranged the way mermaid.js arranges
+ * them (see `layout-engine/compound-flat.ts`). Anything that layout doesn't
+ * handle, or can't make fit, is laid out by `layoutGraphSync`, so this is a
+ * drop-in for it wherever the graph is a flowchart. Other diagram types that
+ * share the engine (state, architecture) keep using `layoutGraphSync`.
+ */
+export declare function layoutFlowchartSync(graph: MermaidGraph, options?: FlowchartRenderOptions): PositionedGraph;
+
 /**
  * Lay out a parsed MermaidGraph using ELK.js (synchronous).
  * Returns a fully positioned graph ready for rendering.
@@ -351,6 +385,9 @@ export declare const MONO_FONT: "'JetBrains Mono'";
 /** Full CSS fallback chain for monospace text */
 export declare const MONO_FONT_STACK: "'JetBrains Mono', 'SF Mono', 'Fira Code', ui-monospace, monospace";
 
+/** Generate "nice" tick values for a numeric range */
+export declare function niceTickValues(min: number, max: number): number[];
+
 /** Padding inside node shapes */
 export declare const NODE_PADDING: {
     /** Horizontal padding inside rectangles/rounded/stadium (increased from 16 for better label fit) */
@@ -552,6 +589,11 @@ export declare function resolveCssColors(svg: string, colors: DiagramColors): st
  */
 export declare function resolveFontSizes(overrides?: FontSizeOptions): FontSizes;
 
+export declare function smoothCurvePath(points: Array<{
+    x: number;
+    y: number;
+}>): string;
+
 /** Stroke widths per element type (in px) */
 export declare const STROKE_WIDTHS: {
     readonly outerBox: 1;
@@ -610,4 +652,12 @@ export declare function themeCssVariables(options?: RenderOptions): string;
  */
 export declare function withDataSrc(svgTag: string, source: string | undefined): string;
 
+/**
+ * Step between shown x-axis labels: 1 when every pair of neighbouring labels
+ * keeps `X_LABEL_MIN_GAP` of clear space, otherwise the smallest n for which
+ * every pair of shown (every n-th) labels does. Checked pairwise on the real
+ * widths so one long label doesn't thin out an otherwise roomy axis.
+ */
+export declare function xLabelStep(labels: string[], bandWidth: number): number;
+
 export { }