Vue Diagram - 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"))
    )
)