@zombie-mermaid/svg-renderer 3.2.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;
 };
 
 /**
@@ -171,10 +183,11 @@ export declare function directionToElk(dir: Direction | undefined, fallback: Elk
  * - **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** — `RIGHT`. An ER diagram's `direction` is optional
+ * - **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.
  *
@@ -188,7 +201,7 @@ export declare const ELK_DIRECTION_FALLBACK: {
     readonly flowchart: "DOWN";
     readonly state: "DOWN";
     readonly class: "DOWN";
-    readonly er: "RIGHT";
+    readonly er: "DOWN";
     readonly c4: "DOWN";
 };
 
@@ -340,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.
@@ -630,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;
 };
 
 /**
@@ -171,10 +183,11 @@ export declare function directionToElk(dir: Direction | undefined, fallback: Elk
  * - **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** — `RIGHT`. An ER diagram's `direction` is optional
+ * - **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.
  *
@@ -188,7 +201,7 @@ export declare const ELK_DIRECTION_FALLBACK: {
     readonly flowchart: "DOWN";
     readonly state: "DOWN";
     readonly class: "DOWN";
-    readonly er: "RIGHT";
+    readonly er: "DOWN";
     readonly c4: "DOWN";
 };
 
@@ -340,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.
@@ -630,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 { }