DiagramProps

Props for Diagram: all GraphProvider props plus opt-in models. history/clipboard accept true for defaults or a config object.

Extends

• GraphProviderProps<Element, Link>

Type Parameters

Type Parameter	Default type
Element extends ElementJSONInit	ElementJSONInit
Link extends LinkJSONInit	LinkJSONInit

Properties

autoSizeOrigin?

readonly optional autoSizeOrigin?: AutoSizeOrigin;

Reference point that stays fixed when an auto-sized element's measured size changes (via useMeasureElement). Mirrors CSS transform-origin semantics.

• 'top-left' (default): element grows right/down.
• 'center': element grows symmetrically, its geometric center stays put.

Only affects measurement-driven writes. Manual cell.resize(), interactive resize tools, and direct cell.set('size', ...) calls are unaffected.

Default

'top-left'

cellModel?

readonly optional cellModel?: typeof Cell;

Base model class used for every cell the graph constructs from JSON. Maps to the (deprecated) cellModel option of dia.Graph; prefer cellNamespace, which registers shapes by type and supports per-type model classes.

See

Graph

cellNamespace?

readonly optional cellNamespace?: unknown;

Cell namespace passed to new dia.Graph. Your entries are merged on top of the built-ins, so JointJS shapes and the @joint/react ElementModel / LinkModel stay available even when you register custom shapes.

Default

JointJS shapes plus the @joint/react cell models

cells?

readonly optional cells?: ProviderCells<Element, Link>;

Controlled cells array. Whenever this array changes, the graph is re-synced to match it (and initialCells is ignored); passing the same reference on a re-render does not re-sync. Pair it with onCellsChange to mirror user edits back into your own state.

children?

readonly optional children?: ReactNode;

React children rendered inside the provider, typically a <Paper />.

clipboard?

readonly optional clipboard?: boolean | Options;

Turn on the copy/cut/paste clipboard, then read it back with useClipboard. Pass true for defaults or a ClipboardOptions object to configure it.

Default

false

---

graph?

readonly optional graph?: Graph<Attributes, ModelSetOptions>;

Pre-existing JointJS graph instance to use. If omitted, GraphProvider creates a fresh new dia.Graph(...).

See

Graph

history?

readonly optional history?: boolean | GraphHistoryOptions;

Turn on the undo/redo command manager, then read it back with useGraphHistory. Pass true for defaults or a GraphHistoryOptions object to tune the undo stack.

A single write can opt out of the stack by passing { skipHistory: true } as the setter's metadata — use it for transient, non-edit changes (a selection-driven z-raise, per-node status written during a run, …) so they never land on undo/redo.

Default

false

Example

const { setCell, setCellData } = useGraph();
// Neither write is recorded on the undo stack:
setCell(id, (prev) => ({ ...prev, z: 10 }), { skipHistory: true });
setCellData(id, (prev) => ({ ...prev, status: 'running' }), { skipHistory: true });

---

initialCells?

readonly optional initialCells?: readonly CellInput<Element, Link>[];

Cells used to seed the graph once, at mount, for uncontrolled mode. Later changes to this array are not applied. Ignored when cells is provided.

See

CellInput

interactions?

readonly optional interactions?: boolean | InteractionsOptions;

Built-in pointer & keyboard interactions (pan, zoom, select, region-select, delete, copy/paste, undo/redo), applied to every <Paper> in the diagram. Enabled by default: omit the prop to get them all. Pass false to disable them entirely, or an object to disable specific parts (each flag defaults to true, e.g. interactions={{ selection: false }}). See InteractionsOptions.

Default

true

---

onCellsChange?

readonly optional onCellsChange?: (newCells) => void;

Fires after each graph change with the full, updated cells array. Use it to keep external React state in sync with the graph; it is notification only and does not itself write anything back into the graph.

Parameters

Parameter	Type
newCells	ProviderCells<Element, Link>

Returns

void

onIncrementalCellsChange?

readonly optional onIncrementalCellsChange?: OnIncrementalCellsChange<Element, Link>;

Fires after each commit with the granular added / changed / removed delta, so you can apply just the change to an external store (Redux, Zustand, etc.). Works in both controlled and uncontrolled mode.

See

IncrementalCellsChange

spatialIndex?

readonly optional spatialIndex?: boolean | SpatialIndexOptions;

Back the diagram with a dia.SearchGraph: a graph with a quad-tree spatial index that speeds up findElementsInArea, findElementsAtPoint and findElementsUnderElement queries on large graphs. Pass true for defaults or a SpatialIndexOptions object to tune the quad-tree.

Enabling/disabling is captured at first render and ignored when a custom store is provided; the quad-tree tuning values are reactive.

Default

false