DevExtreme jQuery - Custom Shapes
The Diagram widget provides a collection of built-in shapes. Use the customShapes option to extend this collection with custom shapes.
NOTE
Shape images should be supplied as SVG files.
Use the toolbox option to add the custom shapes to the toolbox.
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");Feedback