BPMN Connectors in Blazor Diagram Component

15 Dec 20227 minutes to read

The BPMN Connectors are lines that connect BPMN flow objects.

They are classified as follows.

• Association
• Sequence
• Message

Association

The BPMN Association flow is used to link flow objects with its corresponding text or artifact. An association is represented as a dotted graphical line with an opened arrow. The types of association are as follows:

• Directional
• BiDirectional
• Default

The association property allows you to define the type of association. The following code example explains how to create an association.

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

@* Initialize Diagram *@
<SfDiagram Height="600px" Connectors="@ConnectorCollection">
</SfDiagram>

@code{
    //Defines diagram's connector collection
    public ObservableCollection<DiagramConnector> ConnectorCollection { get; set; }

    protected override void OnInitialized()
    {
        ConnectorCollection = new ObservableCollection<DiagramConnector>();
        DiagramConnector connector = new DiagramConnector()
        {
            //Unique Id of the connector
            Id = "connector1",
            // Start and end point of the connector
            SourcePoint = new ConnectorSourcePoint() { X = 100, Y = 200 },
            TargetPoint = new ConnectorTargetPoint() { X = 300, Y = 200 },
            //Sets the type to Bpmn, flow to Association and association to bidirectional
            Shape = new DiagramConnectorShape()
            {
                Type = ConnectionShapes.Bpmn,
                BpmnFlow = BpmnFlows.Association,
                Association = BpmnAssociationFlows.BiDirectional
            }
        };
        ConnectorCollection.Add(connector);
    }
}

The following table shows the visual representation of association flows.

Association	Image
Default
Directional
BiDirectional

NOTE

The default value for the property Association is Default.

Sequence

A Sequence flow shows the order that the activities are performed in a BPMN process and is represented by a solid graphical line. The types of sequence are as follows:

• Normal
• Conditional
• Default

The sequence property allows you to define the type of sequence. The following code example explains how to create a sequence flow.

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

@* Initialize Diagram *@
<SfDiagram Height="600px" Connectors="@ConnectorCollection">
</SfDiagram>

@code{
    //Defines diagram's connector collection
    public ObservableCollection<DiagramConnector> ConnectorCollection { get; set; }

    protected override void OnInitialized()
    {
        ConnectorCollection = new ObservableCollection<DiagramConnector>();
        DiagramConnector connector = new DiagramConnector()
        {
            //Unique Id of the connector
            Id = "connector1",
            // Start and end point of the connector
            SourcePoint = new ConnectorSourcePoint() { X = 100, Y = 200 },
            TargetPoint = new ConnectorTargetPoint() { X = 300, Y = 200 },
            //Sets type to Bpmn, flow to Sequence, and sequence to Conditional
            Shape = new DiagramConnectorShape()
            {
                Type = ConnectionShapes.Bpmn,
                BpmnFlow = BpmnFlows.Sequence,
                Sequence = BpmnSequenceFlows.Conditional
            }
        };
        ConnectorCollection.Add(connector);
    }
}

The following table contains various representation of sequence flows.

Sequence	Image
Default
Conditional
Normal

NOTE

The default value for the property Sequence is Normal.

Message

A Message flow shows the flow of messages between two participants and is represented by dashed line. The types of message are as follows:

• InitiatingMessage
• NonInitiatingMessage
• Default

The message property allows you to define the type of message. The following code example explains how to define a message flow.

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

@* Initialize Diagram *@
<SfDiagram Height="600px" Connectors="@ConnectorCollection">
</SfDiagram>

@code{
    //Defines diagram's connector collection
    public ObservableCollection<DiagramConnector> ConnectorCollection { get; set; }

    protected override void OnInitialized()
    {
        ConnectorCollection = new ObservableCollection<DiagramConnector>();
        DiagramConnector connector = new DiagramConnector()
        {
            //Unique Id of the connector
            Id = "connector1",
            // Start and end point of the connector
            SourcePoint = new ConnectorSourcePoint() { X = 100, Y = 200 },
            TargetPoint = new ConnectorTargetPoint() { X = 300, Y = 200 },
            //Sets type to Bpmn, flow to Message, and message to InitiatingMessage
            Shape = new DiagramConnectorShape()
            {
                Type = ConnectionShapes.Bpmn,
                BpmnFlow = BpmnFlows.Message,
                Message = BpmnMessageFlows.InitiatingMessage
            }
        };
        ConnectorCollection.Add(connector);
    }
}

The following table contains various representation of message flows.

Message	Image
Default
InitiatingMessage
NonInitiatingMessage

NOTE

The default value for the property Message is Default.