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

App.vue
  • <template>
  • <DxDiagram
  • id="diagram"
  • ref="diagram"
  • >
  • <DxCustomShape
  • v-for="employee in employees"
  • :category="'employees'"
  • :type="'employee' + employee.ID"
  • :base-type="'rectangle'"
  • :default-text="employee.Full_Name"
  • :allow-edit-text="false"
  • :key="employee.ID"
  • />
  • <DxToolbox :visible="true">
  • <DxGroup
  • :category="'employees'"
  • :title="'Employees'"
  • :display-mode="'texts'"
  • />
  • </DxToolbox>
  • </DxDiagram>
  • </template>
  • <script>
  • / ...
  • data() {
  • return {
  • employees: service.getEmployees()
  • };
  • },
  • </script>

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

App.vue
  • <template>
  • <DxDiagram
  • id="diagram"
  • ref="diagram"
  • >
  • <DxCustomShape
  • :category="'hardware'"
  • :type="'internet'"
  • :title="'Internet'"
  • :background-image-url="'images/shapes/internet.svg'"
  • :background-image-left="0.15"
  • :background-image-top="0"
  • :background-image-width="0.7"
  • :background-image-height="0.7"
  • :default-width="0.75"
  • :default-height="0.75"
  • :default-text="'Internet'"
  • :allow-edit-text="true"
  • :text-left="0"
  • :text-top="0.7"
  • :text-width="1"
  • :text-height="0.3"
  • >
  • <DxConnectionPoint
  • :x="0.5"
  • :y="0"
  • />
  • <DxConnectionPoint
  • :x="0.9"
  • :y="0.5"
  • />
  • <DxConnectionPoint
  • :x="0.5"
  • :y="1"
  • />
  • <DxConnectionPoint
  • :x="0.1"
  • :y="0.5"
  • />
  • </DxCustomShape>
  • // ...
  • <DxToolbox :visible="true">
  • <DxGroup
  • :category="'hardware'"
  • :title="'Hardware'"
  • />
  • </DxToolbox>
  • </DxDiagram>
  • </template>