Example of Connectors in Blazor Diagram Component

Diagram / Getting Started / Connectors

This sample illustrates the flow of data in a marketing process created using a Connector. Different types of connectors and decorators are used to customize the appearance, path, and direction of the data flow.

Properties
Apply To
Appearance
Behavior
Source Decorators
Target Decorators
Segment Shape

In this example, you can see how to add connectors to connect shapes and customize their appearance. A collection of connectors is added to a diagram using the Connectors property of the SfDiagramComponent. You can use the Style property to customize its stroke style and the CornerRadius property to add rounded corners to connectors. The Shape property of SegmentThumbSettings customizes the appearance of the segment shape for both Orthogonal and Bezier connectors.

Click different styles in the properties panel to customize the appearance of the connector. The Lock option enables or disables connector editing.

Transform your Blazor web apps today with Syncfusion® Blazor components
100+ high-performance and responsive UI components
Dedicated support
Hassle-free licensing
TRY IT FOR FREE