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.
- <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.
- <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>
If you have technical questions, please create a support ticket in the DevExpress Support Center.