ASP.NET Core 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
ConnectionDefaultsconfiguration. 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.
@(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.
@(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.
@(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.
@(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.
@(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.
@(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.
@(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.
@(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.
@(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.
@(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.
@(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.
@(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.
@(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.
@(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".
@(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.
@(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.
@(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))
);
})
)