BPMN Connectors in Blazor Diagram Component
10 Mar 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.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 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 | ![]() |
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.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 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 | ![]() |
Conditional | ![]() |
Normal | ![]() |
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 messages 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 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 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 | ![]() |
InitiatingMessage | ![]() |
NonInitiatingMessage | ![]() |
The default value for the property
Message
is Default.