Skip to main content

Checkpoint edges

Route an edge through fixed waypoints stored on edge.data.checkpoints. Each segment between consecutive checkpoints still uses pathfinding to avoid nodes, with the same stitching as editable edges, but without draggable control points.

Use checkpoints when waypoint positions are known up front (imported graphs, programmatic layout, server data). Use editable edges when users should drag waypoints in the UI.

SmartCheckpointEdge​

import { SmartCheckpointEdge } from "@tisoap/react-flow-smart-edge";

const edgeTypes = {
  smartCheckpoint: SmartCheckpointEdge,
};

With createSmartEdge​

import { createSmartEdge } from "@tisoap/react-flow-smart-edge";

const edgeTypes = {
  checkpointStep: createSmartEdge("step", { checkpoints: true, gridRatio: 5 }),
};

See also: checkpoints.

Persisting checkpoints (edge.data.checkpoints)​

Checkpoints are plain graph coordinates ({ x, y }). Your flow owns edge state (useEdgesState, defaultEdges, or controlled edges/onEdgesChange):

import type { SmartCheckpointEdgeData } from "@tisoap/react-flow-smart-edge";

const initialEdges = [
  {
    id: "e1-2",
    source: "1",
    target: "2",
    type: "smartCheckpoint",
    data: {
      checkpoints: [{ x: 320, y: 90 }],
    } satisfies SmartCheckpointEdgeData,
  },
];

When checkpoints is enabled but data.checkpoints is empty or missing, routing behaves like a plain smart edge.

getSmartEdgeWaypoints​

For fully custom edges, call getSmartEdgeWaypoints directly with a waypoints array instead of using the built-in option.

See also​

  • Editable edges for draggable waypoints with the same segment routing