JavaScript is required

Line Label and Endpoint Editing

This example shows how to select an existing line, edit its label text, drag the label to a new position, and reconnect its endpoints with relation-graph's built-in editing controllers. It also demonstrates selection-state handoff, runtime canvas settings, image export, and toast feedback inside a compact editor-style workspace.

Edit on GraphPilot

Editing Existing Line Labels and Endpoints with Built-In Controllers

What This Example Builds

This example builds a compact editing workspace for maintaining existing connections in a small graph. The page shows a full-height relation-graph canvas, a floating instruction window, green curved lines, and a dotted background that makes the screen read like an editor rather than a static demo.

Users can click a line to reveal endpoint controls, drag those controls to reconnect the line, doub