The BPMN Connectors
are lines that used to connection between BPMN flow objects.
They are represent in the following types.
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:
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{
//Create connector and stored it to the connector collection
ObservableCollection<DiagramConnector> ConnectorCollection = new ObservableCollection<DiagramConnector>()
{
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
}
}
};
}
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.
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:
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{
//Create connector and stored it to the connector collection
ObservableCollection<DiagramConnector> ConnectorCollection = new ObservableCollection<DiagramConnector>()
{
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
}
}
};
}
The following table contains various representation of sequence flows.
Sequence | Image |
---|---|
Default |
![]() |
Conditional |
![]() |
Normal |
![]() |
Note: The default value for the property Sequence
is Normal.
A Message
flow shows the flow of messages between two participants and is represented by dashed line. The types of message are as follows:
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{
//Create connector and stored it to the connector collection
ObservableCollection<DiagramConnector> ConnectorCollection = new ObservableCollection<DiagramConnector>()
{
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
}
}
};
}
The following table contains various representation of message flows.
Message | Image |
---|---|
Default |
![]() |
InitiatingMessage |
![]() |
NonInitiatingMessage |
![]() |
Note: The default value for the property Message
is Default.