Help us shape the 2021 DevExtreme Roadmap. Take our 5 minute survey.
Dismiss

Diagram

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

Included in: dx-diagram.js, dx.all.js
Module: ui/diagram
Export: default
Diagram interactive configuration
Copy Code
Copy to Codepen
import Diagram from "devextreme/ui/diagram";

new Diagram(container, {
});

                    
Type:

Object

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

The Diagram UI component reloads the modified diagram data every time the data source changes. The onRequestLayoutUpdate function 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 unit for measurement properties (for example, defaultHeight, gridSize, leftExpr).

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.

See Also

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 an property to its default value.

updateToolbox()

Updates the diagram toolboxes.

See Also

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.

See Also