All docs
V24.1
24.2
24.1
23.2
23.1
22.2
The page you are viewing does not exist in version 22.2.
22.1
The page you are viewing does not exist in version 22.1.
21.2
The page you are viewing does not exist in version 21.2.
21.1
The page you are viewing does not exist in version 21.1.
20.2
The page you are viewing does not exist in version 20.2.
20.1
The page you are viewing does not exist in version 20.1.
19.2
The page you are viewing does not exist in version 19.2.
19.1
The page you are viewing does not exist in version 19.1.
18.2
The page you are viewing does not exist in version 18.2.
18.1
The page you are viewing does not exist in version 18.1.
17.2
The page you are viewing does not exist in version 17.2.

JavaScript/jQuery Diagram Types

AutoZoomMode

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

Accepted Values: 'fitContent' | 'fitWidth' | 'disabled'

Command

Specifies the Diagram command's identifier.

Accepted Values: 'separator' | 'exportSvg' | 'exportPng' | 'exportJpg' | 'undo' | 'redo' | 'cut' | 'copy' | 'paste' | 'selectAll' | 'delete' | 'fontName' | 'fontSize' | 'bold' | 'italic' | 'underline' | 'fontColor' | 'lineStyle' | 'lineWidth' | 'lineColor' | 'fillColor' | 'textAlignLeft' | 'textAlignCenter' | 'textAlignRight' | 'lock' | 'unlock' | 'sendToBack' | 'bringToFront' | 'insertShapeImage' | 'editShapeImage' | 'deleteShapeImage' | 'connectorLineType' | 'connectorLineStart' | 'connectorLineEnd' | 'layoutTreeTopToBottom' | 'layoutTreeBottomToTop' | 'layoutTreeLeftToRight' | 'layoutTreeRightToLeft' | 'layoutLayeredTopToBottom' | 'layoutLayeredBottomToTop' | 'layoutLayeredLeftToRight' | 'layoutLayeredRightToLeft' | 'fullScreen' | 'zoomLevel' | 'showGrid' | 'snapToGrid' | 'gridSize' | 'units' | 'pageSize' | 'pageOrientation' | 'pageColor' | 'simpleView' | 'toolbox'

ConnectorLineEnd

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

Accepted Values: 'none' | 'arrow' | 'outlinedTriangle' | 'filledTriangle'

ConnectorLineType

Specifies the default type of a connector.

Accepted Values: 'straight' | 'orthogonal'

ConnectorPosition

The position of the connector in the processed point.

Accepted Values: 'start' | 'end'

ContentReadyEvent

The type of the contentReady event handler's argument.

import { ContentReadyEvent } from "devextreme/ui/diagram"
Type:

Object

CustomCommandEvent

The type of the customCommand event handler's argument.

import { CustomCommandEvent } from "devextreme/ui/diagram"
Type:

Object

DataLayoutType

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

Accepted Values: 'auto' | 'off' | 'tree' | 'layered'

DiagramExportFormat

Exports the diagram to an image format.

Accepted Values: 'svg' | 'png' | 'jpg'

DisposingEvent

The type of the disposing event handler's argument.

import { DisposingEvent } from "devextreme/ui/diagram"
Type:

Object

InitializedEvent

The type of the initialized event handler's argument.

import { InitializedEvent } from "devextreme/ui/diagram"
Type:

Object

ItemClickEvent

The type of the itemClick event handler's argument.

import { ItemClickEvent } from "devextreme/ui/diagram"
Type:

Object

ItemDblClickEvent

The type of the itemDblClick event handler's argument.

import { ItemDblClickEvent } from "devextreme/ui/diagram"
Type:

Object

ItemType

Returns the type of the item.

Accepted Values: 'shape' | 'connector'

ModelOperation

Specifies the edit operation.

Accepted Values: 'addShape' | 'addShapeFromToolbox' | 'deleteShape' | 'deleteConnector' | 'changeConnection' | 'changeConnectorPoints' | 'beforeChangeShapeText' | 'changeShapeText' | 'beforeChangeConnectorText' | 'changeConnectorText' | 'resizeShape' | 'moveShape'

OptionChangedEvent

The type of the optionChanged event handler's argument.

import { OptionChangedEvent } from "devextreme/ui/diagram"
Type:

Object

PanelVisibility

Specifies the panel's visibility.

Accepted Values: 'auto' | 'visible' | 'collapsed' | 'disabled'

RequestEditOperationEvent

The type of the requestEditOperation event handler's argument.

import { RequestEditOperationEvent } from "devextreme/ui/diagram"
Type:

Object

RequestEditOperationReason

Specifies the reason to request edit operation.

Accepted Values: 'checkUIElementAvailability' | 'modelModification'

RequestLayoutUpdateEvent

The type of the requestLayoutUpdate event handler's argument.

import { RequestLayoutUpdateEvent } from "devextreme/ui/diagram"
Type:

Object

SelectionChangedEvent

The type of the selectionChanged event handler's argument.

import { SelectionChangedEvent } from "devextreme/ui/diagram"
Type:

Object

ShapeCategory

Specifies the category of shapes.

Accepted Values: 'general' | 'flowchart' | 'orgChart' | 'containers' | 'custom'

ShapeType

The type of the processed shape.

Accepted Values: 'text' | 'rectangle' | 'ellipse' | 'cross' | 'triangle' | 'diamond' | 'heart' | 'pentagon' | 'hexagon' | 'octagon' | 'star' | 'arrowLeft' | 'arrowTop' | 'arrowRight' | 'arrowBottom' | 'arrowNorthSouth' | 'arrowEastWest' | 'process' | 'decision' | 'terminator' | 'predefinedProcess' | 'document' | 'multipleDocuments' | 'manualInput' | 'preparation' | 'data' | 'database' | 'hardDisk' | 'internalStorage' | 'paperTape' | 'manualOperation' | 'delay' | 'storedData' | 'display' | 'merge' | 'connector' | 'or' | 'summingJunction' | 'verticalContainer' | 'horizontalContainer' | 'cardWithImageOnLeft' | 'cardWithImageOnTop' | 'cardWithImageOnRight'

ToolboxDisplayMode

Specifies how shapes are displayed in the toolbox.

Accepted Values: 'icons' | 'texts'

Units

Specifies the measurement unit for size properties.

Accepted Values: 'in' | 'cm' | 'px'