BPMN Connectors in Blazor Diagram Component

27 Jun 20257 minutes to read

The BPMN Connectors are lines that connect BPMN flow objects.

They are classified as follows.

• Association
• Sequence
• Message

How to Create a Association

The BPMN Association flow is used to link flow objects with their corresponding text or artifact. An association is represented as a dotted graphical line with an opened arrow.
To create an Association, the Flow property of the BpmnFlowShape should be set to AssociationFlow. The types of association are as follows:

• DirectionalAssociationFlow: Represented as a dotted graphical line with one side arrow.
• BiDirectionalAssociationFlow: Represented as a dotted graphical line with double side arrow.
• AssociationFlow: An Association is represented as a dotted graphical line with an opened arrow.

The following code example explains how to create an association.

@using Syncfusion.Blazor.Diagram

@* Initialize Diagram *@
<SfDiagramComponent Height="600px" Connectors="@connectors"/>

@code
{
    // Create connector and store it in the connector collection.
    DiagramObjectCollection<Connector> connectors;

    protected override void OnInitialized()
    {
        connectors = new DiagramObjectCollection<Connector>();
        Connector connector = new Connector()
        {
            // Unique Id of the connector.
            ID = "connector1",
            // Start and end point of the connector
            SourcePoint = new DiagramPoint () { X = 100, Y = 200 },
            TargetPoint = new DiagramPoint () { X = 300, Y = 300 },
            // Sets the type to Bpmn, flow to AssociationFlow.
            Shape = new BpmnFlow()
            {
                Flow = BpmnFlowType.AssociationFlow,
            }
        };
        connectors.Add(connector);
    }
}

You can download a complete working sample from GitHub

The following table shows the visual representation of association flows.

Association	Image
AssociationFlow
DirectionalAssociationFlow
BiDirectionalAssociationFlow

How to Create a Sequence

A Sequence flow shows the order that the activities are performed in a BPMN process and is represented by a solid graphical line. To create a SequenceFlow, Flow property of the BpmnFlowShape should be set to SequenceFlow. The types of sequence are as follows:

• SequenceFlow: Sequence flows represent the typical path between the two flow objects.
• ConditionalSequenceFlow: Conditional sequence flows are used to control the flow of a process based on certain conditions.
• DefaultSequenceFlow: Default sequence flows are represented by an arrow with a tic mark on one end.

The following code example explains how to create a sequence flow.

@using Syncfusion.Blazor.Diagram

@* Initialize Diagram *@
<SfDiagramComponent Height="600px" Connectors="@connectors"/>

@code
{
    // Create connector and store it in the connector collection.
    DiagramObjectCollection<Connector> connectors;

    protected override void OnInitialized()
    {
        connectors = new DiagramObjectCollection<Connector>();
        Connector connector = new Connector()
        {
            // Unique Id of the connector.
            ID = "connector1",
            // Start and end point of the connector.
            SourcePoint = new DiagramPoint() { X = 100, Y = 200 },
            TargetPoint = new DiagramPoint() { X = 300, Y = 300 },
            // Sets the flow to SequenceFlow.
            Shape = new BpmnFlow()
            {
                Flow = BpmnFlowType.SequenceFlow,
            }
        };
        connectors.Add(connector);
    }
}

You can download a complete working sample from GitHub

The following table contains various representation of sequence flows.

Sequence	Image
DefaultSequenceFlow
ConditionalSequenceFlow
SequenceFlow

NOTE

The default value for the property Sequence is Normal.

How to Create a Message

Message flows are used when two separately controlled processes communicate and collaborate with one another. An activity or event in one pool can initiate a message to the another pool. Message Flows are depicted as lines with an empty circle indicating where the message originates and an empty arrowhead where the message terminates. To create a MessageFlow, the Flow property of the BpmnFlowShape should be set to MessageFlow. The types of message flows are as follows:

• InitiatingMessageFlow: An activity or event in one pool can initiate a message to another pool.
• NonInitiatingMessageFlow: An activity or event in one pool cannot initiate a message to another pool.
• MessageFlow: A MessageFlow shows the flow of messages between two participants and is represented by line.

The following code example explains how to define a message flow.

@using Syncfusion.Blazor.Diagram

@* Initialize Diagram *@
<SfDiagramComponent Height="600px" Connectors="@connectors"/>

@code
{
    // Create connector and store it in the connector collection.
    DiagramObjectCollection<Connector> connectors;

    protected override void OnInitialized()
    {
        connectors = new DiagramObjectCollection<Connector>();
        Connector connector = new Connector()
        {
            // Unique Id of the connector.
            ID = "connector1",
            // Start and end point of the connector.
            SourcePoint = new DiagramPoint() { X = 100, Y = 200 },
            TargetPoint = new DiagramPoint() { X = 300, Y = 300 },
            // Sets the flow to MessageFlow.
            Shape = new BpmnFlow()
            {
                Flow = BpmnFlowType.MessageFlow,
            }
        };
        connectors.Add(connector);
    }
}

You can download a complete working sample from GitHub

The following table contains various representation of message flows.

Message	Image
MessageFlow
InitiatingMessageFlow
NonInitiatingMessageFlow

NOTE

The default value for the property Flow is SequenceFlow.