React 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
JavaScript
$(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");
});

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
JavaScript
$(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");