Skip to content
D
Documentation

Route and edit edges

how-to
3 min readUpdated

Use an edge's router to choose the path, reconnect an endpoint by dragging it to another node, and enable waypoint editing when readers need to shape a route by hand. An edge spec stores the connection and routing intent; the mounted diagram renders that intent as geometry.

Choose a route

type describes the line's shape; router selects the path-finding behavior. The examples below put three routers on the same A-to-B corridor, with a wall in each lane. Drag a wall and compare the route.

routerBehavior
orthogonalRight-angled path from the port's exit direction.
manhattanGrid-based right-angle routing with turn minimization.
avoidRoutes around nodes and recalculates as nodes move.
elkUses ELK edge routes, consistent with an ELK-laid-out graph.
straightDirect line between endpoints.

If router is unset, it is derived from type. The orthogonal, manhattan, and elk lanes below follow the routing-algorithms demo; the single-obstacle demo also shows an orthogonal route bending around a wall.

For the shared framework setup and typed node and edge specs, see Build runnable workflows; the examples here add routing and edge-editing behavior.

js
import { render } from '@grafloria/element';

const host = document.createElement('div');
host.style.height = '600px';
document.body.append(host);

const lanes = ['orthogonal', 'manhattan', 'elk'];
const nodes = lanes.flatMap((router, index) => {
  const y = 110 + index * 150;
  return [
    { id: `a${index}`, position: { x: 70, y: y - 24 }, size: { width: 108, height: 48 }, label: 'A' },
    { id: `b${index}`, position: { x: 760, y: y - 24 }, size: { width: 108, height: 48 }, label: 'B' },
    { id: `wall${index}`, position: { x: 410, y: y - 42 }, size: { width: 100, height: 84 }, label: router },
  ];
});
const edges = lanes.map((router, index) => ({
  id: `edge${index}`,
  source: `a${index}`,
  target: `b${index}`,
  router,
}));
const instance = render({ nodes, edges }, host);
instance.fitView();

The canvas shows three A-to-B lanes, with a labelled wall in each. Move a wall to see the route respond to the new geometry.

Open the live routing-algorithms demo or view its source.

Reconnect an endpoint

Select the edge, then drag its endpoint handle onto a valid port on another node. The following examples pin the endpoints to named sides so the handles begin on the shown node edges.

js
import { render } from '@grafloria/element';

const host = document.createElement('div');
host.style.height = '600px';
document.body.append(host);

const nodes = [
  { id: 'a', position: { x: 80, y: 260 }, size: { width: 120, height: 60 }, label: 'A' },
  { id: 'b', position: { x: 660, y: 110 }, size: { width: 120, height: 60 }, label: 'B' },
  { id: 'c', position: { x: 660, y: 430 }, size: { width: 120, height: 60 }, label: 'C' },
];
const edges = [{ id: 'e1', source: 'a', target: 'b', sourceHandle: 'right', targetHandle: 'left', type: 'direct' }];
const instance = render({ nodes, edges }, host);
instance.fitView();

After you select the wire between A and B, its endpoint handles appear. Drag the handle at B to C: the link now ends at C. A drop without a valid target leaves the original connection in place.

Open the live reconnect-edge demo or view its source.

Add and move waypoints

Waypoint editing is opt-in. Enable it on the diagram, select an edge, click its path to add a bend, and drag that waypoint. Its interior path changes while the connection remains attached to both nodes.

The JavaScript sample mounts the same two-node direct edge using render. Its returned DiagramInstance is the live diagram instance.

For the basic mounted two-node pattern, see How Grafloria works; the Vue sample below keeps its setup runnable while adding waypoint editing on a diagonal edge.

js
import { render } from '@grafloria/element';

const host = document.createElement('div');
host.style.height = '400px';
document.body.append(host);

const nodes = [
  { id: 'a', position: { x: 120, y: 180 }, size: { width: 150, height: 70 }, label: 'A' },
  { id: 'b', position: { x: 620, y: 180 }, size: { width: 150, height: 70 }, label: 'B' },
];
const edges = [{ id: 'e1', source: 'a', target: 'b', type: 'direct' }];
const instance = render({ nodes, edges }, host, {
  interaction: { enableWaypointEditing: true, showWaypointHandles: true },
});
instance.fitView();

The initial wire is straight. Once selected, clicking along its path adds a waypoint at that location; dragging the waypoint bends the line without moving either endpoint. A second path click adds another bend. Angular needs the interaction settings applied to the mounted canvas's engine; the other bindings accept them through their interaction prop.

Open the live editable-edge demo or view its source.

Options and pitfalls

OptionTypeDefaultWhat it does
router'straight' | 'orthogonal' | 'manhattan' | 'avoid' | 'elk' or a registered router nameDerived from type when omittedChooses the edge's route.
type'direct' | 'smooth' | 'orthogonal' | 'bezier'—Chooses the edge's line shape.
sourceHandle, targetHandlestringNot specifiedPin an endpoint to a port or side; omit them for port-facing attachment.
interaction.enableWaypointEditingbooleanfalseAllows adding, moving, or removing waypoints interactively.
interaction.showWaypointHandlesbooleantrueShows waypoint handles on selected edges.
  • type and router answer different questions: line shape versus path selection. A connector controls corner drawing and is separate from both.
  • Waypoint editing is disabled by default. Without enabling it, clicking the path does not add a bend.
  • Endpoint reconnection drops onto a port. If the target is missing or invalid, the existing connection is restored.
  • An edge-handles route is pinned when you give it sourceHandle and targetHandle; a hand-bent route stores its waypoints in the edge's points after editing.

For port compatibility and connection rules, see Configure ports and Validate connections. For undoing edits, see Command history.

Was this page helpful?

ADocs generated by Atloria — from the code, always in sync →
Route and edit edges — Grafloria · GPT-6 Luna