CreateDiagramOptions

Import it from @grafloria/renderer.

Also has every member of DomEventBinderOptions, listed on its own entry.

ts
interface CreateDiagramOptions extends DomEventBinderOptions

Properties

Name	Type	Description
`nodes?`	`NodeInput[]`
`edges?`	`EdgeInput[]`
`groups?`	`Array<GroupSpec \| GroupModel>`	Zones: groups around some boxes, each with a frame of its own — fill, border, dash, a caption in a corner (the tinted regions of the diagrams AI tools draw). A live `GroupModel` passes through. See {@link GroupSpec}.
`theme?`	`Theme`
`colorMode?`	`ColorMode`	Follow the OS colour scheme instead of pinning `theme`.
`themes?`	`ThemeSet`	The themes `colorMode` switches between. Defaults to `DEFAULT_THEME_SET`.
`tokenBridge?`	`TokenBridge`	Drive Grafloria's variables from the host's design tokens (shadcn/MUI/Tailwind).
`renderer?`	`Omit<SVGRendererConfig, 'instanceId'>`	The full renderer config, for every knob the ergonomic fields above do not name: `connectionPoint` / `smartConnectionPoints` (floating edges), `parallelLinks` + `parallelSpacing`, `channelNudging`, `jumpOwnership`, `globalRouting`, `linkHitAreaWidth`.
`highlightConnected?`	`boolean \| HighlightConnectedOptions`	Select a node and its lines come forward in the page's ink while every other line fades back; a line of the selection that runs across another node is lifted above the cards and drawn dashed. Off by default; see {@link HighlightConnectedOptions}. Wins over `renderer.highlightConnected`. Switch it live with `setHighlightConnected()`.
`highlighterConfig?`	`boolean \| Partial<HighlighterConfig>`	The OUTLINE LAYER Angular's canvas draws: an outline around the hovered node, the selected node, nodes with a validation issue, and the valid targets while a connection is drawn. `true` turns every kind on; an object turns kinds on or off one by one, over the defaults ({@link HighlighterConfig}). Off when unset, so an existing app is unchanged.
`layout?`	`'architecture'`	Arrange the diagram on mount. `'architecture'` composes it the way AI tools hand-draw one: zones as regions on a grid, boxes sized to their words and aligned in rows, lines straight where boxes line up and bent in the gutters, a node's `near` note beside its target. Positions in the spec are not needed (and are overridden).
`zoom?`	`number`
`minZoom?`	`number`
`maxZoom?`	`number`
`viewport?`	`{ x: number; y: number }`	Camera origin in world coordinates.
`engine?`	`DiagramEngine`	Attach to an existing engine instead of creating one.
`interaction?`	`Record<string, unknown>`	Passed through to `new DiagramEngine({ interaction })`.
`instanceId?`	`string`	Force the renderer's CSS scope (hydration does this for you).
`fitView?`	`boolean`	Fit the camera to the content on mount.
`renderCustomNode?`	`(node: NodeModel, element: HTMLElement) => void \| Promise<void>`	Blocker #4: host hook for nodes that render as framework components rather than SVG (`custom: true` / `metadata.useHTMLLayer`). The instance creates and positions an absolutely-placed host element inside the HTML layer and hands it to you; you own what goes inside it.
`removeCustomNode?`	`(nodeId: string, element: HTMLElement) => void`	Called before a custom node's host element is removed — unmount your component.
`cullCustomNodes?`	`boolean \| HostCullOptions`	VIEWPORT-CULL the custom-node hosts: keep only the ones near the viewport in the document. `true` for the defaults, or an options object (`margin`, `hysteresis`, `mode` — see {@link HostCullOptions}).
`viewLifecycle?`	`ViewLifecycle`	Install a {@link ViewLifecycle} — freeze/unfreeze, `autoFreeze`, and the admission set a {@link ProgressiveMounter } drives.
`hydrate?`	`HydrationSnapshot`	Adopt a server-rendered snapshot instead of mounting fresh. Pass the `snapshot` returned by `renderToStaticSVG()`. The instance rebuilds the identical model, renders the identical VNode tree, and ADOPTS the DOM already in the container — no re-creation, no flash, no re-layout.
`comments?`	`boolean \| CommentStore`	Anchored comment threads. `true` creates a store (viewer `'local'`); pass a `CommentStore` to share one (collab). Pins render into the VNode tree via the comment overlay; read them back with `getCommentStore()`.
`commentsViewer?`	`string`	Viewer id for a `comments: true`-created store (default `'local'`).

Was this page helpful?