JavaScript/jQuery 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.
- $(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.
- $(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.