BPMN Connectors in Blazor Diagram Component

7 Jul 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 Default BPMN FlowShapes
Directional Directional BPMN FlowShapes
BiDirectional BiDirectional BPMN FlowShapes

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 Default Sequence BPMN Shpae
Conditional Conditional Sequence BPMN Shpae
Normal Normal Sequence BPMN Shpae

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 Default Message BPMN Shape
InitiatingMessage InitiatingMessage Message BPMN Shape
NonInitiatingMessage NonInitiatingMessage Message BPMN Shape

The default value for the property Message is Default.