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.

View Demo

Diagram control custom shapes

index.js
  • $(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

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");