Diagram Shapes

The Shape is the main building block of the Kendo UI for Angular Diagram. It represents a single node in the graph. This article describes all Diagram shape customization options.

The following example demonstrates different types of shapes and their properties in action.

Change Theme

Theme

Loading ...

Basics

The fundamental settings of the Kendo UI for Angular Diagram shapes include:

• The Shape type determines the overall appearance and content.
• The Shape id is required in order to define connections between related shapes.
• The Shape content defines the Shape label and text properties.
• The width and height properties determine the Shape size in pixels. The default values are 100.

In addition to the above, use the X and Y Shape parameters to define the exact Shape position coordinates. These parameters have effect only when a predefined Diagram layout is not set.

The following example demonstrates basic Shape usage with position coordinates.

Change Theme

Theme

Loading ...

Shape Data Binding

Shapes can be bound to data items in order to visualize hierarchical data structures. The Diagram component supports binding to arrays of objects, where each object represents a Shape.

typescript

public shapes: ShapeOptions[] = [
    {
        id: 'employee1',
        dataItem: {
            firstName: 'John',
            lastName: 'Doe',
            title: 'Manager',
            department: 'Sales'
        },
        content: {
            text: 'John Doe Manager'
        }
    }
];

The following example demonstrates how to bind shapes to data items.

Change Theme

Theme

Loading ...

Shape Types

The Diagram supports the following basic shape types, which are members of the ShapeType. The default Shape type is rectangle.

• rectangle (default)—A standard rectangular Shape.
• circle—You can use different width and height values to define an ellipse.
• image—Displays a graphic from a URL or data URI. Use the source property to define the image source. Like other Shape types, it also supports text labels.
• text—Displays text content without borders or background styling.

In addition to these basic geometric Shapes, the Diagram provides specialized Shapes for Workflow Diagrams. For a complete list of flowchart-specific Shapes, see the FlowchartShapeType reference.

The following example demonstrates the available shape types.

Change Theme

Theme

Loading ...

Shape Styling

The following Shape styling options are available:

• Text color and font properties
• Background color (fill) and opacity for the default and hover states
• Rotation angle
• Border (stroke) color, type, width, and opacity

The following example demonstrates the available Shape styling options.

Change Theme

Theme

Loading ...

Editable Shapes

By default, the Diagram ShapeOptions editable property allows users to:

• Connect one Shape to other Shapes.
• Drag a Shape to new coordinates.
• Remove the selected Shape(s).

The following example demonstrates the editable Shape options.

Change Theme

Theme

Loading ...

Visual Function

The Diagram supports a visual function that allows you to customize the rendering of Shapes. The function provides arguments that include the Shape's data item and other properties, enabling you to create complex visualizations.

To use a visual function, follow these steps:

1. Create the visual template function that returns a Group containing the desired visual elements:

   typescript

   public visualTemplate = (options: any): Group => {
       const g = new Group();
       const dataItem = options.dataItem;
   
       // Create a rectangle background
       g.append(new Rectangle({
           width: 250,
           height: 100,
           stroke: { width: 2, color: dataItem.strokeColor },
           fill: { color: dataItem.backgroundColor },
           cornerRadius: 8
       }));
   
       // Add an image
       if (dataItem.image) {
           g.append(new Image({
               source: `assets/${dataItem.image}`,
               x: 10, y: 15,
               width: 70, height: 70
           }));
       }
   
       // Add text elements
       g.append(new TextBlock({
           text: dataItem.name,
           x: 90, y: 25,
           fontSize: 16,
           fontWeight: 'bold'
       }));
   
       return g;
   };

2. Configure the Shape defaults with the visual function:

   typescript

   public shapeDefaults: ShapeDefaults = {
       visual: this.visualTemplate,
   };

3. Apply the configuration to your Diagram:

   html

   <kendo-diagram 
       [shapes]="shapes"
       [shapeDefaults]="shapeDefaults">
   </kendo-diagram>

The following example demonstrates how to use a visual function to create custom Shapes in the Diagram.

Change Theme

Theme

Loading ...

See Also

• Diagram Connections
• Diagram Layouts
• Diagram Events
• Diagram API Reference