New to Kendo UI for Angular? Start a free 30-day trial

Diagram Connections

The connections in the Kendo UI for Angular Diagram represent relationships between two Shapes (graph nodes). This article describes all Diagram connection customization options and configuration features.

Basics

A connection is a link that shows a relationship between two Diagram Shapes. A connection can also span across points with specific coordinates, with no associated Shapes.

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

The from and to properties must match the associated Shape ids. You can also define a connection that does not link Shapes by using specific coordinates.
The connection type determines the connection route and route angles.
The connection cap Type determines whether the connections appear directed or undirected.
The Selectable parameter of ConnectionDefaults sets if connections can be selected, which determines the ability to drag or remove them.
Text defines the connection label. Use the Connection content property to set the label text and its styling.

Basic connection parameters are defined in the ConnectionOptions interface:

typescript

public connections: ConnectionOptions[] = [
    {
        from: 'start',
        to: 'process',
        content: {
            text: 'Next'
        }
    }
];

For connections without Shapes, you can define specific coordinates:

typescript

public connections: ConnectionOptions[] = [
    {
        from: { x: 50, y: 100 },
        to: { x: 150, y: 200 }
    }
];

The following example demonstrates basic connection usage.

Change Theme

Theme

Loading ...

Connection Types

The available Diagram connection types include:

cascading (default)—Connections display as rectangular routes with one or more right angles. The cascading connection type is suitable for tree Diagram layouts, as the connections enhance the representation of a hierarchy.
polyline—Connections display as polylines that connect the related Shapes and all intermediate points. If connection points are not defined, then the connection displays as a straight line.

Change Theme

Theme

Loading ...

Type Configuration

You can set a default connection type for all connections using the connectionDefaults property:

typescript

public connectionDefaults: ConnectionOptions[] = {
    type: 'polyline'
};

Individual connections can override the default setting by specifying their own type:

typescript

public connections: ConnectionOptions[] = [
    {
        from: 'shape1',
        to: 'shape2',
        type: 'cascading'
    }
];

Connection Points

Polyline connections can pass through multiple points at specific coordinates, regardless of whether the connections link Shapes or not.

typescript

public connections: ConnectionOptions[] = [
    {
        type: 'polyline',
        from: { x: 20, y: 20 },
        to: { x: 200, y: 200 },
        points: [
            { x: 150, y: 50 },
            { x: 50, y: 100 },
            { x: 150, y: 150 },
            { x: 100, y: 170 }
        ]
    }
];

The following example demonstrates how to define connection points.

Change Theme

Theme

Loading ...

Connection Styling

You can customize the visual appearance of connections through various styling options including caps, colors, fonts, and borders.

Connection Caps

The link between two Diagram Shapes is always defined through the from and to properties. From this point of view, a Diagram connection is always directed. However, you can configure the connections to appear bi-directional or non-directional.

The available cap types include:

ArrowEnd—The cap arrow points away from the connection, towards the Shape.
FilledCircle (default)
None

You can configure cap types using connectionDefaults to apply settings to all connections:

typescript

public connectionDefaults = {
    startCap: {
        type: 'ArrowEnd'
    },
    endCap: {
        type: 'ArrowEnd'
    }
};

For individual connections, specify the cap types directly on the connection:

typescript

public connections: ConnectionOptions[] = [
    {
        from: 'shape1',
        to: 'shape2',
        startCap: {
            type: 'FilledCircle'
        },
        endCap: {
            type: 'FilledCircle'
        }
    }
];

Note the difference between caps and selection handles:

The caps are visible when a connection is not selected.
The selection handles are visible when a connection is selected (clicked).

The following example demonstrates the difference between caps and selection handles.

Change Theme

Theme

Loading ...

Styling Options

The following connection styling options are available:

Text color and font properties for connection content
Background color (fill) for the connection caps
Background color (fill) for the default and hover states of the selection handles
Border (stroke) color, type, and width for the caps and selection handles

The following example demonstrates how to style connections.

Change Theme

Theme

Loading ...

Connection Content and Labels

You can add text labels to connections to provide additional information about the relationship they represent.

typescript

public connections: ConnectionOptions[] = [
    {
        from: 'shape1',
        to: 'shape2',
        content: {
            text: 'Reports to',
            color: '#666',
            fontFamily: 'Arial',
            fontSize: 12
        }
    }
];

Editable Connections

By default, the Diagram allows users to:

Drag a connection by its start and end cap to link other Shapes than the current ones.
Remove the selected connection(s).

You can control these operations using connectionDefaults to set the behavior for all connections:

typescript

public connectionDefaults = {
    editable: {
        drag: true,
        remove: true
    }
};

Individual connections can have different editable settings:

typescript

public connections: ConnectionOptions[] = [
    {
        from: 'shape1',
        to: 'shape2',
        editable: {
            drag: false,
            remove: false
        }
    }
];

Connection dragging and removing requires the connection to be selectable, which is enabled by default.

The following example demonstrate editable and non-editable connections.

Change Theme

Theme

Loading ...