SVGRendererConfig

Import it from @grafloria/renderer.

SVG Renderer Configuration

ts
interface SVGRendererConfig

Properties

Name	Type	Description
`diagramType?`	`string`	The diagram's KIND, used for `aria-roledescription` on the SVG root ("Flowchart diagram", "Sequence diagram"). Purely semantic: it changes what a screen reader calls the canvas, nothing about how it is drawn. Default: undefined → "Diagram".
`diagramLabel?`	`string`	A human title for this diagram, used as the head of the SVG root's accessible name ("Order flow, 12 nodes, 14 edges"). Default: undefined → "Diagram".
`enableCaching?`	`boolean`	Enable VNode caching for performance Default: true
`maxCacheSize?`	`number`	Maximum number of VNodes to cache Default: 1000
`useCSSMode?`	`boolean`	Use CSS classes and variables for styling - true: Best for SVG+HTML with foreignObject (default) - false: Programmatic styles (Canvas-compatible) Default: true
`linkHitAreaWidth?`	`number`	Width (px) of the invisible hit-area stroke rendered under every link so thin lines are easy to click/hover. 0 disables it. Default: 12
`smartConnectionPoints?`	`boolean`	Re-pick each link's connection sides dynamically from the nodes' relative positions (draw.io-style floating connections). Visible ports are the contract: when the node shows ports on the chosen side (visibility 'always' via the port → node → global chain) the link snaps to the closest one; with ports hidden the attachment floats along the shape's real outline …
`connectionPoint?`	`string`	. The diagram-wide CONNECTION-POINT STRATEGY, by registered name (`registerConnectionPoint`). Built-ins: `'port'` (the default — attach at the assigned port), `'smart'` (draw.io-style floating attachment) and `'boundary'` (attach on each node's outline, aimed at the other node).
`instanceId?`	`string`	Force this renderer's instance scope (`data-grafloria-instance`, and the id of its `<style>` block) instead of taking the next value from the per-process counter.
`parallelLinks?`	`boolean`	. Fan out PARALLEL links: two or more links between the same pair of nodes are pushed onto separate lanes instead of being drawn on top of one another. Self-loops (source node === target node) are always routed as loops regardless of this flag — a self-loop has no sensible un-looped rendering.
`parallelSpacing?`	`number`	Distance between adjacent lanes of a parallel bundle, in px. Per-link override: `LinkStyle.parallel.spacing`. Default: 16
`channelNudging?`	`boolean`	. Channel nudging: orthogonal segments of DIFFERENT links that share a corridor (closer than ~4px — i.e. visually on top of each other) are separated onto parallel lanes, spaced by `parallelSpacing`, with lane ORDER chosen by each member's exit side so corridor-mates stop crossing at the corridor mouth.
`jumpOwnership?`	`'both' \| 'single'`	. Who draws the arc when two jump-drawing links cross: 'both' (legacy double bridge, default) or 'single' — exactly one deterministic owner per intersection (horizontal arcs over vertical; ties break on link id). See EdgeOptimizerOptions.jumpOwnership.
`globalRouting?`	`boolean`	. Route every edge against ONE shared penalty field instead of one at a time, so an edge pays for crossing another edge or crowding a corridor at ROUTING time and picks a different channel by itself — rather than being routed into a pile-up and then patched afterwards by fan-out, nudging and jump-overs.
`qualityGovernor?`	`boolean \| GovernorOptions`	. The ADAPTIVE QUALITY GOVERNOR.
`routeSolverPort?`	`SolverPort`	The port the global route solver runs on — a real `Worker`, typically `new Worker(new URL('...', import.meta.url))` whose body is `serveSolver(self)`. Omit and the solver runs INLINE on this thread: same protocol, same code, same answers, no parallelism.
`routeSolverOptions?`	`SolverOptions`	Penalty weights and pass count for the global solver. See SolverOptions.
`onRoutesRefined?`	`() => void`	Called when the global solver has produced routes better than the ones on screen. The host should schedule a re-render; the renderer cannot do it itself, because it does not own the frame loop.
`edgeOptimizer?`	`boolean`	. Run the diagram-wide edge optimizer: ONE incremental pass that computes jump-overs for every link and auto-places the labels that opted in via `LinkLabel.autoOffset`.
`colorMode?`	`ColorMode`	Styling & theming — Card "colorMode".
`themes?`	`ThemeSet`	The themes `colorMode` switches between. Defaults to the built-in LIGHT/DARK/HIGH_CONTRAST set. Only consulted when `colorMode` is set.
`tokenBridge?`	`TokenBridge`	Styling & theming — Card "design-token bridge".
`highlightConnected?`	`boolean \| HighlightConnectedOptions`	Select a node and its lines come forward: the lines coming INTO it and going OUT of it are drawn in the page's ink, and every other line fades back — the flow-editor look (Google's Opal draws a workflow this way).

Was this page helpful?