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

See Also

allowEditImage

Specifies whether a card shape's image can be edited.

Type:

Boolean

This option is in effect for shapes with the baseType option set to "cardWithImageOnLeft", "cardWithImageOnTop", or "cardWithImageOnRight".

A card shape is designed to contain an image. The defaultImageUrl option specifies the default image that is displayed in the card. Set the allowEditImage option to true to allow users to change the image from a context menu.

Diagram - Card's context menu

See Also

defaultImageUrl

allowEditText

Specifies whether the shape's text can be edited.

Type:

Boolean

See Also

defaultText

allowResize

Specifies whether the shape can be resized.

Type:

Boolean

When shape resizing is enabled you can restrict shape sizes with the following options: minWidth, maxWidth, minHeight, and maxHeight.

backgroundImageHeight

Specifies the shape background image's fractional height.

Type:

Number

This option specifies a fraction from 0 to 1 that represents the shape background image height in relation to the shape height. If the backgroundImageHeight option is set to 1, the image height is equal to the shape height.

The absolute image height is calculated by multiplying the backgroundImageHeight value by the shape's height.

backgroundImageLeft

Specifies the shape background image's left offset.

Type:

Number

This option specifies a fractional left offset of a shape background image toward the shape width. If the backgroundImageLeft option is set to 0, the image's left edge matches the shape's left edge.

The absolute offset is calculated by multiplying the backgroundImageLeft value by the shape's width.

backgroundImageToolboxUrl

Specifies the shape image displayed in the toolbox.

Type:

String

When a custom shape is created with a custom background image (the backgroundImageUrl option), you can use the backgroundImageToolboxUrl option to specify the image displayed for the shape in the toolbox.

If the option is not set, the toolbox displays an image specified in the backgroundImageUrl option.

NOTE
Shape background images should be supplied as SVG files.

Diagram - Custom shape's image properties

backgroundImageTop

Specifies the shape background image's top offset.

Type:

Number

This option specifies the top offset (in fractions) of a shape's background image in relation to the shape's height. If the backgroundImageTop option is set to 0, the image's top edge matches the shape's top edge.

The absolute offset is calculated by multiplying the backgroundImageTop value by the shape's height.

backgroundImageUrl

Specifies the shape background image's URL.

Type:

String

A custom shape can be created based on a default shape type (the baseType option) or with a custom background image (the backgroundImageUrl option).

Use the backgroundImageToolboxUrl option to specify an image displayed for the shape in the toolbox. If the option is not set, the toolbox displays an image specified in the backgroundImageUrl option.

Diagram - Custom shape's image properties

The backgroundImageUrl option is not in effect if the baseType is specified.

NOTE
Shape background images should be supplied as SVG files.
See Also

defaultImageUrl

backgroundImageWidth

Specifies the shape background image's fractional width.

Type:

Number

This option specifies a fraction from 0 to 1 that represents the shape background image width in relation to the shape width. If the backgroundImageWidth option is set to 1, the image width is equal to the shape width.

The absolute image width is calculated by multiplying the backgroundImageWidth value by the shape width.

baseType

Specifies the base shape type for the custom shape. The built-in shape types are shown in the Shape Types section.

Type:

String

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'

When the baseType option is specified, the backgroundImageUrl option is not in effect.

Use the DiagramShapeType enum to specify this option when the widget is used as an ASP.NET MVC 5 Control or a DevExtreme-Based ASP.NET Core Control. This enum accepts the following values: Text, Rectangle, Ellipse, Cross, Triangle, Diamond, Heart, Pentagon, 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.

category

Specifies a category to which the custom shape belongs.

Type:

String

Use the category option to link a custom shape to a default or custom category. If the option in not specified, it is set to "custom".

To add a category with shapes to the toolbox, add a group with the corresponding category property value to the toolbox object.

component

An alias for the template option specified in React. Accepts a custom component. Refer to Using a Custom Component for more information.

connectionPoints[]

An array of the shape's connection points.

Type:

Array<Object>

Diagram connection points

defaultHeight

Specifies the initial height of the shape.

Type:

Number

The units option specifies the measurement unit.

defaultImageUrl

Specifies the URL of an image displayed in a card shape.

Type:

String

This option is in effect for shapes with the baseType option set to "cardWithImageOnLeft", "cardWithImageOnTop", or "cardWithImageOnRight".

A card shape is designed to contain an image. Use the defaultImageUrl option to specify the default image that is displayed in the card. If the allowEditImage option is set to true, the image context menu displays commands that allow users to change the image.

Diagram - Custom shape's image properties

See Also

backgroundImageUrl

defaultText

Specifies the initial text of the shape.

Type:

String

See Also

allowEditText

defaultWidth

Specifies the initial width of the shape.

Type:

Number

The units option specifies the measurement unit.

imageHeight

Specifies the shape image's fractional height.

Type:

Number

This option specifies a fraction from 0 to 1 that represents the shape image height in relation to the shape height. If the imageHeight option is set to 1, the image height is equal to the shape height.

The absolute image height is calculated by multiplying the imageHeight value by the shape's height.

imageLeft

Specifies the shape image's left offset.

Type:

Number

This option specifies a fractional left offset of a shape image toward the shape width. If the imageLeft option is set to 0, the image's left edge matches the shape's left edge.

The absolute offset is calculated by multiplying the imageLeft value by the shape's width.

imageTop

Specifies the shape image's top offset.

Type:

Number

This option specifies the top offset (in fractions) of a shape's image in relation to the shape's height. If the imageTop option is set to 0, the image's top edge matches the shape's top edge.

The absolute offset is calculated by multiplying the imageTop value by the shape's height.

imageWidth

Specifies the shape image's fractional width.

Type:

Number

This option specifies a fraction from 0 to 1 that represents the shape image width in relation to the shape width. If the imageWidth option is set to 1, the image width is equal to the shape width.

The absolute image width is calculated by multiplying the imageWidth value by the shape width.

keepRatioOnAutoSize

Specifies whether the shape maintains its width-to-height ratio on auto resize.

Type:

Boolean

When the Diagram widget is bound to a data source, shapes are resized to fit the shape's text. Set the keepRatioOnAutoSize option to true to maintain the width-to-height ratio of the shape on auto resize.

maxHeight

Specifies the maximum height of the shape.

Type:

Number

The units option specifies the measurement unit.

maxWidth

Specifies the maximum width of the shape.

Type:

Number

The units option specifies the measurement unit.

minHeight

Specifies the maximum height of the shape.

Type:

Number

The units option specifies the measurement unit.

minWidth

Specifies the minimum width of the shape.

Type:

Number

The units option specifies the measurement unit.

render

An alias for the template option specified in React. Accepts a rendering function. Refer to Using a Rendering Function for more information.

template

Specifies a custom template for the shape.

Type:

template

Template Data:
Name Type Description
item dxDiagramShape

The shapes object.

The template content must be presented as SVG elements.

Use the customShapeTemplate option to define a common template for all shapes in the Diagram widget.

View Demo

See Also

templateHeight

Specifies the shape template's fractional height.

Type:

Number

This option specifies a fraction from 0 to 1 that represents the shape template height in relation to the shape height. If the templateHeight option is set to 1, the template height is equal to the shape height.

The absolute template height is calculated by multiplying the templateHeight value by the shape height.

templateLeft

Specifies the shape template's left offset.

Type:

Number

This option specifies a fractional left offset of a shape template toward the shape width. If the templateLeft option is set to 0, the template's left edge matches the shape's left edge.

The absolute offset is calculated by multiplying the templateLeft value by the shape's width.

templateTop

Specifies the shape template's top offset.

Type:

Number

This option specifies a fractional top offset of a shape template toward the shape width. If the templateTop option is set to 0, the template's top edge matches the shape's top edge.

The absolute offset is calculated by multiplying the templateTop value by the shape's width.

templateWidth

Specifies the shape template's fractional width.

Type:

Number

This option specifies a fraction from 0 to 1 that represents the shape template width in relation to the shape width. If the templateWidth option is set to 1, the template width is equal to the shape width.

The absolute template width is calculated by multiplying the templateWidth value by the shape width.

textHeight

Specifies the shape text container's height.

Type:

Number

This option specifies a fraction from 0 to 1 that represents the height of a shape's text in relation to the shape height. If the textHeight option is set to 1, the text height is equal to the shape height.

The absolute text height is calculated by multiplying the textHeight value by the shape height.

textLeft

Specifies the shape text's left offset.

Type:

Number

This option specifies the shape text's left offset (in fractions) in relation to the shape width. If the textLeft option is set to 0, the text's left edge matches the shape's left edge.

The absolute offset is calculated by multiplying the textLeft value by the shape width.

textTop

Specifies the shape text's top offset.

Type:

Number

This option specifies the shape text's top offset (in fractions) in relation to the shape height. If the textTop option is set to 0, the text's top edge matches the shape's top edge.

The absolute offset is calculated by multiplying the textTop value by the shape height.

textWidth

Specifies the shape text container's width.

Type:

Number

This option specifies a fraction from 0 to 1 that represents the shape text's width in relation to the shape width. If the textWidth option is set to 1, the text width is equal to the shape width.

The absolute text width is calculated by multiplying the textWidth value by the shape width.

title

Specifies the shape's tooltip in the toolbox panel.

Type:

String

toolboxComponent

An alias for the toolboxTemplate option specified in React. Accepts a custom component. Refer to Using a Custom Component for more information.

toolboxRender

An alias for the toolboxTemplate option specified in React. Accepts a rendering function. Refer to Using a Rendering Function for more information.

toolboxTemplate

Specifies a custom template for the shape in the toolbox.

Type:

template

Template Data:
Name Type Description
item dxDiagramShape

The shapes object.

The template content must be presented as SVG elements.

Use the customShapeToolboxTemplate option to define a common template for all diagram shapes in the toolbox.

View Demo

See Also

toolboxWidthToHeightRatio

Specifies the aspect ratio of the shape in the toolbox.

Type:

Number

The size of a shape in the toolbox is determined automatically based on the toolbox width and the number of shapes per row.

Use the toolboxWidthToHeightRatio option to change the aspect ratio of the shape.

type

Specifies the shape's type.

Type:

String

The type value must be specified and must be unique.