REACT ARCH / 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"
  }
);

Field	Example	Use
id	publish	Stable identity used for selection and engine routes.
from / to	anchors.port(...)	Node, port, side, or absolute-point endpoint.
type	packet	Selects a renderer from edgeTypes.
data	{ rate: 240 }	Application data passed to the renderer.
route	routes.auto(8)	Controls bends, waypoints, and corner radius.
label	publish	Text placed at the length-weighted path midpoint.
markerStart / markerEnd	true / false	Controls arrow markers on either end.
animated	flow	draw, flow, pulse, or false.
className	critical-path	Adds a class to the visible path.
ariaLabel	Publish order event	Overrides the hit target's accessible name.
disabled	true	Prevents selection and applies disabled styling.

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, avoidance)	A middle corridor that avoids unrelated nodes, shared segments, and accidental edge junctions.
routes.manual(points, radius)	A path through caller-supplied waypoints.
routes.auto(radius, avoidance)	An engine route when available, otherwise a separated orthogonal fallback.

route-examples.ts

edge("direct", anchors.auto("a"), anchors.auto("b"), {
  route: routes.straight()
});

edge("one-bend", anchors.auto("a"), anchors.auto("b"), {
  route: routes.elbow("horizontal", 8)
});

edge("corridor", anchors.auto("a"), anchors.auto("b"), {
  route: routes.orthogonal("vertical", 0.35, 12, { clearance: 16 })
});

edge("authored", anchors.auto("a"), anchors.auto("b"), {
  route: routes.manual([{ x: 260, y: 80 }, { x: 260, y: 280 }], 10)
});

edge("engine", anchors.auto("a"), anchors.auto("b"), {
  route: routes.auto(8)
});

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.

Node and edge avoidance

Automatic and orthogonal routes inspect unrelated node bounds and completed edge paths before rendering. A blocked corridor uses another horizontal or vertical lane, and automatic endpoints can move to another node side. Separate edges do not share segments or touch at accidental junctions by default. The default clearance is 12 diagram units.

route-avoidance.ts

routes.orthogonal("auto", 0.5, 10, { clearance: 18 });
routes.auto(8, { clearance: 18 });

// Allow an exact corridor to cross a node, share a path, or join another edge.
routes.orthogonal("horizontal", 0.4, 8, {
  avoidNodes: false,
  avoidEdges: false
});

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. Draw reveals the marker after the path finishes. Flow moves a repeating dash pattern along the route. The default stylesheet disables continuous movement when the user requests reduced motion.

edge-appearance.ts

edge("request", anchors.auto("client"), anchors.auto("api"), {
  label: "HTTPS",
  markerStart: false,
  markerEnd: true,
  animated: "draw"
});

edge("replication", anchors.auto("primary"), anchors.auto("replica"), { animated: "flow" });
edge("health", anchors.auto("monitor"), anchors.auto("service"), { animated: "pulse" });
edge("static", anchors.auto("config"), anchors.auto("worker"), { animated: false });