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"
Selector: Diagram

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 unsaved changes.

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 is rendered and each time the component is repainted.

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 allows you to specify whether or not the UI component should reapply its auto layout after diagram data is reloaded.

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.

useNativeScrolling

Specifies whether or not the UI component uses native scrolling.

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()

Postpones rendering that can negatively affect performance 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.

fitToContent()

Fits the diagram content into the work area. The maximum scale is 100%.

fitToWidth()

Fits the diagram content's width into the work area width. The maximum scale is 100%.

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.

getItems()

Returns an array of diagram items.

getNodeDataSource()

Gets the DataSource instance.

getSelectedItems()

Returns an array of selected diagram items.

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()

Renders the component again without reloading data. Use the method to update the component's markup and appearance dynamically.

resetOption(optionName)

Resets a property to its default value.

scrollToItem(item)

Scrolls the view area to the specified item.

setSelectedItems(items)

Selects the specified items.

updateToolbox()

Updates the diagram toolboxes.

See Also

Events

This section describes events this UI component fires.

Name Description
contentReady

Raised when the UI component is rendered and each time the component is repainted.

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.

selectionChanged

Raised after the selection is changed in the Diagram.

See Also

Interfaces

This section describes interfaces that the Diagram component uses.

Types

Name Description
AutoZoomMode

Specifies how the Diagram UI component automatically zooms the work area.

Command

Specifies the Diagram command's identifier.

ConnectorLineEnd

Specifies the default tip of a connector's start/end point.

ConnectorLineType

Specifies the default type of a connector.

ConnectorPosition

The position of the connector in the processed point.

ContentReadyEvent

The type of the contentReady event handler's argument.

CustomCommandEvent

The type of the customCommand event handler's argument.

DataLayoutType

Specifies an auto-layout algorithm that the UI component uses to build a diagram.

DiagramExportFormat

Exports the diagram to an image format.

DisposingEvent

The type of the disposing event handler's argument.

InitializedEvent

The type of the initialized event handler's argument.

ItemClickEvent

The type of the itemClick event handler's argument.

ItemDblClickEvent

The type of the itemDblClick event handler's argument.

ItemType

Returns the type of the item.

ModelOperation

Specifies the edit operation.

OptionChangedEvent

The type of the optionChanged event handler's argument.

PanelVisibility

Specifies the panel's visibility.

RequestEditOperationEvent

The type of the requestEditOperation event handler's argument.

RequestEditOperationReason

Specifies the reason to request edit operation.

RequestLayoutUpdateEvent

The type of the requestLayoutUpdate event handler's argument.

SelectionChangedEvent

The type of the selectionChanged event handler's argument.

ShapeCategory

Specifies the category of shapes.

ShapeType

The type of the processed shape.

ToolboxDisplayMode

Specifies how shapes are displayed in the toolbox.

Units

Specifies the measurement unit for size properties.