# SVGRendererConfig

Import it from `@grafloria/renderer`.

SVG Renderer Configuration

```ts
interface SVGRendererConfig
```

**Properties**

| Name | Type | Default | 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). |