# 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 | Default | 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'`). |