Angular 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.component.html
  • <dx-diagram #diagram id="diagram">
  • <dxi-custom-shape *ngFor="let emp of employees"
  • category="employees"
  • [type]='"employee" + emp.ID'
  • baseType="rectangle"
  • [defaultText]="emp.Full_Name"
  • [allowEditText]="false">
  • </dxi-custom-shape>
  • <dxo-toolbox>
  • <dxi-group category="employees" title="Employees" displayMode="texts"></dxi-group>
  • </dxo-toolbox>
  • </dx-diagram>

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.component.html
  • <dx-diagram #diagram id="diagram">
  • <dxi-custom-shape
  • 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]="false"
  • [textLeft]="0"
  • [textTop]="0.7"
  • [textWidth]="1"
  • [textHeight]="0.3">
  • <dxi-connection-point [x]="0.5" [y]="0"></dxi-connection-point>
  • <dxi-connection-point [x]="0.9" [y]="0.5"></dxi-connection-point>
  • <dxi-connection-point [x]="0.5" [y]="1"></dxi-connection-point>
  • <dxi-connection-point [x]="0.1" [y]="0.5"></dxi-connection-point>
  • </dxi-custom-shape>
  • // ...
  • <dxo-toolbox>
  • <dxi-group category="hardware" title="Hardware"></dxi-group>
  • </dxo-toolbox>
  • </dx-diagram>