This example shows a fixed-layout relation-graph editor that uses a view-mounted preset palette to drag-create styled nodes and click-create styled lines. It also demonstrates mixed node rendering through a custom card slot, active creation-state feedback, a shared floating settings panel, and image export helpers.

Preset Toolbar Node and Line Creation on a Fixed Graph Canvas

What This Example Builds

This example builds a lightweight graph-authoring canvas rather than a read-only graph viewer. The screen shows a fixed-position starter graph on a dotted background, an orange preset palette mounted inside the graph view, a shared floating help window, and support for both plain text nodes and a richer card-style node.

The main user actions are structural edits. Users drag node presets from the left p