DiagramProps

Premium

Updated on Apr 2, 2026

Represents the props of the KendoReact Diagram component.

Name	Type	Default	Description
ariaLabel?	string		Sets the aria-label attribute on the outermost wrapper element of the Diagram.
className?	string		Sets additional CSS class names on the outermost wrapper element of the Diagram. tsx <Diagram className="my-diagram" />
connectionDefaults?	ConnectionDefaults		Defines the default configuration options applicable to all connections.
connectionModelFields?	ConnectionModelFields		Defines the field mapping configuration for connections data binding. Maps source object properties to Diagram connection properties. Only used when connections is an array of custom objects instead of ConnectionOptions.
connections?	DiagramDataItem<ConnectionOptions>[]		Defines the connections that render between the shapes in the Diagram. Accepts either an array of ConnectionOptions or an array of any objects that will be mapped using the connectionModelFields configuration.
editable?	boolean | DiagramEditable	true	A set of settings to configure the Diagram behavior when the user attempts to drag, resize, or remove shapes. Changing the property value dynamically triggers a reinitialization of the Diagram.
layout?	DiagramLayout		Defines the layout configuration for arranging shapes and connections in the Diagram.
navigable?	boolean | DiagramNavigationOptions	true	Enables keyboard navigation in the Diagram. When set to true, navigate between shapes using arrow keys. Alternatively, pass a DiagramNavigationOptions object to customize navigation behavior.
onChange?	(event: DiagramChangeEvent) => void		Fires when a shape or connection is created or removed.
onDiagramClick?	(event: DiagramDomEvent) => void		Fires when the user clicks on a shape or a connection.
onDrag?	(event: DiagramDragEvent) => void		Fires when the user drags an item.
onDragEnd?	(event: DiagramDragEvent) => void		Fires when the user stops dragging an item.
onDragStart?	(event: DiagramDragEvent) => void		Fires when the user starts dragging an item.
onMouseEnter?	(event: DiagramDomEvent) => void		Fires when the mouse pointer enters a shape or connection.
onMouseLeave?	(event: DiagramDomEvent) => void		Fires when the mouse pointer leaves a shape or connection.
onPan?	(event: DiagramPanEvent) => void		Fires when the user pans the Diagram.
onSelect?	(event: DiagramSelectEvent) => void		Fires when the user selects one or more items.
onShapeBoundsChange?	(event: DiagramItemBoundsChangeEvent) => void		Fires when the location or size of an item are changed.
onTooltipHide?	(item: ShapeOptions | ConnectionOptions) => void		Fires when a tooltip should be hidden.
onTooltipShow?	(item: ShapeOptions | ConnectionOptions) => void		Fires when a tooltip should be shown for a shape or connection.
onZoomEnd?	(event: DiagramZoomEndEvent) => void		Fires when the Diagram has finished zooming out.
onZoomStart?	(event: DiagramZoomStartEvent) => void		Fires when the Diagram starts zooming in or out.
pannable?	boolean | Pannable	true	Defines the pannable options. Use this setting to disable Diagram pan or change the key that activates the pan behavior.
role?	string	'application'	Sets the role attribute on the outermost wrapper element of the Diagram.
selectable?	boolean | Selectable	true	Defines the Diagram selection options.
shapeDefaults?	ShapeDefaults		Defines the default configuration options applicable to all shapes.
shapeModelFields?	ShapeModelFields		Defines the field mapping configuration for shapes data binding. Maps source object properties to Diagram shape properties. Only used when shapes is an array of custom objects instead of ShapeOptions.
shapes?	DiagramDataItem<ShapeOptions>[]		Defines the shapes that render in the Diagram. Accepts either an array of ShapeOptions or an array of any objects that will be mapped using the shapeModelFields configuration.
style?	React.CSSProperties		Sets the inline styles for the outermost wrapper element of the Diagram. tsx <Diagram style={{ height: 500 }} />
zoom?	number	1	Defines the zoom level of the Diagram.
zoomMax?	number	2	Defines the maximum zoom level of the Diagram.
zoomMin?	number	0.1	Defines the minimum zoom level of the Diagram.
zoomRate?	number	0.1	Defines the zoom rate of the Diagram.