React Diagram API

The Diagram UI component provides a visual interface to help you design new and modify existing diagrams.

import Diagram from "devextreme-react/diagram"

Type: DiagramTypes.default

Configuration

An object that defines the Diagram UI component's configuration properties.

Name	Description
autoZoomMode	Specifies how the Diagram UI component automatically zooms the work area.
contextMenu	Configures the context menu's settings.
contextToolbox	Configures the context toolbox's settings.
customShapeComponent	An alias for the customShapeTemplate property specified in React. Accepts a custom component. Refer to Using a Custom Component for more information.
customShapeRender	An alias for the customShapeTemplate property specified in React. Accepts a rendering function. Refer to Using a Rendering Function for more information.
customShapes	Provide access to an array of custom shapes.
customShapeTemplate	Specifies a custom template for shapes.
customShapeToolboxComponent	An alias for the customShapeToolboxTemplate property specified in React. Accepts a custom component. Refer to Using a Custom Component for more information.
customShapeToolboxRender	An alias for the customShapeToolboxTemplate property specified in React. Accepts a rendering function. Refer to Using a Rendering Function for more information.
customShapeToolboxTemplate	Specifies a custom template for shapes in the toolbox.
defaultItemProperties	Configures default item properties.
disabled	Specifies whether the UI component responds to user interaction.
edges	Allows you to bind the collection of diagram edges to a data source. For more information, see the Data Binding section.
editing	Specifies which editing operations a user can perform.
elementAttr	Specifies the global attributes to be attached to the UI component's container element.
export	Configures export settings.
fullScreen	Specifies whether or not to display the UI component in full-screen mode.
gridSize	Specifies the grid pitch.
hasChanges	Indicates whether diagram content has been changed.
height	Specifies the UI component's height.
historyToolbar	Configures the history toolbar's settings.
mainToolbar	Configures the main toolbar settings.
nodes	Allows you to bind the collection of diagram nodes to a data source. For more information, see the Data Binding section.
onContentReady	A function that is executed when the UI component's content is ready and each time the content is changed.
onCustomCommand	A function that is executed after a custom command item was clicked and allows you to implement the custom command's logic.
onDisposing	A function that is executed before the UI component is disposed of.
onInitialized	A function used in JavaScript frameworks to save the UI component instance.
onItemClick	A function that is executed after a shape or connector is clicked.
onItemDblClick	A function that is executed after a shape or connector is double-clicked.
onOptionChanged	A function that is executed after a UI component property is changed.
onRequestEditOperation	A function that allows you to prohibit an edit operation at run time.
onRequestLayoutUpdate	A function that is executed after diagram data is reloaded and allows you to specify whether or not the UI component should update the diagram layout.
onSelectionChanged	A function that is executed after the selection is changed in the Diagram.
pageColor	Specifies the color of a diagram page.
pageOrientation	Specifies the page orientation.
pageSize	Specifies a size of pages.
propertiesPanel	Configures the Properties panel settings.
readOnly	Specifies whether the diagram is read-only.
rtlEnabled	Switches the UI component to a right-to-left representation.
showGrid	Specifies whether grid lines are visible.
simpleView	Switch the Diagram UI component to simple view mode.
snapToGrid	Specifies whether diagram elements should snap to grid lines.
toolbox	Configures the toolbox settings.
units	Specifies the measurement unit for size properties.
viewToolbar	Configures the view toolbar settings.
viewUnits	Specifies the measurement unit that is displayed in user interface elements.
visible	Specifies whether the UI component is visible.
width	Specifies the UI component's width.
zoomLevel	Specifies the zoom level.

Methods

This section describes members used to manipulate the UI component.

Name	Description
beginUpdate()	Prevents the UI component from refreshing until the endUpdate() method is called.
defaultOptions(rule)	Specifies the device-dependent default configuration properties for this component.
dispose()	Disposes of all the resources allocated to the Diagram instance.
element()	Gets the root UI component element.
endUpdate()	Refreshes the UI component after a call of the beginUpdate() method.
export()	Exports the diagram data to a JSON object.
exportTo(format, callback)	Exports the diagram to an image format.
focus()	Sets focus on the UI component.
getEdgeDataSource()	Returns the DataSource instance.
getInstance(element)	Gets the instance of a UI component found using its DOM node.
getItemById(id)	Returns a shape or connector object specified by its internal identifier.
getItemByKey(key)	Returns a shape or connector object specified by its key.
getNodeDataSource()	Gets the DataSource instance.
import(data, updateExistingItemsOnly)	Imports the diagram data.
instance()	Gets the UI component's instance. Use it to access other methods of the UI component.
off(eventName)	Detaches all event handlers from a single event.
off(eventName, eventHandler)	Detaches a particular event handler from a single event.
on(eventName, eventHandler)	Subscribes to an event.
on(events)	Subscribes to events.
option()	Gets all UI component properties.
option(optionName)	Gets the value of a single property.
option(optionName, optionValue)	Updates the value of a single property.
option(options)	Updates the values of several properties.
repaint()	Repaints the UI component without reloading data. Call it to update the UI component's markup.
resetOption(optionName)	Resets a property to its default value.
updateToolbox()	Updates the diagram toolboxes.

Events

This section describes events this UI component fires.

Name	Description
contentReady	Raised when the UI component's content is ready.
customCommand	Raised after a custom command item was clicked and allows you to implement custom command logic.
disposing	Raised before the UI component is disposed of.
initialized	Raised only once, after the UI component is initialized.
itemClick	Raised after a shape or connector is clicked.
itemDblClick	Raised after a shape or connector is double-clicked.
optionChanged	Raised after a UI component property is changed.
requestEditOperation	Raised before a user edits a diagram and before the UI related to an edit operation is updated. Requests clarification about edit operation availability.
requestLayoutUpdate	Raised after diagram data has been changed and requests whether the UI component should update the diagram layout.
selectionChanged	Raised after the selection is changed in the Diagram.

React Diagram API

See Also

Configuration

See Also

Methods

See Also

Events

See Also