Custom renderers

Render regular React content inside nodes and custom SVG for edges while keeping documents serializable.

Node type registry

type ServiceData = { runtime: string };

function ServiceNode({ node, selected }: NodeRendererProps<ServiceData>) {
  return (
    <article className="service" data-selected={selected}>
      <small>{node.data?.runtime}</small>
      <strong>{node.label}</strong>
    </article>
  );
}

const nodeTypes = { service: ServiceNode };

<Diagram
  nodes={nodes}
  edges={edges}
  nodeTypes={nodeTypes}
/>;

The document stores type: "service" and JSON-safe data. The consuming application maps that type to executable React code.

Custom edge renderer

An edge renderer receives the fully routed edge, selection state, arrow marker id, and click handler. Use edge.path for the generated SVG path or edge.points when you need custom drawing.

Custom boundary geometry

Visuals and geometry are deliberately separate. If a custom node is diamond-shaped, register an intersection function under the same shape name.

const shapes = {
  diamond: {
    intersect(bounds, toward) {
      return intersectDiamond(bounds, toward);
    }
  }
};

<Diagram shapes={shapes} nodeTypes={nodeTypes} {...document} />;

Theme variables

Import the default CSS and override its variables inside your diagram class. Custom renderers can ignore the default node styles entirely.

.my-diagram {
  --react-draw-background: #07111f;
  --react-draw-node-background: #102238;
  --react-draw-node-border: #526e8a;
  --react-draw-accent: #f2f2f0;
  --react-draw-edge: #91a8bf;
}