Documentation

Nodes and ports

Nodes hold serializable diagram data. React renderers and boundary math remain separate registries.

Node records

nodes.ts

node("gateway", {
  type: "service",
  label: "API gateway",
  data: { runtime: "Workers" },
  shape: "rounded-rectangle",
  width: 180,
  height: 76,
  ports: [
    { id: "request", side: "left", position: 0.5 },
    { id: "sync", side: "right", position: 0.3 },
    { id: "async", side: "right", position: 0.72 }
  ]
});

A node requires only an id. Labels, dimensions, ports, custom data, type, shape, classes, accessibility labels, and manual positions are optional.

Dimensions and measurement

Explicit width and height give the most stable server output. When autoSize is true, the React renderer observes the actual HTML content with ResizeObserver and reruns layout after its size settles.

Use explicit dimensions for server rendering or node components whose intrinsic size changes because of remote data.

Built-in shapes

rectangle clips edges to a rectangular boundary.
rounded-rectangle uses rectangle routing geometry with rounded default visuals.
ellipse uses an exact ellipse-ray intersection.

Named ports

A port has an id, cardinal side, normalized position, along-side offset, and outward offset. The normalized position runs top to bottom on vertical sides and left to right on horizontal sides.

anchors.ts

anchors.port("gateway", "async")
anchors.side("gateway", "right", 0.72, 6)
anchors.auto("gateway")