Documentation

Edges and routes

Connect nodes, ports, sides, or exact points with deterministic routing contracts.

Edge records

edges.ts

edge(
  "publish",
  anchors.port("gateway", "events"),
  anchors.auto("queue"),
  {
    label: "publish",
    route: routes.orthogonal("horizontal", 0.4, 10),
    markerEnd: true,
    animated: "flow"
  }
);

Route modes

Builder	Path
routes.straight()	A direct segment between resolved boundaries.
routes.elbow(axis, radius)	One horizontal-to-vertical or vertical-to-horizontal bend.
routes.orthogonal(axis, split, radius)	A three-segment path with an exact middle corridor.
routes.manual(points, radius)	A path through caller-supplied waypoints.
routes.auto(radius)	An engine route when available, otherwise an orthogonal fallback.

First axis and split

The first axis controls whether an orthogonal route leaves horizontally or vertically. Set it to auto to use the dominant distance between endpoints. The split value runs from zero to one across the visible endpoint span.

Manual points

Manual points are the coordinate escape hatch. They become intermediate waypoints. The library still resolves and clips the source and target endpoints.

Animation

Set animated to draw, flow, pulse, or false. The default stylesheet implements each mode with CSS and disables continuous movement when the user requests reduced motion.