@zombie-mermaid/svg-renderer 5.3.0 → 5.5.0

package/dist/index.d.ts

@@ -0,0 +1,753 @@
+import { ClassDiagram } from '@zombie-mermaid/mermaid-parser';
+import { ClassRenderOptions } from '@zombie-mermaid/core';
+import { CurveStyle } from '@zombie-mermaid/core';
+import { DiagramColors } from '@zombie-mermaid/core';
+import { Direction } from '@zombie-mermaid/core';
+import { ElkConstructor } from '@zombie-mermaid/core';
+import { ElkExtendedEdge } from '@zombie-mermaid/core';
+import { ElkLabel } from '@zombie-mermaid/core';
+import { ElkNode } from '@zombie-mermaid/core';
+import { ErDiagram } from '@zombie-mermaid/mermaid-parser';
+import { ErRenderOptions } from '@zombie-mermaid/core';
+import { FlowchartRenderOptions } from '@zombie-mermaid/core';
+import { LayoutCache } from '@zombie-mermaid/core';
+import { LayoutOptions } from '@zombie-mermaid/core';
+import { MermaidGraph } from '@zombie-mermaid/core';
+import { niceTickValues } from '@zombie-mermaid/core';
+import { PieChart } from '@zombie-mermaid/mermaid-parser';
+import { Point } from '@zombie-mermaid/core';
+import { PositionedClassDiagram } from '@zombie-mermaid/mermaid-parser';
+import { PositionedErDiagram } from '@zombie-mermaid/mermaid-parser';
+import { PositionedGraph } from '@zombie-mermaid/core';
+import { PositionedNode } from '@zombie-mermaid/core';
+import { PositionedPieChart } from '@zombie-mermaid/mermaid-parser';
+import { PositionedSequenceDiagram } from '@zombie-mermaid/mermaid-parser';
+import { PositionedXYChart } from '@zombie-mermaid/mermaid-parser';
+import { RenderOptions } from '@zombie-mermaid/core';
+import { SequenceDiagram } from '@zombie-mermaid/mermaid-parser';
+import { SequenceRenderOptions } from '@zombie-mermaid/core';
+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;
+    readonly height: 5;
+};
+
+/**
+ * The `elk.*` options every one of the three graph builders sets, with the
+ * values they all agree on. Callers spread the result and add their own
+ * diagram-specific options on top.
+ */
+export declare function baseElkLayoutOptions(spec: {
+    direction: ElkDirection;
+    nodeSpacing: number;
+    layerSpacing: number;
+    padding: number | ElkPaddingSides;
+}): LayoutOptions;
+
+/**
+ * Height of the label band at the top of a `box … end` group, in px — the
+ * label's font size plus vertical breathing room. Shared with the renderer
+ * so the label lands centred in the band the layout reserved for it.
+ */
+export declare function boxLabelHeight(labelFontSize: number): number;
+
+/**
+ * Build a single-source/single-target ELK edge, with a measured label when
+ * `label` is non-empty. An absent or empty label leaves `labels` off the
+ * edge entirely (rather than setting it to an empty array or `undefined`),
+ * matching what all three builders did by hand.
+ */
+export declare function buildElkEdge(spec: {
+    id: string;
+    source: string;
+    target: string;
+    label?: string;
+    labelStyle: ElkEdgeLabelStyle;
+}): ElkExtendedEdge;
+
+/**
+ * Measure an edge label and build ELK's label box for it.
+ *
+ * The `+8` / `+6` are the horizontal/vertical breathing room all three
+ * builders have always added around the measured text so ELK reserves a
+ * slightly larger channel than the glyphs strictly need.
+ */
+export declare function buildElkEdgeLabel(text: string, style: ElkEdgeLabelStyle): ElkLabel;
+
+/**
+ * Build a leaf ELK node.
+ *
+ * `label` is attached as an ELK label when supplied — the flowchart/state
+ * path does that (ELK reads it for nothing, but `from-elk.ts` reads it
+ * back); class and ER carry labels in their own side tables instead and
+ * omit it. An empty-string label is still a label, so the check is
+ * `undefined`, not truthiness.
+ */
+export declare function buildElkLeafNode(id: string, size: {
+    width: number;
+    height: number;
+}, label?: string): ElkNode;
+
+/**
+ * SVG `<style>` block for a diagram: core's `buildStyleBlock` plus, when
+ * `hasMonoFont` is set, the self-hosted mono font subset for the `.mono`
+ * rule. The subset lives here rather than in `core` because only SVG output
+ * embeds it (#1319).
+ */
+export declare function buildSvgStyleBlock(font: string, hasMonoFont: boolean, nonce?: string): string;
+
+/**
+ * Indices into `diagram.relationships` of the edges dagre's depth-first walk
+ * reverses to break cycles; see `findBackEdges`.
+ */
+export declare function classBackEdges(diagram: ClassDiagram): Set<number>;
+
+/**
+ * Layout id for the i-th note. A class id is a run of non-whitespace
+ * (`\S+` in the parser), so an id containing a space can never collide
+ * with one; ELK treats ids as opaque strings.
+ */
+export declare function classNoteId(index: number): string;
+
+/**
+ * Clip an edge endpoint to the actual shape boundary of a node.
+ *
+ * @param points - The edge points array
+ * @param node - The node to clip to
+ * @param isStart - True if clipping the start point (source), false for end (target)
+ * @returns New points array with clipped endpoint
+ */
+export declare function clipEdgeToShape(points: Point[], node: PositionedNode, isStart: boolean): Point[];
+
+/** Layout constants for class diagrams */
+export declare const CLS: {
+    readonly padding: 40;
+    readonly boxPadX: 8;
+    readonly headerBaseHeight: 32;
+    readonly annotationHeight: 16;
+    readonly memberRowHeight: 20;
+    readonly sectionPadY: 8;
+    readonly emptySectionHeight: 8;
+    readonly minWidth: 120;
+    readonly memberFontSize: 11;
+    readonly memberFontWeight: 400;
+    readonly nodeSpacing: 40;
+    readonly layerSpacing: 60;
+    /** 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;
+};
+
+/**
+ * Convert MermaidGraph to ELK format (for benchmarking conversion overhead).
+ */
+export declare function convertToElkFormat(graph: MermaidGraph, options?: FlowchartRenderOptions): ElkNode;
+
+/**
+ * Create a new opt-in layout cache with a bounded size (default 20
+ * entries). Once full, the least-recently-used entry is evicted to make
+ * room for a new one.
+ *
+ * Pass the result to `elkLayoutSync()` directly, or via
+ * `RenderOptions.layoutCache` (threaded through by `layoutGraphSync()`,
+ * `layoutClassDiagramSync()`, and `layoutErDiagramSync()`) to memoize
+ * layout across repeated renders of the same diagram + options.
+ */
+export declare function createLayoutCache(maxSize?: number): LayoutCache;
+
+/**
+ * Convert a Mermaid `direction` to ELK's `elk.direction` value.
+ *
+ * `fallback` covers the no-`direction`-statement case only — every member
+ * of `Direction` has an explicit mapping. Pass the diagram type's entry
+ * from `ELK_DIRECTION_FALLBACK` rather than a bare string literal, so the
+ * per-type defaults stay documented in one place.
+ */
+export declare function directionToElk(dir: Direction | undefined, fallback: ElkDirection): ElkDirection;
+
+/**
+ * The `elk.direction` each diagram type falls back to when its source
+ * carries no `direction` statement.
+ *
+ * These genuinely differ per diagram type, and the difference is
+ * intentional rather than an accident of three separate implementations:
+ *
+ * - **flowchart / state** — `DOWN`. `MermaidGraph.direction` is a required
+ *   field the parser always fills in (defaulting to `TD`), so the fallback
+ *   is only a type-level backstop; the effective default is mermaid's own
+ *   top-down flowchart default.
+ * - **class** — `DOWN`. `ClassDiagram` has no direction concept at all (see
+ *   `ClassRenderOptions` in `packages/core/src/types.ts`: class diagrams
+ *   "have no `direction` or `curve` concept"), so this is the renderer's
+ *   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.
+ * - **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 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.
+ *
+ * The *mappings* were never in conflict — both hand-rolled
+ * `directionToElk()` implementations agreed on all five `Direction` values
+ * (`LR`→`RIGHT`, `RL`→`LEFT`, `BT`→`UP`, `TD`/`TB`→`DOWN`). Only the
+ * no-direction fallback differed, which is why it is a parameter here
+ * rather than something to reconcile away.
+ */
+export declare const ELK_DIRECTION_FALLBACK: {
+    readonly flowchart: "DOWN";
+    readonly state: "DOWN";
+    readonly class: "DOWN";
+    readonly er: "DOWN";
+    readonly c4: "DOWN";
+};
+
+/** The four values ELK's `elk.direction` option accepts in this codebase. */
+export declare type ElkDirection = 'DOWN' | 'UP' | 'LEFT' | 'RIGHT';
+
+/**
+ * How a caller wants its edge labels measured and placed. `fontSize` is
+ * the resolved `fontSizes.edgeLabel`; `layoutOptions`, when given, is
+ * attached to the ELK label itself.
+ */
+export declare interface ElkEdgeLabelStyle {
+    fontSize: number;
+    layoutOptions?: LayoutOptions;
+}
+
+/**
+ * Run ELK layout synchronously.
+ *
+ * Bypasses BOTH of ELK's setTimeout(0) wrappers:
+ *   - FakeWorker.postMessage wraps dispatch in setTimeout(0) — bypassed by
+ *     calling dispatcher.saveDispatch() directly
+ *   - PromisedWorker.onmessage wraps receive in setTimeout(0) — bypassed by
+ *     replacing rawWorker.onmessage with a direct interceptor
+ *
+ * @param cache - Optional opt-in layout cache (see `createLayoutCache()`).
+ *   When provided, a cache hit returns the previous result without running
+ *   ELK layout again. Omitted/undefined preserves the original
+ *   always-recompute behavior exactly.
+ */
+export declare function elkLayoutSync(graph: ElkNode, cache?: LayoutCache): ElkNode;
+
+/** Thrown when a graph diagram renders and no `elkjs` constructor is available. */
+export declare class ElkNotRegisteredError extends Error {
+    constructor();
+}
+
+/**
+ * Format ELK's `elk.padding` value. A single number applies to all four
+ * sides; an object sets them individually.
+ */
+export declare function elkPadding(padding: number | ElkPaddingSides): string;
+
+/** Per-side padding, for the asymmetric case (a subgraph's header gap). */
+export declare interface ElkPaddingSides {
+    top: number;
+    left: number;
+    bottom: number;
+    right: number;
+}
+
+/** Average character width in px for monospace fonts (uniform glyph width) */
+export declare function estimateMonoTextWidth(text: string, fontSize: number): number;
+
+/** Average character width in px at the given font size and weight (proportional font) */
+export declare function estimateTextWidth(text: string, fontSize: number, fontWeight: number): number;
+
+/**
+ * Evaluate one CSS value against a flat set of custom-property
+ * declarations — the expression engine behind `resolveCssColors`, exposed
+ * so it can be unit-tested (and reused) without building an SVG around it.
+ *
+ * @example
+ * evaluateCssColorValue('color-mix(in srgb, var(--fg) 50%, var(--bg))',
+ *   { '--fg': '#000000', '--bg': '#ffffff' }) // → '#808080'
+ */
+export declare function evaluateCssColorValue(value: string, declarations: Record<string, string>): string;
+
+/**
+ * Compute an edge label's center position from ELK's placed label box
+ * (`label.x/y` is the box's top-left corner).
+ *
+ * `offsetX`/`offsetY` translate into an ancestor's coordinate space, same
+ * as `extractEdgePoints`.
+ *
+ * Returns `undefined` if ELK didn't place a label (no label on the edge,
+ * or ELK left `x`/`y` unset).
+ */
+export declare function extractEdgeLabelPosition(elkEdge: ElkExtendedEdge, offsetX?: number, offsetY?: number): Point | undefined;
+
+/**
+ * Walk an ELK edge's first routed section into a flat point path:
+ * `startPoint → bendPoints → endPoint`.
+ *
+ * ELK can theoretically produce multiple sections per edge (for edges
+ * split across hierarchy boundaries via ports), but all three call sites
+ * only ever read `sections[0]` — hierarchical decomposition in this
+ * codebase is handled by emitting separate ELK edges (see
+ * `to-elk.ts`/`parseHopEdgeId` in `from-elk.ts`), not multi-section edges.
+ *
+ * `offsetX`/`offsetY` translate the section's coordinates into an
+ * ancestor's coordinate space, for callers walking a nested ELK result
+ * (`from-elk.ts`). Callers with a flat (non-hierarchical) ELK graph
+ * (`class/layout.ts`, `er/layout.ts`) can omit them.
+ *
+ * Returns an empty array if the edge has no routed sections.
+ */
+export declare function extractEdgePoints(elkEdge: ElkExtendedEdge, offsetX?: number, offsetY?: number): Point[];
+
+/** Default font sizes used in the renderer (in px). Overridable via `RenderOptions.fontSizes`. */
+export declare const FONT_SIZES: {
+    /** Node label text */
+    readonly nodeLabel: 13;
+    /** Edge label text */
+    readonly edgeLabel: 11;
+    /** Subgraph header text */
+    readonly groupHeader: 12;
+};
+
+/** Font weights used per element type */
+export declare const FONT_WEIGHTS: {
+    readonly nodeLabel: 500;
+    readonly edgeLabel: 400;
+    readonly groupHeader: 600;
+};
+
+/** Partial font-size overrides, as accepted by `RenderOptions.fontSizes`. */
+export declare type FontSizeOptions = Partial<FontSizes>;
+
+/** Resolved font-size set — same shape as {@link FONT_SIZES} but mutable numbers. */
+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. */
+export declare const GROUP_HEADER_CONTENT_PAD = 12;
+
+/** True when the label sits below the icon (stick-figure or typed icon). */
+export declare function hasLabelBelowIcon(a: {
+    type: 'participant' | 'actor';
+    participantType?: string | undefined;
+}): boolean;
+
+/**
+ * Per-label layout options the flowchart/state path sets on every edge
+ * label. Class and ER instead set `elk.edgeLabels.placement` once on the
+ * root graph, so they pass no per-label options.
+ */
+export declare const INLINE_CENTERED_EDGE_LABEL: LayoutOptions;
+
+export { LayoutCache }
+
+/**
+ * Lay out a parsed class diagram using ELK.js (synchronous).
+ */
+export declare function layoutClassDiagramSync(diagram: ClassDiagram, options?: ClassRenderOptions): PositionedClassDiagram;
+
+/**
+ * Lay out a parsed ER diagram using ELK.js (synchronous).
+ */
+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(rawGraph: MermaidGraph, options?: FlowchartRenderOptions): PositionedGraph;
+
+/**
+ * Lay out a parsed MermaidGraph using ELK.js (synchronous).
+ * Returns a fully positioned graph ready for rendering.
+ */
+export declare function layoutGraphSync(graph: MermaidGraph, options?: FlowchartRenderOptions): PositionedGraph;
+
+/** Lay out a parsed pie chart. Options are accepted for registry parity; none apply. */
+export declare function layoutPieChart(chart: PieChart, _options?: unknown): PositionedPieChart;
+
+/**
+ * Lay out a parsed sequence diagram.
+ * Returns a fully positioned diagram ready for SVG rendering.
+ */
+export declare function layoutSequenceDiagram(diagram: SequenceDiagram, options?: SequenceRenderOptions): PositionedSequenceDiagram;
+
+/**
+ * Lay out a parsed XY chart by computing pixel coordinates.
+ */
+export declare function layoutXYChart(chart: XYChart, _options?: XyChartRenderOptions): PositionedXYChart;
+
+/** Monospace font family used for code-like text (class members, types) */
+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";
+
+export { niceTickValues }
+
+/** Padding inside node shapes */
+export declare const NODE_PADDING: {
+    /** Horizontal padding inside rectangles/rounded/stadium (increased from 16 for better label fit) */
+    readonly horizontal: 20;
+    /** Vertical padding inside rectangles/rounded/stadium */
+    readonly vertical: 10;
+    /** Extra padding for diamond shapes (they need more space due to rotation) */
+    readonly diamondExtra: 24;
+};
+
+/** Mermaid pieRenderer.ts constants (default config and default theme). */
+export declare const PIE: {
+    /** Frame height; the pie's own width equals it. */
+    readonly height: 450;
+    readonly margin: 40;
+    readonly legendRectSize: 18;
+    readonly legendSpacing: 4;
+    /** `pie.textPosition` default: label distance as a fraction of the radius. */
+    readonly textPosition: 0.75;
+    /** `pieOuterStrokeWidth`; the outline circle sits half of it outside the pie. */
+    readonly outerStrokeWidth: 2;
+    /** `pieTitleTextSize` */
+    readonly titleFontSize: 25;
+    /** `pieSectionTextSize` */
+    readonly sectionFontSize: 17;
+    /** `pieLegendTextSize` */
+    readonly legendFontSize: 17;
+    readonly fontWeight: 400;
+    /** Mermaid's `pie1`..`pie12` scale wraps after this many colours. */
+    readonly paletteSize: 12;
+    /** `.highlighted { scale: 1.05 }` in Mermaid's pieStyles.ts. */
+    readonly highlightScale: 1.05;
+    /** Slices below this percentage of the total are not drawn. */
+    readonly minPercent: 1;
+};
+
+/** CSS value for palette slot `index`: slot 0 follows `--accent` live. */
+export declare function pieColorValue(index: number, accent: string | undefined, bg: string): string;
+
+/**
+ * Build the `d` attribute for an edge's routed points under `curve`.
+ *
+ * A path with fewer than two points cannot be drawn; the caller already skips
+ * those, but this degrades to an empty string rather than emitting `M`
+ * followed by nothing.
+ */
+export declare function pointsToPath(points: Point[], curve?: CurveStyle): string;
+
+/**
+ * Register the `elkjs` constructor used for flowchart, state, class, ER and
+ * architecture layout. Call once before rendering, in browsers and bundlers:
+ *
+ *     import ELK from 'elkjs/lib/elk.bundled.js'
+ *     registerElk(ELK)
+ *
+ * Under Node (and Bun) this is optional when `elkjs` is installed: it is
+ * auto-loaded on first use. Calling it again swaps the constructor and drops
+ * the cached instance.
+ */
+export declare function registerElk(ctor: ElkConstructor): void;
+
+/**
+ * Render a positioned class diagram as an SVG string.
+ *
+ * @param colors - DiagramColors with bg/fg and optional enrichment variables.
+ * @param transparent - If true, renders with transparent background.
+ * @param embedSource - Original diagram source to stamp onto the root `<svg>`
+ *                       as `data-src` (from `options.embedSource`). Omitted
+ *                       when the option is off.
+ * @param title - Accessible name (from `options.title`). See svgOpenTag() in
+ *                packages/core/src/theme.ts.
+ * @param decorative - Marks the SVG decorative (from `options.decorative`).
+ * @param linksEnabled - Whether `click`-based `<a href>` links and `<title>`
+ *                       tooltips render (from `options.interactivity !==
+ *                       'none'`, see `resolveLinksEnabled` in
+ *                       src/diagram-registry.ts).
+ *                       Default true — matches the flowchart/state renderer.
+ * @param emit - Strict-CSP controls (from `options.nonce` /
+ *               `options.styleAttribute`, see #216). Default: no nonce,
+ *               root `style` attribute on.
+ */
+export declare function renderClassSvg(diagram: PositionedClassDiagram, colors: DiagramColors, font?: string, transparent?: boolean, fontSizes?: FontSizes, embedSource?: string, title?: string, decorative?: boolean, linksEnabled?: boolean, emit?: SvgEmitOptions): string;
+
+/**
+ * Render a positioned ER diagram as an SVG string.
+ *
+ * @param colors - DiagramColors with bg/fg and optional enrichment variables.
+ * @param transparent - If true, renders with transparent background.
+ * @param embedSource - Original diagram source to stamp onto the root `<svg>`
+ *                       as `data-src` (from `options.embedSource`). Omitted
+ *                       when the option is off.
+ * @param title - Accessible name (from `options.title`). See svgOpenTag() in
+ *                packages/core/src/theme.ts.
+ * @param decorative - Marks the SVG decorative (from `options.decorative`).
+ * @param emit - Strict-CSP controls (from `options.nonce` /
+ *               `options.styleAttribute`, see #216). Default: no nonce,
+ *               root `style` attribute on.
+ */
+export declare function renderErSvg(diagram: PositionedErDiagram, colors: DiagramColors, font?: string, transparent?: boolean, fontSizes?: FontSizes, embedSource?: string, title?: string, decorative?: boolean, emit?: SvgEmitOptions): string;
+
+/** @deprecated Use `renderMermaidSVGAsync` */
+export declare const renderMermaid: typeof renderMermaidSVGAsync;
+
+/**
+ * Render Mermaid diagram text to an SVG string — synchronously.
+ *
+ * Uses elk.bundled.js with a direct FakeWorker bypass (no setTimeout(0) delay).
+ * The ELK singleton is created lazily on first use and cached forever.
+ *
+ * Use this in React components with useMemo() to avoid flash:
+ *   const svg = useMemo(() => renderMermaidSVG(code, opts), [code])
+ *
+ * @param text - Mermaid source text
+ * @param options - Rendering options (colors, font, spacing)
+ * @returns A self-contained SVG string
+ *
+ * @example
+ * ```ts
+ * const svg = renderMermaidSVG('graph TD\n  A --> B')
+ *
+ * // With theme
+ * const svg = renderMermaidSVG('graph TD\n  A --> B', {
+ *   bg: '#1a1b26', fg: '#a9b1d6'
+ * })
+ *
+ * // With CSS variables (for live theme switching)
+ * const svg = renderMermaidSVG('graph TD\n  A --> B', {
+ *   bg: 'var(--background)', fg: 'var(--foreground)', transparent: true
+ * })
+ *
+ * // With the original source stamped onto the root <svg> as data-src —
+ * // handy for a "copy source" button or an "open in Mermaid Live" link
+ * // without re-attaching it via string surgery on the output.
+ * const svg = renderMermaidSVG('graph TD\n  A --> B', { embedSource: true })
+ *
+ * // With an accessible name — role="img" + aria-labelledby pointing at a
+ * // <title> child, so assistive tech announces the diagram instead of
+ * // reading every node label individually (see issue #215).
+ * const svg = renderMermaidSVG('graph TD\n  A --> B', {
+ *   title: 'Flowchart: Build → Test → Ship'
+ * })
+ *
+ * // Decorative diagram — already described in surrounding prose, so it's
+ * // hidden from assistive tech (aria-hidden="true") instead of named.
+ * const svg = renderMermaidSVG('graph TD\n  A --> B', { decorative: true })
+ * ```
+ */
+export declare function renderMermaidSVG(text: string, options?: RenderOptions): string;
+
+/**
+ * Render Mermaid diagram text to an SVG string — async.
+ *
+ * Same result as renderMermaidSVG() but returns a Promise.
+ * Useful in async contexts (server handlers, data loaders, etc.)
+ */
+export declare function renderMermaidSVGAsync(text: string, options?: RenderOptions): Promise<string>;
+
+/** @deprecated Use `renderMermaidSVG` */
+export declare const renderMermaidSync: typeof renderMermaidSVG;
+
+/**
+ * Render a positioned pie chart as an SVG string.
+ *
+ * The accessible name is `title` (from `options.title`) when given,
+ * otherwise the chart's own `accTitle`; `accDescr` becomes the root
+ * `<desc>`. Both are dropped when `decorative` is set — see svgOpenTag() in
+ * packages/core/src/theme.ts.
+ */
+export declare function renderPieSvg(chart: PositionedPieChart, colors: DiagramColors, font?: string, transparent?: boolean, embedSource?: string, title?: string, decorative?: boolean, emit?: SvgEmitOptions): string;
+
+/**
+ * Render a positioned sequence diagram as an SVG string.
+ *
+ * @param colors - DiagramColors with bg/fg and optional enrichment variables.
+ * @param transparent - If true, renders with transparent background.
+ * @param embedSource - Original diagram source to stamp onto the root `<svg>`
+ *                       as `data-src` (from `options.embedSource`). Omitted
+ *                       when the option is off.
+ * @param title - Accessible name (from `options.title`). See svgOpenTag() in
+ *                packages/core/src/theme.ts.
+ * @param decorative - Marks the SVG decorative (from `options.decorative`).
+ * @param emit - Strict-CSP controls (from `options.nonce` /
+ *               `options.styleAttribute`, see #216). Default: no nonce,
+ *               root `style` attribute on.
+ */
+export declare function renderSequenceSvg(diagram: PositionedSequenceDiagram, colors: DiagramColors, font?: string, transparent?: boolean, fontSizes?: FontSizes, embedSource?: string, title?: string, decorative?: boolean, emit?: SvgEmitOptions): string;
+
+/**
+ * Render a positioned graph as an SVG string.
+ *
+ * @param colors - DiagramColors with bg/fg and optional enrichment variables.
+ *                 These are set as CSS custom properties on the <svg> tag.
+ *                 All element colors reference derived --_xxx variables.
+ * @param transparent - If true, renders with transparent background.
+ * @param embedSource - Original diagram source to stamp onto the root `<svg>`
+ *                       as `data-src` (from `options.embedSource`). Omitted
+ *                       when the option is off.
+ * @param animationEnabled - Whether `e1@{ animate: true }` edges actually
+ *                            animate (from `options.interactivity === 'full'`,
+ *                            see `resolveAnimationEnabled` in
+ *                            src/diagram-registry.ts).
+ *                            Default true — preserves the previously-ungated
+ *                            behavior for callers who don't pass it.
+ * @param linksEnabled - Whether `click`-based `<a href>` links and `<title>`
+ *                       tooltips render (from
+ *                       `options.interactivity !== 'none'`, see
+ *                       `resolveLinksEnabled` in src/diagram-registry.ts). Default true
+ *                       — preserves the previously-ungated behavior for
+ *                       callers who don't pass it.
+ * @param title - Accessible name (from `options.title`). See svgOpenTag() in
+ *                packages/core/src/theme.ts.
+ * @param decorative - Marks the SVG decorative (from `options.decorative`).
+ * @param emit - Strict-CSP controls (from `options.nonce` /
+ *               `options.styleAttribute`, see #216): a `nonce` for every
+ *               `<style>` element, and whether the root `style="…"`
+ *               attribute is emitted at all. Default: no nonce, attribute on.
+ */
+export declare function renderSvg(graph: PositionedGraph, colors: DiagramColors, font?: string, transparent?: boolean, fontSizes?: FontSizes, curve?: CurveStyle, embedSource?: string, animationEnabled?: boolean, linksEnabled?: boolean, title?: string, decorative?: boolean, emit?: SvgEmitOptions): string;
+
+/**
+ * Render a positioned XY chart as an SVG string.
+ *
+ * @param embedSource - Original diagram source to stamp onto the root
+ *                       `<svg>` as `data-src` (from `options.embedSource`).
+ *                       Omitted when the option is off.
+ * @param title - Accessible name (from `options.title`). See svgOpenTag() in
+ *                packages/core/src/theme.ts.
+ * @param decorative - Marks the SVG decorative (from `options.decorative`).
+ * @param emit - Strict-CSP controls (from `options.nonce` /
+ *               `options.styleAttribute`, see #216). Default: no nonce,
+ *               root `style` attribute on.
+ */
+export declare function renderXYChartSvg(chart: PositionedXYChart, colors: DiagramColors, font?: string, transparent?: boolean, interactive?: boolean, embedSource?: string, title?: string, decorative?: boolean, emit?: SvgEmitOptions): string;
+
+/**
+ * Replace every `var(--…)` and `color-mix(…)` in an SVG produced by this
+ * library's renderer with its computed sRGB value (`#rrggbb`, or
+ * `rgba(r, g, b, a)` when translucent).
+ *
+ * `colors` seeds the variable scope with the caller's palette; the SVG's
+ * own declarations (the root `style` attribute and any `<style>` block)
+ * are then read on top, so the derived `--_*` variables resolve through
+ * exactly the `color-mix()` rules `buildStyleBlock` emitted. See the
+ * module comment for what is and isn't rewritten.
+ */
+export declare function resolveCssColors(svg: string, colors: DiagramColors): string;
+
+/**
+ * Merge user-provided font-size overrides over the {@link FONT_SIZES} defaults.
+ * Any field left unspecified (or `undefined`) falls back to its default.
+ */
+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;
+    readonly innerBox: 0.75;
+    /** Edge connector stroke (increased from 0.75 for better visibility) */
+    readonly connector: 1;
+};
+
+/**
+ * Vertical shift applied to all text elements for font-agnostic centering.
+ *
+ * Instead of relying on `dominant-baseline="central"` (which each font interprets
+ * differently based on its own ascent/descent metrics), we use the default alphabetic
+ * baseline and shift down by 0.35em. This places the optical center of text at the
+ * y coordinate, regardless of font family (Inter, JetBrains Mono, system fallbacks).
+ *
+ * The 0.35em value approximates the distance from alphabetic baseline to visual
+ * center of Latin text. Using `em` units ensures it scales with font size.
+ */
+export declare const TEXT_BASELINE_SHIFT: "0.35em";
+
+/**
+ * The exact CSS declaration list the root `<svg style="…">` attribute would
+ * carry for these options — `--bg`, `--fg`, whichever enrichment colours
+ * were given, and (unless `transparent`) `background: var(--bg)`.
+ *
+ * For hosts with a strict `Content-Security-Policy`: a `style=` attribute
+ * can't be nonced, so a `style-src` without `'unsafe-inline'` drops it and
+ * the diagram loses its colours. Render with `styleAttribute: false` and
+ * put this string in your own stylesheet on the SVG (or any ancestor —
+ * custom properties inherit) instead. Pass the same options object to both
+ * calls so the declarations match what the render expects. See
+ * `RenderOptions.styleAttribute` / `RenderOptions.nonce` and issue #216.
+ *
+ * Built by the same function that fills the attribute in normal renders,
+ * so there is one variable list to keep in sync. The string is compact
+ * (`--bg:#fff;--fg:#000;background:var(--bg)`) — valid inside any rule
+ * block — and the colour values are yours, unescaped, exactly as the
+ * attribute has always carried them.
+ *
+ * @example
+ * ```ts
+ * const opts = { bg: '#1a1b26', fg: '#a9b1d6', nonce, styleAttribute: false }
+ * const svg = renderMermaidSVG('graph TD\n  A --> B', opts)
+ * const css = `.diagram svg { ${themeCssVariables(opts)} }`
+ * ```
+ */
+export declare function themeCssVariables(options?: RenderOptions): string;
+
+/**
+ * Parse `text` with the same detection and parser the renderer would use, but
+ * lay out and draw nothing. Throws the parser's error (usually `Line N: ...`);
+ * returns normally when the source parses.
+ */
+export declare function validateMermaid(text: string): void;
+
+/**
+ * Splice a `data-src` attribute (the original diagram source, escaped) onto
+ * an already-built root `<svg ...>` opening tag, e.g. from
+ * `embedSource: true`. Applied to the string `svgOpenTag()` returns rather
+ * than the diagram source's own markup, so it always lands on the root
+ * element regardless of diagram type. No-op when `source` is undefined.
+ */
+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 { }