All docs
V20.2
21.2
21.1
20.2
20.1
The page you are viewing does not exist in version 20.1. This link will take you to the root page.
19.2
The page you are viewing does not exist in version 19.2. This link will take you to the root page.
19.1
The page you are viewing does not exist in version 19.1. This link will take you to the root page.
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.
A newer version of this page is available. Switch to the current version.

Default Shape and Connector Settings

The Diagram component allows you to specify default settings for its items in the following ways:

  • Specify settings contained in the defaultItemProperties property.
  • Specify data-binding expressions contained in the edges and nodes properties to define common settings for data-bound edges and nodes.
jQuery
index.js
$(function() {
    $("#diagram").dxDiagram({
        defaultItemProperties: {
            connectorLineType: "straight",
            style: "stroke-width: 3px",
        },
        nodes: {
            // ...
            textStyleExpr: function() {return "fill: green"},
        },
        edges: {
            // ...
            styleExpr: function() {return "stroke: red"},
        },
    });
});
Angular
app.component.html
app.component.ts
<dx-diagram #diagram id="diagram">
    <dxo-default-item-properties connectorLineType="straight" style="stroke-width: 3px">
    </dxo-default-item-properties>
    <dxo-nodes ... [textStyleExpr]="textStyleExpr"></dxo-nodes>
    <dxo-edges ... [styleExpr]="styleExpr"></dxo-edges>
</dx-diagram>
export class AppComponent {
    //...
    styleExpr(obj) {
        return { "stroke": "red" };
    }
    textStyleExpr(obj) {
        return { "fill": "green" };
    }
}
Vue
App.vue
<template>
<DxDiagram
    id="diagram"
    ref="diagram"
>
    <DxDefaultItemProperties :connector-line-type="'straight'" :style="'stroke-width: 3px'" />
    <DxNodes
    ...
    :text-style-expr="textStyleExpr"
    />
    <DxEdges
    ...
    :style-expr="styleExpr"
    />
</DxDiagram>
</template>
<script>
import { DxDiagram, DxNodes, DxEdges, DxDefaultItemProperties} from 'devextreme-vue/diagram';

export default {
    components: {
        DxDiagram, DxNodes, DxEdges, DxDefaultItemProperties
    },
    data() {...},
    methods: {
        textStyleExpr() {
            return 'fill: green';
        },
        styleExpr() {
            return 'stroke: red';
        },
    }
};
</script>
React
App.js
import Diagram, { Nodes, Edges, DefaultItemProperties} from 'devextreme-react/diagram';
// ...
render() {
    return (
    <Diagram id="diagram">
        <DefaultItemProperties connectorLineType="straight"/>
        <Nodes ... textStyleExpr={this.itemTextStyleExpr} />
        <Edges ... styleExpr={this.itemStyleExpr}/>
    </Diagram>
    );
}
itemTextStyleExpr(obj) {
    return { 'fill': 'green' };
}
itemStyleExpr(obj) {
    return { 'stroke': 'red' };
}
ASP.NET Core Controls
DiagramPage.cshtml
@(Html.DevExtreme().Diagram()
    .ID("diagram")
    .DefaultItemProperties(prop=> prop
        .Style("stroke-width: 3px")
        .ConnectorLineType(DiagramConnectorLineType.Straight)
    )
    .Nodes(ns => ns
        // ...
        .TextStyleExpr(new JS("textStyleExpr"))
    )
    .Edges(ns => ns
        // ...
        .StyleExpr(new JS("styleExpr"))
    )
)
<script type="text/javascript">
    function textStyleExpr(obj) {
        return "fill: green";
    }
    function styleExpr(obj) {
        return "stroke: red";
    }
</script>
ASP.NET MVC Controls
DiagramPage.cshtml
@(Html.DevExtreme().Diagram()
    .ID("diagram")
    .DefaultItemProperties(prop=> prop
        .Style("stroke-width: 3px")
        .ConnectorLineType(DiagramConnectorLineType.Straight)
    )
    .Nodes(ns => ns
        // ...
        .TextStyleExpr(new JS("textStyleExpr"))
    )
    .Edges(ns => ns
        // ...
        .StyleExpr(new JS("styleExpr"))
    )
)
<script type="text/javascript">
    function textStyleExpr(obj) {
        return "fill: green";
    }
    function styleExpr(obj) {
        return "stroke: red";
    }
</script>