Diagrammatic-UI - Interactive Graph Visualization Library

This reference documents all components, props, and options available in Diagrammatic-UI.

Components

The main container component for rendering graph visualizations.

dataGraphDataRequired

The graph data containing nodes and edges to visualize.

widthnumberDefault: 800

Width of the graph canvas in pixels.

heightnumberDefault: 600

Height of the graph canvas in pixels.

theme'light' | 'dark'Default: 'light'

Color theme for the graph visualization.

Algorithm to use for automatically positioning nodes.

direction'horizontal' | 'vertical'Default: 'vertical'

Direction for hierarchical layouts like 'tree'.

nodeStyleConfigNodeStyleConfig

Configuration object for styling nodes.

edgeStyleConfigEdgeStyleConfig

Configuration object for styling edges.

interactionOptionsInteractionOptions

Options for controlling user interactions with the graph.

onNodeClick(nodeId: string) => void

Callback fired when a node is clicked.

onNodeHover(nodeId: string | null) => void

Callback fired when a node is hovered or hover ends (null).

onEdgeClick(edgeId: string) => void

Callback fired when an edge is clicked.

onSelectionChange(selection: { nodes: string[], edges: string[] }) => void

Callback fired when the selection changes.

onLayoutComplete() => void

Callback fired when the layout calculation completes.