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.
jQuery
$(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.
jQuery
$(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");
If you have technical questions, please create a support ticket in the DevExpress Support Center.