# ASP.NET MVC Diagram Connections

The Diagram provides extensive configuration options for connections that link shapes together, enabling you to customize their appearance, routing behavior, and labels.

Connections are the lines that visually represent relationships between shapes in a diagram. The component supports various styling options, routing types, and label configurations to create professional and informative diagrams.

> All connection settings described in this article can be applied globally to all connections using the `ConnectionDefaults` configuration. Individual connections will inherit these defaults unless explicitly overridden.

## Getting Started

To create connections between shapes, use the `Connections` configuration and specify the `From` and `To` properties referencing the shape IDs.

```Razor HtmlHelper
    @(Html.Kendo().Diagram()
        .Name("diagram")
        .Shapes(shapes =>
        {
            shapes.Add().Id("1").X(100).Y(100).Content(c => c.Text("Shape 1"));
            shapes.Add().Id("2").X(300).Y(100).Content(c => c.Text("Shape 2"));
        })
        .Connections(connections =>
        {
            connections.Add()
                .From(f => f.Id("1"))
                .To(t => t.Id("2"));
        })
    )
```

## Stroke Configuration

The `Stroke` configuration controls the visual appearance of connection lines, including their color, width, and line style.

### Defining Color and Width

Use the `Color` and `Width` options of the `Stroke` configuration to customize the basic appearance of connections.

```Razor HtmlHelper
    @(Html.Kendo().Diagram()
        .Name("diagram")
        .Shapes(shapes =>
        {
            shapes.Add().Id("1").X(100).Y(100).Content(c => c.Text("Shape 1"));
            shapes.Add().Id("2").X(300).Y(100).Content(c => c.Text("Shape 2"));
        })
        .Connections(connections =>
        {
            connections.Add()
                .From(f => f.Id("1"))
                .To(t => t.Id("2"))
                .Stroke(s => s.Color("#ff6358").Width(3));
        })
    )
```

The color accepts any valid CSS color value, and width is specified in pixels.

### Advanced Stroke Options

The stroke configuration also supports `LineCap` and `LineJoin` properties for fine-tuning the appearance of connection endpoints and corners.

```Razor HtmlHelper
    @(Html.Kendo().Diagram()
        .Name("diagram")
        .Shapes(shapes =>
        {
            shapes.Add().Id("1").X(100).Y(100).Content(c => c.Text("Shape 1"));
            shapes.Add().Id("2").X(300).Y(100).Content(c => c.Text("Shape 2"));
        })
        .Connections(connections =>
        {
            connections.Add()
                .From(f => f.Id("1"))
                .To(t => t.Id("2"))
                .Stroke(s => s
                    .Color("#333")
                    .Width(4)
                    .LineCap(DiagramStrokeLineCap.Round)
                    .LineJoin(DiagramStrokeLineJoin.Round)
                );
        })
    )
```

## Connection Types

The `Type` property specifies how connections route between shapes. The default value is `Cascading`.

### Cascading Connections

Cascading connections automatically create a rectangular path between endpoints, which is particularly useful for tree layouts and hierarchical diagrams.

```Razor HtmlHelper
    @(Html.Kendo().Diagram()
        .Name("diagram")
        .Shapes(shapes =>
        {
            shapes.Add().Id("1").X(20).Y(20).Content(c => c.Text("Parent"));
            shapes.Add().Id("2").X(300).Y(100).Content(c => c.Text("Child"));
        })
        .Connections(connections =>
        {
            connections.Add()
                .From(f => f.Id("1"))
                .To(t => t.Id("2"))
                .Type(DiagramConnectionType.Cascading);
        })
    )
```

Cascading connections ignore any intermediate points and automatically calculate the optimal rectangular route.

### Polyline Connections

Polyline connections allow you to define custom paths by specifying intermediate points. This provides precise control over the connection routing.

```Razor HtmlHelper
    @(Html.Kendo().Diagram()
        .Name("diagram")
        .Shapes(shapes =>
        {
            shapes.Add().Id("1").X(20).Y(20).Content(c => c.Text("State 1"));
            shapes.Add().Id("2").X(300).Y(100).Content(c => c.Text("State 2"));
        })
        .Connections(connections =>
        {
            connections.Add()
                .From(f => f.Id("1"))
                .To(t => t.Id("2"))
                .Type(DiagramConnectionType.Polyline)
                .Points(points =>
                {
                    points.Add().X(150).Y(20);
                    points.Add().X(150).Y(150);
                });
        })
    )
```

## Connection Content

The `Content` configuration enables you to add labels to connections with extensive styling and positioning options.

### Basic Text Label

Add a text label to a connection using the `Text` option.

```Razor HtmlHelper
    @(Html.Kendo().Diagram()
        .Name("diagram")
        .Shapes(shapes =>
        {
            shapes.Add().Id("1").X(100).Y(100).Content(c => c.Text("Shape 1"));
            shapes.Add().Id("2").X(300).Y(100).Content(c => c.Text("Shape 2"));
        })
        .Connections(connections =>
        {
            connections.Add()
                .From(f => f.Id("1"))
                .To(t => t.Id("2"))
                .Content(c => c.Text("Connection Label"));
        })
    )
```

### Styling Label Text

Customize the appearance of connection labels with font properties and colors.

```Razor HtmlHelper
    @(Html.Kendo().Diagram()
        .Name("diagram")
        .Shapes(shapes =>
        {
            shapes.Add().Id("1").X(20).Y(20).Content(c => c.Text("State 1"));
            shapes.Add().Id("2").X(300).Y(20).Content(c => c.Text("State 2"));
        })
        .Connections(connections =>
        {
            connections.Add()
                .From(f => f.Id("1"))
                .To(t => t.Id("2"))
                .Content(c => c
                    .Text("Step 1")
                    .Color("purple")
                    .FontFamily("Tahoma")
                    .FontSize(16)
                    .FontStyle("italic")
                    .FontWeight("600")
                );
        })
    )
```

### Label Background and Border

Add visual emphasis to connection labels by configuring background colors and borders.

```Razor HtmlHelper
    @(Html.Kendo().Diagram()
        .Name("diagram")
        .Shapes(shapes =>
        {
            shapes.Add().Id("1").X(100).Y(100).Content(c => c.Text("Shape 1"));
            shapes.Add().Id("2").X(300).Y(100).Content(c => c.Text("Shape 2"));
        })
        .Connections(connections =>
        {
            connections.Add()
                .From(f => f.Id("1"))
                .To(t => t.Id("2"))
                .Content(c => c
                    .Text("Important")
                    .Background("#ffeb3b")
                    .Border(b => b.Color("#000").Width(1))
                );
        })
    )
```

### Label Positioning

Control the position of connection labels relative to the connection path using the `Position` configuration.

Set position to `"inline"` to place the label along the connection path, or use an object to specify vertical and horizontal alignment.

```Razor HtmlHelper
    @(Html.Kendo().Diagram()
        .Name("diagram")
        .Shapes(shapes =>
        {
            shapes.Add().Id("1").X(100).Y(100).Content(c => c.Text("Shape 1"));
            shapes.Add().Id("2").X(300).Y(200).Content(c => c.Text("Shape 2"));
        })
        .Connections(connections =>
        {
            connections.Add()
                .From(f => f.Id("1"))
                .To(t => t.Id("2"))
                .Content(c => c
                    .Text("Connection")
                    .Position(pos => pos
                        .Vertical(DiagramConnectionPositionVertical.Bottom)
                        .Horizontal(DiagramConnectionPositionHorizontal.Right)
                    )
                );
        })
    )
```

### Label Padding

Configure the padding around connection labels using the `Padding` configuration.

```Razor HtmlHelper
    @(Html.Kendo().Diagram()
        .Name("diagram")
        .Shapes(shapes =>
        {
            shapes.Add().Id("1").X(100).Y(100).Content(c => c.Text("Shape 1"));
            shapes.Add().Id("2").X(300).Y(100).Content(c => c.Text("Shape 2"));
        })
        .Connections(connections =>
        {
            connections.Add()
                .From(f => f.Id("1"))
                .To(t => t.Id("2"))
                .Content(c => c
                    .Text("Padded Label")
                    .Background("#e0e0e0")
                    .Padding(p => p.Top(6).Right(8).Bottom(6).Left(8))
                );
        })
    )
```

### Label Offset

Use the `Offset` option to control the distance (in pixels) between the label and the connection path.

```Razor HtmlHelper
    @(Html.Kendo().Diagram()
        .Name("diagram")
        .Shapes(shapes =>
        {
            shapes.Add().Id("1").X(100).Y(100).Content(c => c.Text("Shape 1"));
            shapes.Add().Id("2").X(300).Y(200).Content(c => c.Text("Shape 2"));
        })
        .Connections(connections =>
        {
            connections.Add()
                .From(f => f.Id("1"))
                .To(t => t.Id("2"))
                .Content(c => c
                    .Text("Offset Label")
                    .Offset(16)
                    .Position(pos => pos
                        .Vertical(DiagramConnectionPositionVertical.Top)
                        .Horizontal(DiagramConnectionPositionHorizontal.Right)
                    )
                );
        })
    )
```

### Label Templates

Use templates to render dynamic label content. The template receives a `dataItem` field when a data source field has been specified.

```Razor HtmlHelper
    @(Html.Kendo().Diagram()
        .Name("diagram")
        .Shapes(shapes =>
        {
            shapes.Add().Id("1").X(20).Y(20).Content(c => c.Text("State 1"));
            shapes.Add().Id("2").X(300).Y(20).Content(c => c.Text("State 2"));
        })
        .Connections(connections =>
        {
            connections.Add()
                .From(f => f.Id("1"))
                .To(t => t.Id("2"))
                .Content(c => c
                    .TemplateHandler("connectionLabelTemplate")
                );
        })
    )

    <script>
        function connectionLabelTemplate() {
            return "Iteration on " + kendo.toString(new Date(), "MM/dd/yyyy");
        }
    </script>
```

## Connector Direction

Specify which connector on a shape the connection attaches to by using the `FromConnector` and `ToConnector` options.

```Razor HtmlHelper
    @(Html.Kendo().Diagram()
        .Name("diagram")
        .Shapes(shapes =>
        {
            shapes.Add().Id("1").X(100).Y(100).Content(c => c.Text("Shape 1"));
            shapes.Add().Id("2").X(300).Y(100).Content(c => c.Text("Shape 2"));
        })
        .Connections(connections =>
        {
            connections.Add()
                .From(f => f.Id("1"))
                .To(t => t.Id("2"))
                .FromConnector("right")
                .ToConnector("left");
        })
    )
```

The valid values are `"top"`, `"right"`, `"bottom"`, `"left"`, and `"auto"`. The default is `"auto"`.

## Corner Radius

Round the corners of connection paths using the `CornerRadius` option.

```Razor HtmlHelper
    @(Html.Kendo().Diagram()
        .Name("diagram")
        .Shapes(shapes =>
        {
            shapes.Add().Id("1").X(100).Y(100).Content(c => c.Text("Shape 1"));
            shapes.Add().Id("2").X(300).Y(200).Content(c => c.Text("Shape 2"));
        })
        .Connections(connections =>
        {
            connections.Add()
                .From(f => f.Id("1"))
                .To(t => t.Id("2"))
                .CornerRadius(10);
        })
    )
```

## End Caps

Configure the appearance of connection endpoints using the `EndCap` and `StartCap` options. Supported cap types include `"none"`, `"ArrowEnd"`, `"ArrowStart"`, and `"FilledCircle"`.

```Razor HtmlHelper
    @(Html.Kendo().Diagram()
        .Name("diagram")
        .Shapes(shapes =>
        {
            shapes.Add().Id("1").X(100).Y(100).Content(c => c.Text("Shape 1"));
            shapes.Add().Id("2").X(300).Y(100).Content(c => c.Text("Shape 2"));
        })
        .Connections(connections =>
        {
            connections.Add()
                .From(f => f.Id("1"))
                .To(t => t.Id("2"))
                .EndCap(ec => ec
                    .Type("ArrowEnd")
                    .Fill(f => f.Color("#333"))
                );
        })
    )
```

## Hover Styling

Define special styling that applies when users hover over connections.

```Razor HtmlHelper
    @(Html.Kendo().Diagram()
        .Name("diagram")
        .Shapes(shapes =>
        {
            shapes.Add().Id("1").X(100).Y(100).Content(c => c.Text("Shape 1"));
            shapes.Add().Id("2").X(300).Y(100).Content(c => c.Text("Shape 2"));
        })
        .Connections(connections =>
        {
            connections.Add()
                .From(f => f.Id("1"))
                .To(t => t.Id("2"))
                .Hover(h => h.Stroke(s => s.Color("#0056b3")));
        })
    )
```

## Editing Options

Control the editing behavior of connections using the `Editable` configuration. Set `Editable` to `false` to disable editing for specific connections, or configure the `Tools` to specify available editing tools.

```Razor HtmlHelper
    @(Html.Kendo().Diagram()
        .Name("diagram")
        .Shapes(shapes =>
        {
            shapes.Add().Id("1").X(100).Y(100).Content(c => c.Text("Shape 1"));
            shapes.Add().Id("2").X(300).Y(100).Content(c => c.Text("Shape 2"));
        })
        .Connections(connections =>
        {
            connections.Add()
                .From(f => f.Id("1"))
                .To(t => t.Id("2"))
                .Editable(e => e
                    .Points(p => p.Snap(6))
                );
        })
    )
```

## See Also

* [Connections Demo of the Diagram for ASP.NET MVC](https://demos.telerik.com/aspnet-mvc/diagram/connections)
* [Basic Usage of the Diagram for ASP.NET MVC (Demo)](https://demos.telerik.com/aspnet-mvc/diagram)
* [Server-Side API Reference of the Diagram for ASP.NET MVC](https://www.telerik.com/aspnet-mvc/documentation/api/diagram)