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

Diagram Connections

Updated on Mar 11, 2026

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.

Change Theme

Theme

Loading ...

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. Use fromConnector and toConnector to specify which connector point on each shape the connection attaches to.
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 }
    }
];

Use the fromConnector and toConnector properties to control which connector point on a shape the connection attaches to. By default, shapes expose four connectors: top, right, bottom, and left.

typescript

public connections: ConnectionOptions[] = [
    {
        from: 'shapeA',
        to: 'shapeB',
        fromConnector: 'right',
        toConnector: 'left',
    },
];

The following example demonstrates basic connection usage, including shape-based connections, coordinate-based connections, and connector targeting with fromConnector and toConnector.

Change Theme

Theme

Loading ...

Connection Types

The Diagram supports different connection types that determine the route and angles of the connection line. The default connection type is cascading, which displays connections as rectangular routes with one or more right angles. The polyline connection type displays connections 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.

The following example demonstrates the available connection types.

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 following example demonstrates the difference between caps and selection handles.

Change Theme

Theme

Loading ...

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).

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. Use the content property to configure the label appearance and position.

The following example demonstrates various label configuration options, including text content, styling, and positioning on both horizontal and vertical connections.

Change Theme

Theme

Loading ...

The ConnectionContent interface provides options for configuring:

Text content and styling (color, font family, size, weight, and style).
Label positioning relative to the connection line.
Offset distance between the label and connection path.
Custom templates for dynamic content rendering.

typescript

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

The position property controls where the label appears:

inline—Positions the label directly on the connection line.
vertical—Controls the vertical position relative to horizontal connections (top (default) or bottom).
horizontal—Controls the horizontal position relative to vertical connections (right (default) or left).

Editable Connections

The Diagram connections are editable by default. Users can drag a connection by its start and end cap to link different shapes, or remove selected connections. You can control the editability of connections globally or on an individual basis.

The following example demonstrate editable and non-editable connections.

Change Theme

Theme

Loading ...

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.

Defining Shape Connector Points

By default, each shape exposes four connectors named top, right, bottom, and left. Custom connectors are useful when you need to separate multiple connections leaving the same edge, enforce directional flow in layered diagrams, or anchor connections to specific visual regions of a shape. You can replace the defaults by setting the connectors property on individual shapes or on shapeDefaults to apply them to all shapes. Defining custom connectors replaces the defaults, so include every connector your connections need in the array.

The following example demonstrates custom connectors on Diagram shapes. The UI Layer shape uses offset RightTop and RightBottom connectors at 30% and 70% down the right edge to prevent overlapping connections. The remaining shapes use Rect convenience methods to place connectors at standard edge centers.

Change Theme

Theme

Loading ...

Each connector requires:

A unique name used to reference the connector in ConnectionOptions.
A position function that receives the parent Shape and returns a Point defining the connector's location on the diagram canvas.

Use the shape.bounds() method inside the function to calculate positions relative to the shape's current geometry. The method returns a Rect object with the following API:

x and y—The top-left corner coordinates.
width and height—The shape dimensions.
top(), right(), bottom(), left()—Convenience methods that return a Point at each edge center.
center()—Returns a Point at the shape center.

typescript

import { Point, Shape } from '@progress/kendo-angular-diagrams';

const connectors = [
    {
        name: 'Right',
        // Use the convenience method to get the right-center point directly.
        position: (shape: Shape) => shape.bounds().right(),
    },
    {
        name: 'RightTop',
        // Place the connector at 30% down the right edge so two connections
        // leaving the same side do not overlap.
        position: (shape: Shape) => {
            const b = shape.bounds();
            return new Point(b.x + b.width, b.y + b.height * 0.3);
        },
    },
    {
        name: 'RightBottom',
        position: (shape: Shape) => {
            const b = shape.bounds();
            return new Point(b.x + b.width, b.y + b.height * 0.7);
        },
    },
];

To route connections to and from custom connectors, reference them by name using the fromConnector and toConnector properties of ConnectionOptions:

typescript

public connections: ConnectionOptions[] = [
    {
        from: 'ui',
        to: 'logic',
        fromConnector: 'RightTop',
        toConnector: 'Left',
    },
    {
        from: 'ui',
        to: 'data',
        fromConnector: 'RightBottom',
        toConnector: 'Left',
    },
];