All docs
V20.1
20.2
20.1
19.2
19.1
18.2
The page you are viewing does not exist in version 18.2. This link will take you to the root page.
18.1
The page you are viewing does not exist in version 18.1. This link will take you to the root page.
17.2
The page you are viewing does not exist in version 17.2. This link will take you to the root page.
17.1
The page you are viewing does not exist in version 17.1. This link will take you to the root page.
16.2
The page you are viewing does not exist in version 16.2. This link will take you to the root page.

Diagram

The Diagram widget 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 widget's configuration options.

Name Description
autoZoomMode

Specifies how the Diagram widget 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 option specified in React. Accepts a custom component. Refer to Using a Custom Component for more information.

customShapeRender

An alias for the customShapeTemplate option 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.

defaultItemProperties

Configures default item properties.

disabled

Specifies whether the widget 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.

elementAttr

Specifies the attributes to be attached to the widget's root element.

export

Configures export settings.

fullScreen

Specifies whether or not to display the widget in full-screen mode.

gridSize

Specifies the grid pitch.

hasChanges

Indicates whether diagram content has been changed.

height

Specifies the widget'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 widget'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 widget is disposed of.

onInitialized

A function used in JavaScript frameworks to save the widget 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 widget option is changed.

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 widget to a right-to-left representation.

showGrid

Specifies whether grid lines are visible.

simpleView

Switch the Diagram widget 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 options (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 widget is visible.

width

Specifies the widget's width.

zoomLevel

Specifies the zoom level.

See Also

Methods

This section describes members used to manipulate the widget.

Name Description
beginUpdate()

Prevents the widget from refreshing until the endUpdate() method is called.

defaultOptions(rule)

Specifies the device-dependent default configuration options for this component.

dispose()

Disposes of all the resources allocated to the Diagram instance.

element()

Gets the root widget element.

endUpdate()

Refreshes the widget 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 widget.

getEdgeDataSource()

Returns the DataSource instance.

getInstance(element)

Gets the instance of a widget found using its DOM node.

getNodeDataSource()

Gets the DataSource instance.

import(data, updateExistingItemsOnly)

Imports the diagram data.

instance()

Gets the widget's instance. Use it to access other methods of the widget.

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 widget options.

option(optionName)

Gets the value of a single option.

option(optionName, optionValue)

Updates the value of a single option.

option(options)

Updates the values of several options.

repaint()

Repaints the widget without reloading data. Call it to update the widget's markup.

resetOption(optionName)

Resets an option to its default value.

See Also

Events

This section describes events this widget fires.

Name Description
contentReady

Raised when the widget'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 widget is disposed of.

initialized

Raised only once, after the widget 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 widget option is changed.

selectionChanged

Raised after the selection is changed in the Diagram.

See Also