opinion
NodeLinkGraph
An SVG canvas of nodes and edges you can pan and zoom, with hierarchical, circular or manual layout.
Studio structureWho leads which project
100%
100%
100%
In context
Studio mapThe structure beside a project's details
Who leads whatTideline, October
100%
On track
Harbour rebrandBrand
MC
84% doneLed by Maya Chen, due 24 Oct
Props
| Prop | Type | Required | Default |
|---|---|---|---|
nodes | NodeLinkGraphNode[] | Yes | — |
edges | NodeLinkGraphEdge[] | Yes | — |
layout | "hierarchical" | "circular" | "manual" | undefined | No | hierarchical |
title | string | undefined | No | — |
ariaLabel | string | undefined | No | — |
width | number | undefined | No | 480 |
height | number | undefined | No | 360 |
padding | number | undefined | No | 24 |
onNodePositionChange | ((id: string, x: number, y: number) => void) | undefined | No | — |
onViewportChange | ((view: { nodes: { id: string; x: number; y: number; }[]; viewportBounds: { x: number; y: number; width: number; height: number; }; }) => void) | undefined | No | — |
renderNode | ((node: Required<Pick<NodeLinkGraphNode, "label" | "id" | "x" | "y">> & NodeLinkGraphNode) => ReactNode) | undefined | No | — |
renderEdgeStyle | ((edge: NodeLinkGraphEdge) => { stroke?: string | undefined; strokeWidth?: number | undefined; } | undefined) | undefined | No | — |
className | string | undefined | No | — |
bionic | boolean | undefined | No | — |
bionicOptions | BionicOptions | undefined | No | — |
data-rebar-* attributes
data-rebar-component="node-link-graph"; parts: toolbar, zoom-out-button, zoom-label, zoom-in-button, pan-zoom-container, node (also carrying data-node-id), edge.
Migrating to Ant Design
Not codemod-covered — AntD ships no diagramming components of its own; a node-link graph typically migrates to a dedicated library (React Flow, Cytoscape.js) rather than an antd component.