HTML lifecycle, styling, and migration

Host size

relation-graph uses the host’s actual dimensions. A host with no height produces no visible graph:

html, body {height: 100%; margin: 0;}
#graph {width: 100%; height: 100%; min-height: 360px;}

ResizeObserver handles host changes. After revealing a hidden tab, collapsed panel, or dialog, call graph.refresh(), moveToCenter(), or zoomToFit() if the layout system did not trigger ResizeObserver.

Multiple instances

const leftGraph = await createRelationGraph('#left-graph', leftConfig);
const rightGraph = await createRelationGraph('#right-graph', rightConfig);

Each instance owns independent DOM, events, state, and plugins. Do not pass a node object from one instance into another; copy JSON data instead.

Teardown

const stop = graph.subscribe('selection', updateBusinessPanel);
const unregisterPort = registerConnectTarget(graph, port, portOptions);

function unmount() {
  stop();
  unregisterPort();
  graph.destroy();
}

The graph cleans up plugins and official helpers. Business-owned global listeners, timers, and requests still need explicit cleanup.

Styling

The HTML platform uses regular DOM, so application CSS can override it directly:

#graph .relation-graph {
  --rg-node-color: #ffffff;
  --rg-node-border-color: #64748b;
  --rg-line-color: #94a3b8;
  --rg-toolbar-hover-bg-color: rgba(15, 23, 42, 0.08);
}

#graph .rg-node-peel[data-id="critical"] > .rg-node {
  border-color: #dc2626;
}

Prefer node/line data, renderer classes, and CSS variables. Do not depend on undocumented deep DOM ordering.

Migrating an older project

The retired packages, Shadow Root main component, and custom child element family are no longer provided. Migration steps:

1. Uninstall the old package and install @relation-graph/html@3.1.2.
2. Remove the auto-registering script and all rg-* child component tags.
3. Create an instance in a regular container with createRelationGraph().
4. Move options and data to config.options and config.data.
5. Replace instance retrieval through onReady with the factory Promise.
6. Move behavioral events to config.events; use rg:* DOM events for read-only observation.
7. Replace node, line, and expand slots with renderers.
8. Replace background/canvas/view slots with layers.
9. Replace toolbar, MiniView, and editor elements with ui or official plugins.
10. Replace connection-target elements with registerConnectTarget().

Retired capability	HTML replacement
Main tag	createRelationGraph(host, config); optional single light-DOM tag
onReady detail	await createRelationGraph()
Node/line slots	renderers.node, renderers.line, renderers.lineLabel
Expand-button slot	renderers.nodeExpandButton
Background/canvas/view slots	layers
Toolbar and MiniView elements	ui.toolbar, ui.miniView
Editing elements	ui.editing
Connection-target element	registerConnectTarget()
Store-change event	subscribe(domain, listener)

Legacy example URLs redirect to /examples/<id>/html, but application code should move to the html platform name. Retired npm packages receive no new releases or security fixes.

Troubleshooting

• Blank graph: verify host height and style.css.
• 404 or CORS: use fixed distribution URLs and serve the page over HTTP.
• Custom HTML appears as text: return a DOM Node, or use trustedHTML() only for trusted static content.
• Toolbar/MiniView is absent: verify both plugin installation under ui and the matching core show* option.
• Duplicate mount error: destroy the previous instance first.

Back to HTML Startup.