All docs
V21.1
21.2
21.1
20.2
20.1
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.

Custom Shapes

The Diagram UI component provides a collection of built-in shapes. Use the customShapes property to extend this collection with custom shapes.

The toolbox property allows you to add the custom shapes to the toolbox.

A custom shape can be created based on a default shape type or with a custom background image. The type property identifies custom shapes and should be unique.

Shapes with Base Type

Shapes with Base Type

Use the baseType property to specify a base type for a shape. The built-in shape types are shown in the Shape Types section.

View Demo

Diagram control custom shapes

jQuery
index.js
$(function() {
    var diagram = $("#diagram").dxDiagram({
        customShapes: employees.map(
            function(emp) {
                return {
                    category: "employees",
                    type: "employee" + emp.ID,
                    baseType: "rectangle",
                    defaultText: emp.Full_Name,
                    allowEditText: false
                }
            }
        ),
        toolbox: {
            groups: [{ category: "employees", title: "Employees", displayMode: "texts" }]
        }
    }).dxDiagram("instance");
});
Angular
app.component.html
<dx-diagram #diagram id="diagram">
    <dxi-custom-shape *ngFor="let emp of employees"
        category="employees"
        [type]='"employee" + emp.ID'
        baseType="rectangle"
        [defaultText]="emp.Full_Name"
        [allowEditText]="false">
    </dxi-custom-shape>
    <dxo-toolbox>
        <dxi-group category="employees" title="Employees" displayMode="texts"></dxi-group>
    </dxo-toolbox>
</dx-diagram>
Vue
App.vue
<template>
    <DxDiagram
        id="diagram"
        ref="diagram"
    >
        <DxCustomShape
        v-for="employee in employees"
        :category="'employees'"
        :type="'employee' + employee.ID"
        :base-type="'rectangle'"
        :default-text="employee.Full_Name"
        :allow-edit-text="false"
        :key="employee.ID"
        />
        <DxToolbox :visible="true">
            <DxGroup
                :category="'employees'"
                :title="'Employees'"
                :display-mode="'texts'"
            />
        </DxToolbox>
    </DxDiagram>
</template>
<script>
/ ...
data() {
    return {
    employees: service.getEmployees()
    };
},
</script>
React
App.js
class App extends React.Component {
// ...
    render() {
        return (
            <Diagram id="diagram" ref={this.diagramRef}>
                {this.employees.map(function(employee, index) {
                    return <CustomShape category="employees" type={`employee${employee.ID}`} baseType="rectangle"
                        defaultText={employee.Full_Name} allowEditText={false} key={index} />;
                })}
                <Toolbox>
                    <Group category="employees" title="Employees" displayMode="texts" />
                </Toolbox>
            </Diagram>
        );
    }
}
ASP.NET Core Controls
Diagram.cshtml
@(Html.DevExtreme().Diagram()
        .ID("diagram")
        .CustomShapes(cs => {
            foreach(var employee in Model) {
                cs.Add().Category("employees").Type("employee" + employee.ID).BaseType("rectangle").DefaultText(employee.FullName).AllowEditText(false);
            }
        })
        .Toolbox(tb => tb
            .Groups(g => g.Add().Category("employees").Title("Employees").DisplayMode(DiagramToolboxDisplayMode.Texts))
        )
)
ASP.NET MVC Controls
Diagram.cshtml
@(Html.DevExtreme().Diagram()
        .ID("diagram")
        .CustomShapes(cs => {
            foreach(var employee in Model) {
                cs.Add().Category("employees").Type("employee" + employee.ID).BaseType("rectangle").DefaultText(employee.FullName).AllowEditText(false);
            }
        })
        .Toolbox(tb => tb
            .Groups(g => g.Add().Category("employees").Title("Employees").DisplayMode(DiagramToolboxDisplayMode.Texts))
        )
)

Shapes with Custom Background Images

Use the backgroundImageUrl property to specify a background image for a shape.

NOTE
Shape images should be in SVG format.

View Demo

Diagram control custom shapes

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
<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>
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>
React
App.js
class App extends React.Component {
    // ...
    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>
        );
    }
}
ASP.NET Core Controls
 tab: Diagram.cshtml 

@(Html.DevExtreme().Diagram() .ID("diagram") .CustomShapes(cs => { cs.Add() .Category("hardware") .Type("internet") .Title("Internet") .BackgroundImageUrl(Url.Content("/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(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")) ) )

ASP.NET MVC Controls
Diagram.cshtml
@(Html.DevExtreme().Diagram()
    .ID("diagram")
    .CustomShapes(cs => {
        cs.Add()
            .Category("hardware")
            .Type("internet")
            .Title("Internet")
            .BackgroundImageUrl(Url.Content("~/Content/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(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"))
    )
)