BPMN Connectors in Blazor Diagram Component

5 Aug 20217 minutes to read

The BPMN Connectors are lines that used to connection between BPMN flow objects.

They are represent in the following types.

  • 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.Diagram

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

@code
{
    // Create connector and stored it to 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 Point() { X = 100, Y = 200 },
            TargetPoint = new Point() { X = 300, Y = 200 },
            // Sets the type to Bpmn, flow to Association and association to bidirectional
            Shape = new BpmnFlow()
            {
                Type = ConnectionShapes.Bpmn,
                Flow = BpmnFlows.Association,
                Association = BpmnAssociationFlows.BiDirectional
            }
        };
        connectors.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.Diagram

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

@code
{
    // Create connector and stored it to 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 Point() { X = 100, Y = 200 },
            TargetPoint = new Point() { X = 300, Y = 200 },
            // Sets the type to Bpmn, flow to Association and association to bidirectional
            Shape = new BpmnFlow()
            {
                Type = ConnectionShapes.Bpmn,
                Flow = BpmnFlows.Sequence,
                Sequence = BpmnSequenceFlows.Conditional
            }
        };
        connectors.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.Diagram

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

@code
{
    // Create connector and stored it to 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 Point() { X = 100, Y = 200 },
            TargetPoint = new Point() { X = 300, Y = 200 },
            // Sets the type to Bpmn, flow to Association and association to bidirectional
            Shape = new BpmnFlow()
            {
                Type = ConnectionShapes.Bpmn,
                Flow = BpmnFlows.Message,
                Message = BpmnMessageFlows.InitiatingMessage
            }
        };
        connectors.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.