React Diagram Props

An object that defines the Diagram widget's configuration options.

See Also

accessKey

Specifies the shortcut key that sets focus on the widget.

Type:

String

Default Value: null

The value of this option will be passed to the accesskey attribute of the HTML element that underlies the widget.

activeStateEnabled

Specifies whether or not the widget changes its state when interacting with a user.

Type:

Boolean

Default Value: false

This option is used when the widget is displayed on a platform whose guidelines include the active state change for widgets.

autoZoom

Specifies whether the Diagram widget automatically zooms the work area.

Type:

String

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

contextMenu

Configures the context menu's settings.

Type:

Object

Default Value: {}

View Demo

customShapes[]

Provide access to an array of custom shapes.

Type:

Array<Object>

Default Value: []

Use the customShapes option to extend a collection of built-in shapes with custom shapes.

Use the toolbox option to add the custom shapes to the toolbox.

jQuery
index.js
$(function() {
    var diagram = $("#diagram").dxDiagram({
        customShapes: [{
            category: "hardware",
            type: "internet",
            title: "Internet",
            backgroundImageUrl: "images/shapes/internet.svg",
            backgroundImageLeft: 0.15,
            backgroundImageTop: 0,
            backgroundImageWidth: 0.7,
            backgroundImageHeight: 0.7,
            defaultWidth: 0.75,
            defaultHeight: 0.75,
            defaultText: "Internet",
            allowEditText: true,
            textLeft: 0,
            textTop: 0.7,
            textWidth: 1,
            textHeight: 0.3,
            connectionPoints: [
                { x: 0.5, y: 0 },
                { x: 0.9, y: 0.5 },
                { x: 0.5, y: 1 },
                { x: 0.1, y: 0.5 }
            ]
        },
        ...
    ],
    toolbox: {
        groups: [{ category: "hardware", title: "Hardware" }]
    }
}).dxDiagram("instance");
Angular
app.component.html
app.component.ts
<dx-diagram #diagram id="diagram">
    <dxi-custom-shape 
        category="hardware"
        type="internet"
        title="Internet"
        backgroundImageUrl="images/shapes/internet.svg"
        [backgroundImageLeft]="0.15"
        [backgroundImageTop]="0"
        [backgroundImageWidth]="0.7"
        [backgroundImageHeight]="0.7"
        [defaultWidth]="0.75"
        [defaultHeight]="0.75"
        defaultText="Internet"
        [allowEditText]="false"
        [textLeft]="0"
        [textTop]="0.7"
        [textWidth]="1"
        [textHeight]="0.3">
        <dxi-connection-point [x]="0.5" [y]="0"></dxi-connection-point>
        <dxi-connection-point [x]="0.9" [y]="0.5"></dxi-connection-point>
        <dxi-connection-point [x]="0.5" [y]="1"></dxi-connection-point>
        <dxi-connection-point [x]="0.1" [y]="0.5"></dxi-connection-point>
    </dxi-custom-shape>
    ...
    <dxo-toolbox>
        <dxi-group category="hardware" title="Hardware"></dxi-group>
    </dxo-toolbox>
</dx-diagram>
import { NgModule, Component, ViewChild, enableProdMode } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { HttpClient, HttpClientModule } from '@angular/common/http';

import { DxDiagramModule, DxDiagramComponent } from 'devextreme-angular';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    @ViewChild(DxDiagramComponent, { static: false }, { static: false }) diagram: DxDiagramComponent;
    // Prior to Angular 8
    // @ViewChild(DxDiagramComponent, { static: false }) diagram: DxDiagramComponent;

    constructor(http: HttpClient) {
        http.get('data/diagram-hardware.json').subscribe(data => {
            this.diagram.instance.import(JSON.stringify(data));
        }, err => {
            throw 'Data Loading Error'
        });
    }
}
Vue
App.vue
<template>
    <DxDiagram
        id="diagram"
        ref="diagram"
    >
        <DxCustomShape
            :category="'hardware'"
            :type="'internet'"
            :title="'Internet'"
            :background-image-url="'images/shapes/internet.svg'"
            :background-image-left="0.15"
            :background-image-top="0"
            :background-image-width="0.7"
            :background-image-height="0.7"
            :default-width="0.75"
            :default-height="0.75"
            :default-text="'Internet'"
            :allow-edit-text="true"
            :text-left="0"
            :text-top="0.7"
            :text-width="1"
            :text-height="0.3"
        >
            <DxConnectionPoint
                :x="0.5"
                :y="0"
            />
            <DxConnectionPoint
                :x="0.9"
                :y="0.5"
            />
            <DxConnectionPoint
                :x="0.5"
                :y="1"
            />
            <DxConnectionPoint
                :x="0.1"
                :y="0.5"
            />
        </DxCustomShape>
        ...
        <DxToolbox :visible="true">
            <DxGroup
                :category="'hardware'"
                :title="'Hardware'"
            />
        </DxToolbox>
    </DxDiagram>
</template>

<script>
import { DxDiagram, DxGroup, DxToolbox, DxCustomShape, DxConnectionPoint } from 'devextreme-vue/diagram';
import 'whatwg-fetch';

export default {
components: {
    DxDiagram, DxGroup, DxToolbox, DxCustomShape, DxConnectionPoint
},
mounted() {
    var diagram = this.$refs['diagram'].instance;
    fetch('data/diagram-hardware.json')
    .then(function(response) {
        return response.json();
    })
    .then(function(json) {
        diagram.import(JSON.stringify(json));
    })
    .catch(function() {
        throw 'Data Loading Error';
    });
}
};
</script>
React
App.js
import React from 'react';
import Diagram, { CustomShape, ConnectionPoint, Group, Toolbox } from 'devextreme-react/diagram';

class App extends React.Component {
constructor(props) {
    super(props);

    this.diagramRef = React.createRef();
}

    render() {
        return (
            <Diagram id="diagram" ref={this.diagramRef}>
                <CustomShape
                    category="hardware"
                    type="internet"
                    title="Internet"
                    backgroundImageUrl="images/shapes/internet.svg"
                    backgroundImageLeft={0.15}
                    backgroundImageTop={0}
                    backgroundImageWidth={0.7}
                    backgroundImageHeight={0.7}
                    defaultWidth={0.75}
                    defaultHeight={0.75}
                    defaultText="Internet"
                    allowEditText={true}
                    textLeft={0}
                    textTop={0.7}
                    textWidth={1}
                    textHeight={0.3}>
                <ConnectionPoint x={0.5} y={0} />
                <ConnectionPoint x={0.9} y={0.5} />
                <ConnectionPoint x={0.5} y={1} />
                <ConnectionPoint x={0.1} y={0.5} />
                </CustomShape>
                ...
                <Toolbox>
                    <Group category="hardware" title="Hardware" />
                </Toolbox>
            </Diagram>
        );
    }
}
export default App;
ASP.NET MVC Controls
CustomShapesWithIcons.cshtml
@(Html.DevExtreme().Diagram()
    .ID("diagram")
    .CustomShapes(cs => {
        cs.Add()
            .Category("hardware")
            .Type("internet")
            .Title("Internet")
            .BackgroundImageUrl("../../Content/Images/shapes/internet.svg")
            .BackgroundImageLeft(0.15)
            .BackgroundImageTop(0)
            .BackgroundImageWidth(0.7)
            .BackgroundImageHeight(0.7)
            .DefaultWidth(1.9)
            .DefaultHeight(1.9)
            .DefaultText("Internet")
            .AllowEditText(true)
            .TextLeft(0)
            .TextTop(0.7)
            .TextWidth(1)
            .TextHeight(0.3)
            .ConnectionPoints(cp => {
                cp.Add().X(0.5).Y(0);
                cp.Add().X(0.9).Y(0.5);
                cp.Add().X(0.5).Y(1);
                cp.Add().X(0.1).Y(0.5);

            });
        ...    
    })
    .Toolbox(tb => tb
        .Groups(g => g.Add().Category("hardware").Title("Hardware"))
    )
)

View Demo

disabled

Specifies whether the widget responds to user interaction.

Type:

Boolean

Default Value: false

edges

Allows you to bind the collection of diagram edges to a data source.

Type:

Object

Default Value: null

View Demo

elementAttr

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

Type:

Object

Default Value: {}

jQuery
$(function(){
    $("#diagramContainer").dxDiagram({
        // ...
        elementAttr: {
            id: "elementId",
            class: "class-name"
        }
    });
});
Angular
HTML
TypeScript
<dx-diagram ...
    [elementAttr]="{ id: 'elementId', class: 'class-name' }">
</dx-diagram>
import { DxDiagramModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxDiagramModule
    ],
    // ...
})
Vue
App.vue
<template>
    <DxDiagram ...
        :element-attr="diagramAttributes">
    </DxDiagram>
</template>

<script>
import DxDiagram from 'devextreme-vue/diagram';

export default {
    components: {
        DxDiagram
    },
    data() {
        return {
            diagramAttributes: {
                id: 'elementId',
                class: 'class-name'
            }
        }
    }
}
</script>
React
App.js
import React from 'react';

import Diagram from 'devextreme-react/diagram';

class App extends React.Component {
    diagramAttributes = {
        id: 'elementId',
        class: 'class-name'
    }

    render() {
        return (
            <Diagram ...
                elementAttr={this.diagramAttributes}>
            </Diagram>
        );
    }
}
export default App;

export

Configures export settings.

Type:

Object

These settings are used when a diagram is exported via a UI.

The Export button invokes a drop-down menu that lists export commands. The following formats are supported: PNG, JPEG, and SVG.

focusStateEnabled

Specifies whether the widget can be focused using keyboard navigation.

Type:

Boolean

Default Value: false

fullScreen

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

Type:

Boolean

Default Value: false

gridSize

Specifies the grid pitch.

Type:

Number

|

Object

When the showGrid option is set to true, the Diagram widget displays grid lines that help users align diagram elements. Use the gridSize option to specify the grid pitch.

The units option specifies the measurement unit.

jQuery
JavaScript
$(function() {
    $("#diagram").dxDiagram({
        viewUnits: "cm",
        units: "cm",
        gridSize: {
            value: 2,
            items: [1, 2, 3]
        },
        // or
        // gridSize: 2,
    });
});
See Also

height

Specifies the widget's height.

Type:

Number

|

String

|

Function

Return Value:

Number

|

String

The widget's height.

Default Value: undefined

This option accepts a value of one of the following types:

  • Number
    The height in pixels.

  • String
    A CSS-accepted measurement of height. For example, "55px", "80%", "inherit".

  • Function
    A function returning either of the above. For example:

    JavaScript
    height: function() {
    return window.innerHeight / 1.5;
}

hint

Specifies text for a hint that appears when a user pauses on the widget.

Type:

String

Default Value: undefined

hoverStateEnabled

Specifies whether the widget changes its state when a user pauses on it.

Type:

Boolean

Default Value: false

nodes

Allows you to bind the collection of diagram nodes to a data source.

Type:

Object

Default Value: null

View Demo

onContentReady

A function that is executed when the widget's content is ready and each time the content is changed.

Type:

Function

Function parameters:
e:

Object

Information about the event.

Object structure:
Name Type Description
component

Diagram

The widget's instance.
element

HTMLElement | jQuery

The widget's container. It is an HTML Element or a jQuery Element when you use jQuery.
model

Object

Model data. Available only when using Knockout.
Default Value: null

onDataChanged

A function that is executed when the diagram's data changes.

Type:

Function

Function parameters:
e:

Object

Information about the event.

Object structure:
Name Type Description
component

Diagram

The widget instance's name.
element

HTMLElement | jQuery

The widget's container. It is an HTML Element or a jQuery Element when you use jQuery.
model

Object

Model data. Available only if you use Knockout.
Default Value: null

onDisposing

A function that is executed before the widget is disposed of.

Type:

Function

Function parameters:
e:

Object

Information about the event.

Object structure:
Name Type Description
component

Diagram

The widget's instance.
element

HTMLElement | jQuery

The widget's container. It is an HTML Element or a jQuery Element when you use jQuery.
model

Object

Model data. Available only if you use Knockout.
Default Value: null

onInitialized

A function used in JavaScript frameworks to save the widget instance.

Type:

Function

Function parameters:
e:

Object

Information about the event.

Object structure:
Name Type Description
component

Diagram

The widget's instance.
element

HTMLElement | jQuery

The widget's container. It is an HTML Element or a jQuery Element when you use jQuery.
Default Value: null

See Also

onItemClick

A function that is executed after a shape or connector is clicked.

Type:

Function

Function parameters:
e:

Object

Information about the event.

Object structure:
Name Type Description
component

Diagram

The widget instance's name.
element

HTMLElement | jQuery

The widget's container. It is an HTML Element or a jQuery Element when you use jQuery.
item

dxDiagramItem

The item (shape or connector) related to the event.
model

Object

Model data. Available only if you use Knockout.
Default Value: null

onItemDblClick

A function that is executed after a shape or connector is double-clicked.

Type:

Function

Function parameters:
e:

Object

Information about the event.

Object structure:
Name Type Description
component

Diagram

The widget instance's name.
element

HTMLElement | jQuery

The widget's container. It is an HTML Element or a jQuery Element when you use jQuery.
item

dxDiagramItem

The item (shape or connector) related to the event.
model

Object

Model data. Available only if you use Knockout.
Default Value: null

onOptionChanged

A function that is executed after a widget option is changed.

Type:

Function

Function parameters:
e:

Object

Information about the event.

Object structure:
Name Type Description
model

Object

Model data. Available only if you use Knockout.
fullName

String

The path to the modified option that includes all parent options.
element

HTMLElement | jQuery

The widget's container. It is an HTML Element or a jQuery Element when you use jQuery.
component

Diagram

The widget's instance.
name

String

The modified option if it belongs to the first level. Otherwise, the first-level option it is nested into.
value any

The modified option's new value.
Default Value: null

onSelectionChanged

A function that is executed after the selection is changed in the Diagram.

Type:

Function

Function parameters:
e:

Object

Information about the event.

Object structure:
Name Type Description
component

Diagram

The widget instance's name.
element

HTMLElement | jQuery

The widget's container. It is an HTML Element or a jQuery Element when you use jQuery.
items

Array<dxDiagramItem>

An array of selected items (shapes or connectors).
model

Object

Model data. Available only if you use Knockout.
Default Value: null

pageColor

Specifies the color of a diagram page.

Type:

String

Default Value: 'white'

The following color formats are available:

  • Longhand and shorthand hexadecimal notations. For example, "#3b3", "#31bb32".

  • RGB and RGBA formats. For example, "rgb(51,187,51)", "rgba(0,204,0,1)".

  • Named colors. For example, "darkturquoise".

NOTE
If you call the import method, the import method applies the imported page settings and the pageColor option is ignored.

pageOrientation

Specifies the page orientation.

Type:

String

Default Value: 'portrait'
Accepted Values: 'portrait' | 'landscape'

NOTE
If you call the import method, the import method applies the imported page settings and the pageColor option is ignored.

pageSize

Specifies a size of pages.

Type:

Object

The units option specifies the page's measurement units.

jQuery
JavaScript
$(function() {
    $("#diagram").dxDiagram({
        units: "cm",
        pageSize: {
            width: 10,
            height: 10,
        },
    });
});
NOTE
If you call the import method, the import method applies the imported page settings and the pageColor option is ignored.

propertiesPanel

Provides access to Properties panel settings.

Type:

Object

Default Value: {}

View Demo

readOnly

Specifies whether the diagram is read-only.

Type:

Boolean

Default Value: false

Set the readOnly option to true to prohibit users from editing the diagram.

View Demo

rtlEnabled

Switches the widget to a right-to-left representation.

Type:

Boolean

Default Value: false

When this option is set to true, the widget text flows from right to left, and the layout of elements is reversed. To switch the entire application/site to the right-to-left representation, assign true to the rtlEnabled field of the object passed to the DevExpress.config(config) method.

JavaScript
DevExpress.config({
    rtlEnabled: true
});
See Also

showGrid

Specifies whether grid lines are visible.

Type:

Boolean

Default Value: true

See Also

simpleView

Switch the Diagram widget to simple view mode.

Type:

Boolean

Default Value: false

In simple view mode, the control does not divide the work area into pages and the diagram's content occupies all the available area inside the component.

View Demo

snapToGrid

Specifies whether diagram elements should snap to grid lines.

Type:

Boolean

Default Value: true

See Also

tabIndex

Specifies the number of the element when the Tab key is used for navigating.

Type:

Number

Default Value: 0

The value of this option will be passed to the tabindex attribute of the HTML element that underlies the widget.

toolbar

Provides access to toolbar settings.

Type:

Object

Default Value: {}

View Demo

Diagram toolbox

toolbox

Provides access to toolbox settings.

Type:

Object

Default Value: {}

View Demo

The toolbox contains groups of shapes. Use this option to access the toolbox settings.

Diagram toolbox

units

Specifies the unit for measurement options (for example, defaultHeight, gridSize, leftExpr).

Type:

String

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

viewUnits

Specifies the measurement unit that is displayed in user interface elements.

Type:

String

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

The viewUnits option specifies the measurement unit in Properties panel and in the Diagram work area.

Diagram viewUnits

visible

Specifies whether the widget is visible.

Type:

Boolean

Default Value: true

width

Specifies the widget's width.

Type:

Number

|

String

|

Function

Return Value:

Number

|

String

The widget's width.

Default Value: undefined

This option accepts a value of one of the following types:

  • Number
    The width in pixels.

  • String
    A CSS-accepted measurement of width. For example, "55px", "80%", "auto", "inherit".

  • Function
    A function returning either of the above. For example:

    JavaScript
    width: function() {
    return window.innerWidth / 1.5;
}

zoomLevel

Specifies the zoom level.

Type:

Number

|

Object

Default Value: 1

jQuery
JavaScript
$(function() {
    $("#diagram").dxDiagram({
        zoomLevel: 0.75,
    });
});