Search results

Connector in Blazor Diagram component

Connectors are objects used to create link between two points, nodes or ports to represent the relationships between them.

Create connector

Connector can be created by defining the source and target point of the connector. The path to be drawn can be defined with a collection of segments. To explore the properties of a Connector, refer to Connector Properties.

Add connectors through connectors collection

The SourcePoint and TargetPoint properties of connector allow you to define the end points of a connector.

The following code example illustrates how to add a connector through connector collection,

@using Syncfusion.Blazor.Diagrams
@using System.Collections.ObjectModel

<SfDiagram Width="100%" Height="690px" Connectors="@ConnectorCollection"  Constraints="@diagramConstraints"/>

@code
{
    //Defines diagram's connector collection
    public ObservableCollection<DiagramConnector> ConnectorCollection = new ObservableCollection<DiagramConnector>();

    //Defines diagram's constraints values.
    public DiagramConstraints diagramConstraints = DiagramConstraints.Default;

    protected override void OnInitialized()
    {
        DiagramConnector diagramConnector = new DiagramConnector()
        {
            SourcePoint = new ConnectorSourcePoint() { X = 100, Y = 100 },
            TargetPoint = new ConnectorTargetPoint() { X = 200, Y = 200 },
            TargetDecorator = new ConnectorTargetDecorator()
            {
                Shape = DecoratorShapes.Arrow,
                Style = new DecoratorShapeStyle() { Fill = "#6f409f", StrokeColor = "#6f409f", StrokeWidth = 1 }
            },
            Style = new ConnectorShapeStyle() { StrokeColor = "#6f409f", StrokeWidth = 1 },
            Type = Segments.Straight,
        };
        //Add the connector into connectors's collection.
        ConnectorCollection.Add(diagramConnector);
    }
}

Connectors from palette

Connectors can be predefined and added to the symbol palette. You can drop those connectors into the diagram, when required.

For more information about adding connectors from symbol palette, refer to Symbol Palette.

Draw connectors

Connectors can be interactively drawn by clicking and dragging on the diagram surface by using DrawingObject.

For more information about drawing connectors, refer to Draw Connectors.

Connect nodes

  • The SourceID and TargetID properties allow to define the nodes to be connected.

  • The following code example illustrates how to connect two nodes,

@using Syncfusion.Blazor.Diagrams
@using System.Collections.ObjectModel

<SfDiagram Width="100%" Height="690px" Nodes="@NodeCollection" Connectors="@ConnectorCollection" Constraints="@diagramConstraints"/>
@code
{
    //Defines diagram's nodes collection
    public ObservableCollection<DiagramNode> NodeCollection = new ObservableCollection<DiagramNode>();

    //Defines diagram's connector collection
    public ObservableCollection<DiagramConnector> ConnectorCollection = new ObservableCollection<DiagramConnector>();  

    public DiagramConstraints diagramConstraints = DiagramConstraints.Default;

    protected override void OnInitialized()
    {
        //Creates source node
        DiagramNode node1 = new DiagramNode()
        {
            OffsetX = 100,
            OffsetY = 100,
            Height = 50,
            Width = 100,
            Id = "node1",
            Shape = new DiagramShape() { Type = Syncfusion.Blazor.Diagrams.Shapes.Basic, BasicShape = BasicShapes.Rectangle },
            Style = new NodeShapeStyle()
            {
                Fill = "#37909A",
                StrokeColor = "#37909A",
            },
        };
        //Add node into node's collection
        NodeCollection.Add(node1);

        //Create a target node
        DiagramNode node2 = new DiagramNode()
        {
            OffsetX = 300,
            OffsetY = 300,
            Height = 50,
            Width = 100,
            Id = "node2",
            Shape = new DiagramShape() { Type = Syncfusion.Blazor.Diagrams.Shapes.Basic, BasicShape = BasicShapes.Rectangle },
            Style = new NodeShapeStyle()
            {
                Fill = "#37909A",
                StrokeColor = "#37909A",
            },
        };
        //Add node into node's collection
        NodeCollection.Add(node2);

        //create the connector with source node and target node id.
        DiagramConnector diagramConnector = new DiagramConnector()
        {
            //Source node id of the connector.
            SourceID = "node1",
            //Target node id of the connector.
            TargetID = "node2",
            TargetDecorator = new ConnectorTargetDecorator()
            {
                Shape = DecoratorShapes.Arrow,
                Style = new DecoratorShapeStyle() { Fill = "#37909A", StrokeColor = "#37909A", StrokeWidth = 1 }
            },
            Style = new ConnectorShapeStyle() { StrokeColor = "#37909A", StrokeWidth = 1 },
            Type = Segments.Straight,
        };
        //Adding conector into connector's collection
        ConnectorCollection.Add(diagramConnector);
    }
}
  • When you remove NodeConstraints.InConnect from Default, the node accepts only an outgoing connection to dock in it. Similarly, when you remove NodeConstraints.OutConnect from Default, the node accepts only an incoming connection to dock in it.

  • When you remove both InConnect and OutConnect NodeConstraints from Default, the node restricts connector to establish connection in it.

  • The following code illustrates how to disable InConnect constraints.

@using Syncfusion.Blazor.Diagrams
@using System.Collections.ObjectModel

<SfDiagram Width="100%" Height="690px" Nodes="@NodeCollection" />
@code
{
    //Defines diagram's nodes collection
    public ObservableCollection<DiagramNode> NodeCollection = new ObservableCollection<DiagramNode> ();
    protected override void OnInitialized()
    {
    //Creates source node
    DiagramNode node1 = new DiagramNode()
    {
        OffsetX = 100,
        OffsetY = 100,
        Height = 50,
        Width = 100,
        Shape = new DiagramShape() { Type = Syncfusion.Blazor.Diagrams.Shapes.Basic, BasicShape = BasicShapes.Ellipse },
        Style = new NodeShapeStyle()
        {
            Fill = "#37909A",
            StrokeColor = "#37909A",
        },
    };
    //Add node into node's collection
    NodeCollection.Add(node1);
    //To disbale the inconnect constraints to node.
    node1.Constraints = NodeConstraints.Default & ~NodeConstraints.InConnect;

    }
}

Connections with ports

The SourcePortID and TargetPortID properties allow to create connections between some specific points of source/target nodes.

The following code example illustrates how to create port to port connections.

@using Syncfusion.Blazor.Diagrams
@using System.Collections.ObjectModel

<SfDiagram @ref="@diagram" Width="100%" Height="690px" Nodes="@NodeCollection" Connectors="@ConnectorCollection" Constraints="@diagramConstraints">
</SfDiagram>

@code
{
    //Defines diagram's nodes collection
    public ObservableCollection<DiagramNode> NodeCollection = new ObservableCollection<DiagramNode>();
    public SfDiagram diagram;
    //Defines diagram's connector collection
    public ObservableCollection<DiagramConnector> ConnectorCollection = new ObservableCollection<DiagramConnector>();

    public DiagramConstraints diagramConstraints = DiagramConstraints.Default;

    protected override void OnInitialized()
    {
        //Create a source node
        DiagramNode node1 = new DiagramNode()
        {
            OffsetX = 100,
            OffsetY = 100,
            Height = 50,
            Width = 100,
            Id = "node1",
            Shape = new DiagramShape() { Type = Syncfusion.Blazor.Diagrams.Shapes.Basic, BasicShape = BasicShapes.Rectangle },
            Style = new NodeShapeStyle()
            {
                Fill = "#37909A",
                StrokeColor = "#37909A",
            },
            //Create the port for source node
            Ports = new ObservableCollection<DiagramPort>()
            {
                 new DiagramPort()
                 {
                     Id = "port1",
                     Offset = new Syncfusion.Blazor.Diagrams.NodePortOffset() { X = 1, Y = 0.5 },
                     Height = 10,
                     Width = 10,
                     Visibility = PortVisibility.Visible,
                     Style = new PortShapeStyle() { Fill = "yellow", StrokeColor = "yellow" }
                 },
            },
        };
        //Add node into node's collection
        NodeCollection.Add(node1);
        //Create a target node
        DiagramNode node2 = new DiagramNode()
        {
            OffsetX = 300,
            OffsetY = 300,
            Height = 50,
            Width = 100,
            Id = "node2",
            Shape = new DiagramShape() { Type = Syncfusion.Blazor.Diagrams.Shapes.Basic, BasicShape = BasicShapes.Rectangle },
            Style = new NodeShapeStyle()
            {
                Fill = "#37909A",
                StrokeColor = "#37909A",
            },
            //Create the port for target node.
            Ports = new ObservableCollection<DiagramPort>()
            {
                 new DiagramPort()
                 {
                     Id = "port2",
                     Offset = new Syncfusion.Blazor.Diagrams.NodePortOffset() { X = 0, Y = 0.5 },
                     Height = 10,
                     Width = 10,
                     Visibility = PortVisibility.Visible,
                     Style = new PortShapeStyle() { Fill = "yellow", StrokeColor = "yellow" }
                 },
            },
        };
        //Add node into node's collection
        NodeCollection.Add(node2);
        //create the connector from port to port
        DiagramConnector diagramConnector = new DiagramConnector()
        {
            SourceID = "node1",
            TargetID = "node2",
            //source node port id.
            SourcePortID = "port1",
            //Target node port id.
            TargetPortID = "port2",
            TargetDecorator = new ConnectorTargetDecorator()
            {
                Shape = DecoratorShapes.Arrow,
                Style = new DecoratorShapeStyle() { Fill = "#37909A", StrokeColor = "#37909A", StrokeWidth = 1 }
            },
            Style = new ConnectorShapeStyle() { StrokeColor = "#37909A", StrokeWidth = 1 },
            Type = Segments.Straight,
        };
        ConnectorCollection.Add(diagramConnector);
    }
}
  • When you set PortConstraints to InConnect, the port accepts only an incoming connection to dock in it. Similarly, when you set PortConstraints to OutConnect, the port accepts only an outgoing connection to dock in it.
  • When you set PortConstraints to None, the port restricts connector to establish connection in it.
@using Syncfusion.Blazor.Diagrams
@using System.Collections.ObjectModel

<SfDiagram Width="100%" Height="690px" Nodes="@NodeCollection" />
@code
{
    //Defines diagram's nodes collection
    public ObservableCollection<DiagramNode>
    NodeCollection = new ObservableCollection<DiagramNode>
        ();
    protected override void OnInitialized()
    {
        //Creates source node
        DiagramNode node1 = new DiagramNode()
        {
            OffsetX = 100,
            OffsetY = 100,
            Height = 50,
            Width = 100,
            Shape = new DiagramShape() { Type = Syncfusion.Blazor.Diagrams.Shapes.Basic, BasicShape = BasicShapes.Ellipse },
            Style = new NodeShapeStyle()
            {
                Fill = "#37909A",
                StrokeColor = "#37909A",
            },
        };
        //Add node into node's collection
        NodeCollection.Add(node1);
        //To disbale the inconnect constraints to node.
        node1.Constraints = NodeConstraints.Default & ~NodeConstraints.InConnect;
        DiagramPort Port = new DiagramPort()
        {
            Offset = new Syncfusion.Blazor.Diagrams.NodePortOffset() { X = 0, Y = 0.5 },
            Height = 10,
            Width = 10,
            Visibility = PortVisibility.Visible,
            Style = new PortShapeStyle() { Fill = "yellow", StrokeColor = "yellow" }
        };
        //Port constraints to allow in connectors.
        Port.Constraints = PortConstraints.InConnect;
        NodeCollection[0].Ports.Add(Port);
    };
}

Update connector at run time

Various connector properties such as SourcePoint, TargetPoint, Style, SourcePortID, TargetPortID, etc., can be updated at the runtime.

The following code example illustrates how to update a connector’s source point, target point, styles properties at runtime.

@using Syncfusion.Blazor.Diagrams
@using System.Collections.ObjectModel

<SfDiagram Width="100%" Height="690px" Connectors="@ConnectorCollection" Constraints="@diagramConstraints"/>
<input type="button" value="Connector" @onclick="@OnConnectorProperties"/>

@code
{
    //Defines diagram's connector collection
    public ObservableCollection<DiagramConnector> ConnectorCollection = new ObservableCollection<DiagramConnector>();

    //Defines diagram's constraints values.
    public DiagramConstraints diagramConstraints = DiagramConstraints.Default;

    protected override void OnInitialized()
    {
        DiagramConnector diagramConnector = new DiagramConnector()
        {
            SourcePoint = new ConnectorSourcePoint() { X = 100, Y = 100 },
            TargetPoint = new ConnectorTargetPoint() { X = 200, Y = 200 },
            TargetDecorator = new ConnectorTargetDecorator()
            {
                Shape = DecoratorShapes.Arrow,
                Style = new DecoratorShapeStyle() { Fill = "#6f409f", StrokeColor = "#6f409f", StrokeWidth = 1 }
            },
            Style = new ConnectorShapeStyle() { StrokeColor = "#6f409f", StrokeWidth = 1 },
            Type = Segments.Straight,
        };
        //Add the connector into connectors's collection.
        ConnectorCollection.Add(diagramConnector);
    }

    //Method to change the connector's properties and values at run time.
    private void OnConnectorProperties()
    {
        ConnectorCollection[0].Style.StrokeColor = "#6BA5D7";
        ConnectorCollection[0].Style.Fill = "#6BA5D7";
        ConnectorCollection[0].Style.StrokeWidth = 2;
        ConnectorCollection[0].TargetDecorator.Style.Fill = "#6BA5D7";
        ConnectorCollection[0].TargetDecorator.Style.StrokeColor = "#6BA5D7";
        ConnectorCollection[0].SourcePoint.X = 150;
        ConnectorCollection[0].TargetPoint.Y = 150;
    }
}

Segments

The path of the connector is defined with a collection of segments. There are three types of segments.

Straight

To create a straight line, specify the Type of the segment as straight and add a straight segment to Segments collection and need to specify Type for the connector. The following code example illustrates how to create a default straight segment.

@using Syncfusion.Blazor.Diagrams
@using System.Collections.ObjectModel

<SfDiagram Width="100%" Height="690px" Connectors="@ConnectorCollection" Constraints="@diagramConstraints"/>

@code
{
    //Defines diagram's connector collection
    public ObservableCollection<DiagramConnector> ConnectorCollection = new ObservableCollection<DiagramConnector>();
    //Defines the diagram constraints.
    public DiagramConstraints diagramConstraints = DiagramConstraints.Default;

    protected override void OnInitialized()
    {
        DiagramConnector diagramConnector = new DiagramConnector()
        {
            SourcePoint = new ConnectorSourcePoint() { X = 100, Y = 100 },
            TargetPoint = new ConnectorTargetPoint() { X = 200, Y = 200 },
            TargetDecorator = new ConnectorTargetDecorator()
            {
                Shape = DecoratorShapes.Arrow,
                Style = new DecoratorShapeStyle() { Fill = "#6f409f", StrokeColor = "#6f409f", StrokeWidth = 1 }
            },
            Style = new ConnectorShapeStyle() { StrokeColor = "#6f409f", StrokeWidth = 1 },

            //Specify the segments typs as straight.
            Type = Segments.Straight,
        };
        ConnectorCollection.Add(diagramConnector);
    }
}

Orthogonal

Orthogonal segments are used to create segments that are perpendicular to each other.

Set the segment Type as orthogonal to create a default orthogonal segment and need to specify Type. The following code example illustrates how to create a default orthogonal segment.

Multiple segments can be defined one after another. To create a connector with multiple segments, define and add the segments to connector.Segments collection. The following code example illustrates how to create a connector with multiple segments.

@using Syncfusion.Blazor.Diagrams
@using System.Collections.ObjectModel

<SfDiagram Width="100%" Height="690px" Connectors="@ConnectorCollection" Constraints="@diagramConstraints"/>

@code
{
    //Defines diagram's connector collection
    public ObservableCollection<DiagramConnector> ConnectorCollection = new ObservableCollection<DiagramConnector>();
    public DiagramConstraints diagramConstraints = DiagramConstraints.Default;

    protected override void OnInitialized()
    {
        DiagramConnector diagramConnector = new DiagramConnector()
        {
            SourcePoint = new ConnectorSourcePoint() { X = 100, Y = 100 },
            TargetPoint = new ConnectorTargetPoint() { X = 200, Y = 200 },
            TargetDecorator = new ConnectorTargetDecorator()
            {
                Shape = DecoratorShapes.Arrow,
                Style = new DecoratorShapeStyle() { Fill = "#6f409f", StrokeColor = "#6f409f", StrokeWidth = 1 }
            },
            Style = new ConnectorShapeStyle() { StrokeColor = "#6f409f", StrokeWidth = 1 },

            //Specify the segments type as Orthogonal.
           Type = Segments.Orthogonal,
        };
        ConnectorCollection.Add(diagramConnector);
    }
}

The Length and Direction properties allow to define the flow and length of segment. The following code example illustrates how to create customized orthogonal segments.

@using Syncfusion.Blazor.Diagrams
@using System.Collections.ObjectModel

<SfDiagram Width="100%" Height="690px" Connectors="@ConnectorCollection" Constraints="@diagramConstraints"/>

@code
{
    //Defines diagram's connector collection
    public ObservableCollection<DiagramConnector> ConnectorCollection = new ObservableCollection<DiagramConnector>();

    public DiagramConstraints diagramConstraints = DiagramConstraints.Default;

    protected override void OnInitialized()
    {
        DiagramConnector diagramConnector = new DiagramConnector()
        {
            SourcePoint = new ConnectorSourcePoint() { X = 100, Y = 100 },
            TargetPoint = new ConnectorTargetPoint() { X = 200, Y = 200 },
            TargetDecorator = new ConnectorTargetDecorator()
            {
                Shape = DecoratorShapes.Arrow,
                Style = new DecoratorShapeStyle() { Fill = "#6f409f", StrokeColor = "#6f409f", StrokeWidth = 1 }
            },
            Style = new ConnectorShapeStyle() { StrokeColor = "#6f409f", StrokeWidth = 1 },
            //Specify the connector type as orthogonal.
            Type = Segments.Orthogonal,
            //Initialize the segments collection
            Segments = new ObservableCollection<DiagramConnectorSegment>()
            {
                //Create a new segment with length and direction
                new DiagramConnectorSegment()
                {
                    Length = 100,
                    Type = Segments.Orthogonal,
                    Direction = Direction.Right,
                },
                //Create another new segment with length and direction
                new DiagramConnectorSegment()
                {
                    Length = 100,
                    Type = Segments.Orthogonal,
                    Direction = Direction.Bottom,
                }
            },
        };
        ConnectorCollection.Add(diagramConnector);
    }
}

Note: You need to mention the segment type as same as what you mentioned in connector type. There should be no contradiction between connector type and segment type.

Avoid overlapping

Orthogonal segments are automatically re-routed, in order to avoid overlapping with the source and target nodes. The following preview illustrates how orthogonal segments are re-routed.

@using Syncfusion.Blazor.Diagrams
@using System.Collections.ObjectModel

<SfDiagram Width="100%" Height="690px" Nodes="@NodeCollection" Connectors="@ConnectorCollection" Constraints="@diagramConstraints"/>
@code
{
    public ObservableCollection<DiagramNode> NodeCollection = new ObservableCollection<DiagramNode>();

    public ObservableCollection<DiagramConnector> ConnectorCollection = new ObservableCollection<DiagramConnector>();

    public DiagramConstraints diagramConstraints = DiagramConstraints.Default;

    protected override void OnInitialized()
    {
        //Create source node
        DiagramNode node1 = new DiagramNode()
        {
            OffsetX = 100,
            OffsetY = 100,
            Height = 50,
            Width = 100,
            Id = "node1",
            Shape = new DiagramShape() { Type = Syncfusion.Blazor.Diagrams.Shapes.Basic, BasicShape = BasicShapes.Ellipse },
            Style = new NodeShapeStyle()
            {
                Fill = "#37909A",
                StrokeColor = "#37909A",
            },
            Ports = new ObservableCollection<DiagramPort>()
            {
                 new DiagramPort()
                 {
                     Id = "port1",
                     Offset = new Syncfusion.Blazor.Diagrams.NodePortOffset() { X = 1, Y = 0.5 },
                     Height = 10,
                     Width = 10,
                     Visibility = PortVisibility.Visible,
                     Style = new PortShapeStyle() { Fill = "yellow", StrokeColor = "yellow" }
                 },
            },
        };
        //Add node into node's collection
        NodeCollection.Add(node1);

        //Create target node
        DiagramNode node2 = new DiagramNode()
        {
            OffsetX = 300,
            OffsetY = 300,
            Height = 50,
            Width = 100,
            Id = "node2",
            Shape = new DiagramShape() { Type = Syncfusion.Blazor.Diagrams.Shapes.Basic, BasicShape = BasicShapes.Ellipse },
            Style = new NodeShapeStyle()
            {
                Fill = "#37909A",
                StrokeColor = "#37909A",
            },
            Ports = new ObservableCollection<DiagramPort>()
            {
                 new DiagramPort()
                 {
                     Id = "port2",
                     Offset = new Syncfusion.Blazor.Diagrams.NodePortOffset() { X = 0, Y = 0.5 },
                     Height = 10,
                     Width = 10,
                     Visibility = PortVisibility.Visible,
                     Style = new PortShapeStyle() { Fill = "yellow", StrokeColor = "yellow" }
                 },
            },
        };
        //Add node into node's collection
        NodeCollection.Add(node2);
        //Create a connector.
        DiagramConnector diagramConnector = new DiagramConnector()
        {
            SourceID = "node1",
            TargetID = "node2",
            SourcePortID = "port1",
            TargetPortID = "port2",
            TargetDecorator = new ConnectorTargetDecorator()
            {
                Shape = DecoratorShapes.Arrow,
                Style = new DecoratorShapeStyle() { Fill = "#37909A", StrokeColor = "#37909A", StrokeWidth = 1 }
            },
            Style = new ConnectorShapeStyle() { StrokeColor = "#37909A", StrokeWidth = 1 },
            Type = Segments.Orthogonal,
        };

        ConnectorCollection.Add(diagramConnector);
    }
}

Bezier

Bezier segments are used to create curve segments and the curves are configurable either with the control points or with vectors.

To create a bezier segment, the Type of the segment is set as bezier and need to specify type for the connector. The following code example illustrates how to create a default bezier segment.

@using Syncfusion.Blazor.Diagrams
@using System.Collections.ObjectModel

<SfDiagram Width="100%" Height="690px" Connectors="@ConnectorCollection"  Constraints="@diagramConstraints"/>

@code
{
    //Defines diagram's connector collection
    public ObservableCollection<DiagramConnector> ConnectorCollection = new ObservableCollection<DiagramConnector>();

    //Defines diagram's constraints values.
    public DiagramConstraints diagramConstraints = DiagramConstraints.Default;

    protected override void OnInitialized()
    {
        DiagramConnector diagramConnector = new DiagramConnector()
        {
            SourcePoint = new ConnectorSourcePoint() { X = 100, Y = 100 },
            TargetPoint = new ConnectorTargetPoint() { X = 200, Y = 200 },
            TargetDecorator = new ConnectorTargetDecorator()
            {
                Shape = DecoratorShapes.Arrow,
                Style = new DecoratorShapeStyle() { Fill = "#6f409f", StrokeColor = "#6f409f", StrokeWidth = 1 }
            },
            Style = new ConnectorShapeStyle() { StrokeColor = "#6f409f", StrokeWidth = 1 },
            Type = Segments.Bezier,
        };
        //Add the connector into connectors's collection.
        ConnectorCollection.Add(diagramConnector);
    }
}

Decorator

  • Starting and ending points of a connector can be decorated with some customizable shapes like arrows, circles, diamond, or path. The connection end points can be decorated with the SourceDecorator and TargetDecorator properties of the connector.

  • The Shape property of SourceDecorator allows to define the shape of the decorators. Similarly, the Shape property of TargetDecorator allows to define the shape of the decorators.

  • To create custom shape for source decorator, use PathData property. Similarly, to create custom shape for target decorator, use PathData property.

  • The following code example illustrates how to create decorators of various shapes.

@using Syncfusion.Blazor.Diagrams
@using System.Collections.ObjectModel

<SfDiagram @ref="@diagram" Width="100%" Height="690px" Connectors="@ConnectorCollection" Constraints="@diagramConstraints"/>

@code
{
    public SfDiagram diagram;
    //Defines diagram's connector collection
    public ObservableCollection<DiagramConnector> ConnectorCollection = new ObservableCollection<DiagramConnector>();

    public DiagramConstraints diagramConstraints = DiagramConstraints.Default;

    protected override void OnInitialized()
    {
        DiagramConnector diagramConnector = new DiagramConnector()
        {
            SourcePoint = new ConnectorSourcePoint() { X = 100, Y = 100 },
            TargetPoint = new ConnectorTargetPoint() { X = 200, Y = 100 },
            SourceDecorator = new ConnectorSourceDecorator()
            {
                Shape = DecoratorShapes.Circle,
                Style = new DecoratorShapeStyle() { StrokeColor = "#37909A", Fill = "#37909A" , StrokeWidth = 1 },
            },
            TargetDecorator = new ConnectorTargetDecorator()
            {
                Shape = DecoratorShapes.Custom,
                Style = new DecoratorShapeStyle() { StrokeColor = "#37909A", Fill = "#37909A" , StrokeWidth = 1 },
                PathData="M80.5,12.5 C80.5,19.127417 62.59139,24.5 40.5,24.5 C18.40861,24.5 0.5,19.127417 0.5,12.5 C0.5,5.872583 18.40861,0.5 40.5,0.5 C62.59139,0.5 80.5,5.872583 80.5,12.5 z"
            },
            Style = new ConnectorShapeStyle() { StrokeColor = "#37909A", StrokeWidth = 1 },
            Type = Segments.Orthogonal,
        };
        ConnectorCollection.Add(diagramConnector);
    }
}

Padding

Padding is used to leave the space between the Connector’s end point and the object to where it is connected.

  • The SourcePadding property of connector defines space between the source point and the source node of the connector.

  • The TargetPadding property of connector defines space between the end point and the target node of the connector.

  • The following code example illustrates how to leave space between the connection end points and source, target nodes.

@using Syncfusion.Blazor.Diagrams
@using System.Collections.ObjectModel

<SfDiagram Width="100%" Height="690px" Nodes="@NodeCollection" Connectors="@ConnectorCollection" Constraints="@diagramConstraints"/>
@code
{
    //Defines diagram's nodes collection
    public ObservableCollection<DiagramNode> NodeCollection = new ObservableCollection<DiagramNode>();

    //Defines diagram's connector collection
    public ObservableCollection<DiagramConnector> ConnectorCollection = new ObservableCollection<DiagramConnector>();

    public DiagramConstraints diagramConstraints = DiagramConstraints.Default;

    protected override void OnInitialized()
    {
        //Create a node
        DiagramNode node1 = new DiagramNode()
        {
            OffsetX = 100,
            OffsetY = 100,
            Height = 50,
            Width = 100,
            Id = "node1",
            Shape = new DiagramShape() { Type = Syncfusion.Blazor.Diagrams.Shapes.Basic, BasicShape = BasicShapes.Rectangle },
            Style = new NodeShapeStyle()
            {
                Fill = "#6BA5D7",
                StrokeColor = "#6BA5D7",
            },
        };
        //Add node into node's collection
        NodeCollection.Add(node1);

        //Create a node
        DiagramNode node2 = new DiagramNode()
        {
            OffsetX = 300,
            OffsetY = 300,
            Height = 50,
            Width = 100,
            Id = "node2",
            Shape = new DiagramShape() { Type = Syncfusion.Blazor.Diagrams.Shapes.Basic, BasicShape = BasicShapes.Rectangle },
            Style = new NodeShapeStyle()
            {
                Fill = "#6BA5D7",
                StrokeColor = "#6BA5D7",
            },
        };
        //Add node into node's collection
        NodeCollection.Add(node2);

        DiagramConnector diagramConnector = new DiagramConnector()
        {
            SourceID = "node1",
            TargetID = "node2",
            //Specifies the source and target padding values.
            SourcePadding = 20,
            TargetPadding = 20,
            TargetDecorator = new ConnectorTargetDecorator()
            {
                Shape = DecoratorShapes.Arrow,
                Style = new DecoratorShapeStyle() { Fill = "#6BA5D7", StrokeColor = "#6BA5D7", StrokeWidth = 1 }
            },
            Style = new ConnectorShapeStyle() { StrokeColor = "#6BA5D7", StrokeWidth = 1 },
            Type = Segments.Orthogonal,
        };
        ConnectorCollection.Add(diagramConnector);
    }
}

Connector Padding

Flip

The diagram provides support to flip the connector. The Flip is performed to give the mirrored image of the original element.

  • The Flip is also applicable for nodes.

Note: The flip is not applicable when the connectors connect in nodes

The flip types are as follows:

  • HorizontalFlip is used to interchange the connector source and target x points.

  • VerticalFlip is used to interchange the connector source and target y points.

  • Both is used to interchange the source point as target point and target point as source point

@using Syncfusion.Blazor.Diagrams
@using System.Collections.ObjectModel

<SfDiagram Width="100%" Height="690px" Connectors="@ConnectorCollection" Constraints="@diagramConstraints"/>

@code
{
    //Defines diagram's connector collection
    public ObservableCollection<DiagramConnector> ConnectorCollection = new ObservableCollection<DiagramConnector>();

    public DiagramConstraints diagramConstraints = DiagramConstraints.Default;

    protected override void OnInitialized()
    {
        DiagramConnector diagramConnector = new DiagramConnector()
        {
            SourcePoint = new ConnectorSourcePoint() { X = 100, Y = 100 },
            TargetPoint = new ConnectorTargetPoint() { X = 200, Y = 200 },
            //Specify the flip direction
            Flip = FlipDirection.Both,
            TargetDecorator = new ConnectorTargetDecorator()
            {
                Shape = DecoratorShapes.Arrow,
                Style = new DecoratorShapeStyle() { Fill = "#6f409f", StrokeColor = "#6f409f", StrokeWidth = 1 }
            },
            Style = new ConnectorShapeStyle() { StrokeColor = "#6f409f", StrokeWidth = 1 },
            Type = Segments.Orthogonal,
        };

        ConnectorCollection.Add(diagramConnector);
    }
}

Bridging

Line bridging creates a bridge for lines to smartly cross over the other lines, at points of intersection. By default, BridgeDirection is set to Top. Depending upon the direction given bridging direction appears. Bridging can be enabled/disabled either with the Connector.Constraints or Diagram.Constraints. The following code example illustrates how to enable line bridging.

@using Syncfusion.Blazor.Diagrams
@using System.Collections.ObjectModel

<SfDiagram Width="100%" Height="690px" Connectors="@ConnectorCollection" Constraints="@diagramConstraints"/>

@code
{
    //Defines diagram's connector collection
    public ObservableCollection<DiagramConnector> ConnectorCollection = new ObservableCollection<DiagramConnector>();

    //Enable the bridging constraint for diagram.
    public DiagramConstraints diagramConstraints = DiagramConstraints.Default | DiagramConstraints.Bridging;

    protected override void OnInitialized()
    {
        DiagramConnector diagramConnector1 = new DiagramConnector()
        {
            SourcePoint = new ConnectorSourcePoint() { X = 200, Y = 200 },
            TargetPoint = new ConnectorTargetPoint() { X = 400, Y = 200 },
            TargetDecorator = new ConnectorTargetDecorator()
            {
                Shape = DecoratorShapes.Arrow,
                Style = new DecoratorShapeStyle() { Fill = "#6f409f", StrokeColor = "#6f409f", StrokeWidth = 1 }
            },
            Style = new ConnectorShapeStyle() { StrokeColor = "#6f409f", StrokeWidth = 1 },
            Type = Segments.Orthogonal,
        };

        ConnectorCollection.Add(diagramConnector1);

        DiagramConnector diagramConnector2 = new DiagramConnector()
        {
            SourcePoint = new ConnectorSourcePoint() { X = 300, Y = 100 },
            TargetPoint = new ConnectorTargetPoint() { X = 300, Y = 300 },
            TargetDecorator = new ConnectorTargetDecorator()
            {
                 Shape = DecoratorShapes.Arrow,
                 Style = new DecoratorShapeStyle() { StrokeColor = "#6BA5D7", Fill = "#6BA5D7", StrokeWidth = 1 },
            },
            Style = new ConnectorShapeStyle() { StrokeColor = "#6BA5D7", StrokeWidth = 1 },
            Type = Segments.Orthogonal,
        };
        ConnectorCollection.Add(diagramConnector2);
    }
}

Note: You need to inject connector bridging module into the diagram.

The BridgeSpace property of connectors can be used to define the width for line bridging.

Limitation: Bezier segments do not support bridging.

Corner radius

Corner radius allows to create connectors with rounded corners. The radius of the rounded corner is set with the CornerRadius property.

@using Syncfusion.Blazor.Diagrams
@using System.Collections.ObjectModel

<SfDiagram Width="100%" Height="690px" Connectors="@ConnectorCollection" Constraints="@diagramConstraints"/>

@code
{
    //Defines diagram's connector collection
    public ObservableCollection<DiagramConnector> ConnectorCollection = new ObservableCollection<DiagramConnector>();

    public DiagramConstraints diagramConstraints = DiagramConstraints.Default;

    protected override void OnInitialized()
    {
        DiagramConnector diagramConnector = new DiagramConnector()
        {
            SourcePoint = new ConnectorSourcePoint() { X = 100, Y = 100 },
            TargetPoint = new ConnectorTargetPoint() { X = 200, Y = 200 },
            //specify the corner radius value.
            CornerRadius = 10,
            TargetDecorator = new ConnectorTargetDecorator()
            {
                Shape = DecoratorShapes.Arrow,
                Style = new DecoratorShapeStyle() { Fill = "#6f409f", StrokeColor = "#6f409f", StrokeWidth = 1 }
            },
            Style = new ConnectorShapeStyle() { StrokeColor = "#6f409f", StrokeWidth = 1 },
            Type = Segments.Orthogonal,
        };
        ConnectorCollection.Add(diagramConnector);
    }
}

Appearance

  • The connector’s StrokeWidth, StrokeColor, StrokeDashArray, and Opacity properties are used to customize the appearance of the connector segments.

  • The Visible property of the connector enables or disables the visibility of connector.

  • Default values for all the Connectors can be set using the ConnectorDefaults properties. For example, if all connectors have the same type or having the same property then such properties can be moved into ConnectorDefaults.

Segment appearance

The following code example illustrates how to customize the segment appearance.

@using Syncfusion.Blazor.Diagrams
@using System.Collections.ObjectModel

<SfDiagram @ref="@diagram" Width="100%" Height="690px" Connectors="@ConnectorCollection" Constraints="@diagramConstraints"/>

@code
{
    //Defines diagram's connector collection
    public ObservableCollection<DiagramConnector> ConnectorCollection = new ObservableCollection<DiagramConnector>();

    public DiagramConstraints diagramConstraints = DiagramConstraints.Default;

    protected override void OnInitialized()
    {
        DiagramConnector diagramConnector = new DiagramConnector()
        {
            SourcePoint = new ConnectorSourcePoint() { X = 100, Y = 100 },
            TargetPoint = new ConnectorTargetPoint() { X = 200, Y = 200 },
            TargetDecorator = new ConnectorTargetDecorator()
            {
                Shape = DecoratorShapes.Arrow,
                Style = new DecoratorShapeStyle() { Fill = "#6f409f", StrokeColor = "#6f409f", StrokeWidth = 1 }
            },
            //To customize appearance of the connector segments
            Style = new ConnectorShapeStyle() { StrokeColor = "red", StrokeWidth = 2, StrokeDashArray = "2,2" },
            Type = Segments.Orthogonal,
        };

        ConnectorCollection.Add(diagramConnector);
    }
}

Decorator appearance

  • The source decorator’s StrokeColor, StrokeWidth, and StrokeDashArray properties are used to customize the color, width, and appearance of the decorator.

  • To set the border stroke color, stroke width, and stroke dash array for the target decorator, use StrokeColor, StrokeWidth, and StrokeDashArray.

  • To set the size for source and target decorator, use width and height property.

The following code example illustrates how to customize the appearance of the decorator.

@using Syncfusion.Blazor.Diagrams
@using System.Collections.ObjectModel

<SfDiagram Width="100%" Height="690px" Connectors="@ConnectorCollection" Constraints="@diagramConstraints"/>

@code
{
    //Defines diagram's connector collection
    public ObservableCollection<DiagramConnector> ConnectorCollection = new ObservableCollection<DiagramConnector>();

    public DiagramConstraints diagramConstraints = DiagramConstraints.Default;

    protected override void OnInitialized()
    {
        DiagramConnector diagramConnector = new DiagramConnector()
        {
            SourcePoint = new ConnectorSourcePoint() { X = 100, Y = 100 },
            TargetPoint = new ConnectorTargetPoint() { X = 200, Y = 200 },
            SourceDecorator = new ConnectorSourceDecorator()
            {
                Shape = DecoratorShapes.Arrow,
                Height = 15,
                Width = 15,
                Style = new DecoratorShapeStyle() { StrokeColor = "blue", Fill = "yellow", StrokeWidth = 3 },
            },
            TargetDecorator = new ConnectorTargetDecorator()
            {
                Shape = DecoratorShapes.Arrow,
                Height = 15,
                Width = 15,
                Style = new DecoratorShapeStyle() { StrokeColor = "red", Fill = "yellow", StrokeWidth = 3 },
            },
            Style = new ConnectorShapeStyle() { StrokeColor = "black", StrokeWidth = 1 },
            Type = Segments.Orthogonal,
        };

        ConnectorCollection.Add(diagramConnector);
    }
}

Constraints

  • The Constraints property of connector allows to enable/disable certain features of connectors.

  • To enable or disable the constraints, refer Constraints.

The following code illustrates how to disable selection.

@using Syncfusion.Blazor.Diagrams
@using System.Collections.ObjectModel

<SfDiagram Width="100%" Height="690px" Connectors="@ConnectorCollection" Constraints="@diagramConstraints"/>

@code
{
    //Defines diagram's connector collection
    public ObservableCollection<DiagramConnector> ConnectorCollection = new ObservableCollection<DiagramConnector>();

    public DiagramConstraints diagramConstraints = DiagramConstraints.Default;

    protected override void OnInitialized()
    {
        DiagramConnector diagramConnector = new DiagramConnector()
        {
            SourcePoint = new ConnectorSourcePoint() { X = 100, Y = 100 },
            TargetPoint = new ConnectorTargetPoint() { X = 200, Y = 200 },
            TargetDecorator = new ConnectorTargetDecorator()
            {
                Shape = DecoratorShapes.Arrow,
                Style = new DecoratorShapeStyle() { Fill = "black", StrokeColor = "black", StrokeWidth = 1 }
            },
            Style = new ConnectorShapeStyle() { StrokeColor = "black", StrokeWidth = 1 },
            Type = Segments.Orthogonal,
            //Disable the select constraint
            Constraints = ConnectorConstraints.Default & ~ConnectorConstraints.Select,
        };

        ConnectorCollection.Add(diagramConnector);
    }
}

Custom properties

  • The AddInfo property of connectors allow you to maintain additional information to the connectors.
@using Syncfusion.Blazor.Diagrams
@using System.Collections.ObjectModel

<SfDiagram Width="100%" Height="690px" Connectors="@ConnectorCollection" Constraints="@diagramConstraints"/>

@code
{
    //Defines diagram's connector collection
    public ObservableCollection<DiagramConnector> ConnectorCollection = new ObservableCollection<DiagramConnector>();

    public DiagramConstraints diagramConstraints = DiagramConstraints.Default;

    protected override void OnInitialized()
    {
        DiagramConnector diagramConnector = new DiagramConnector()
        {
            SourcePoint = new ConnectorSourcePoint() { X = 100, Y = 100 },
            TargetPoint = new ConnectorTargetPoint() { X = 200, Y = 200 },
            TargetDecorator = new ConnectorTargetDecorator()
            {
                Shape = DecoratorShapes.Arrow,
                Style = new DecoratorShapeStyle() { Fill = "black", StrokeColor = "black", StrokeWidth = 1 }
            },
            Style = new ConnectorShapeStyle() { StrokeColor = "black", StrokeWidth = 1 },
            Type = Segments.Orthogonal,
            //Define the add info value.
            AddInfo = "Central Connector",
        };
        ConnectorCollection.Add(diagramConnector);
    }
}

Stack order

The connectors ZIndex property specifies the stack order of the connector. A connector with greater stack order is always in front of a connector with a lower stack order.

The following code illustrates how to render connector based on the stack order.

@using Syncfusion.Blazor.Diagrams
@using System.Collections.ObjectModel

<SfDiagram Width="100%" Height="690px" Connectors="@ConnectorCollection" Constraints="@diagramConstraints"/>

@code
{
    //Defines diagram's connector collection
    public ObservableCollection<DiagramConnector> ConnectorCollection = new ObservableCollection<DiagramConnector>();

    public DiagramConstraints diagramConstraints = DiagramConstraints.Default;

    protected override void OnInitialized()
    {
        DiagramConnector diagramConnector1 = new DiagramConnector()
        {
            SourcePoint = new ConnectorSourcePoint() { X = 100, Y = 100 },
            TargetPoint = new ConnectorTargetPoint() { X = 200, Y = 100 },
            //Specify the z-index value
            ZIndex = 2,
            TargetDecorator = new ConnectorTargetDecorator()
            {
                Shape = DecoratorShapes.Arrow,
                Style = new DecoratorShapeStyle() { StrokeColor = "black", Fill = "black" , StrokeWidth = 1 },
            },
            Style = new ConnectorShapeStyle() { StrokeColor = "black", StrokeWidth = 1 },
            Type = Segments.Orthogonal,
        };

        ConnectorCollection.Add(diagramConnector1);

        DiagramConnector diagramConnector2 = new DiagramConnector()
        {
            SourcePoint = new ConnectorSourcePoint() { X = 100, Y = 200 },
            TargetPoint = new ConnectorTargetPoint() { X = 200, Y = 200 },
            //Specify the z-index value
            ZIndex = 1,
            TargetDecorator = new ConnectorTargetDecorator()
            {
                Shape = DecoratorShapes.Arrow,
                Style = new DecoratorShapeStyle() { StrokeColor = "black", Fill = "black" , StrokeWidth = 1 },
            },
            Style = new ConnectorShapeStyle() { StrokeColor = "black", StrokeWidth = 1 },
            Type = Segments.Orthogonal,
        };
        ConnectorCollection.Add(diagramConnector2);
    }
}

See Also