This example turns a small relation-graph canvas into a lightweight editor with palette-driven node creation, contextual line creation, and endpoint-colored gradient edges. It also shows how custom line slots can coexist with selection, deletion, canvas settings, and image export.

Building a Palette-Driven Gradient Line Graph Editor

What This Example Builds

This example builds a compact graph editor rather than a read-only relationship view. The starting canvas shows a small workflow-like routing graph with rounded icon nodes, detached text labels, and curved lines whose color transitions from the source node color to the target node color.

Users can select nodes and lines, box-select multiple nodes, drag icon templates from a top-center palette to create new node