Connectors in WPF Diagram (SfDiagram)

5 May 20216 minutes to read

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

They are represent in the following types.

  • Association
  • Sequence
  • Message

Association

The BPMN Association flow is used to link the flow objects with its corresponding text or artifact. An Association is represented as a dotted graphical line with an opened arrow.

To create an Association, the FlowType property of the BpmnFlowViewModel should be set to Association. The types of association are as follows:

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

The following code example explains how to create an association.

<!--Initialize the SfDiagram-->
<syncfusion:SfDiagram x:Name="Diagram">
    <syncfusion:SfDiagram.Connectors>
     <!--Initialize the Group Collection-->
     <syncfusion:ConnectorCollection>
        <syncfusion:BpmnFlowViewModel FlowType="Association" SourcePoint="100,100" TargetPoint="200,100"></syncfusion:BpmnFlowViewModel>
     </syncfusion:ConnectorCollection>
    </syncfusion:SfDiagram.Connectors>
</syncfusion:SfDiagram>
//Initialize the diagram.
SfDiagram diagram = new SfDiagram();

 //Initialize the BpmnFlowViewModel.
 BpmnFlowViewModel flow = new BpmnFlowViewModel()
 {
    FlowType = BpmnFlowType.Association,
    SourcePoint = new Point(100, 100),
    TargetPoint = new Point(200, 100)
 };
 // Add the BpmnFlowViewModel into the Connectors's collection.
(Diagram.Connectors as GroupCollection).Add(flow);

BPMN Association

The following table shows the visual representation of the association flows.

FlowType Symbol
Association Default BPMN FlowShapes
DirectionalAssociation Directional BPMN FlowShapes
BiDirectionalAssociation BiDirectional BPMN FlowShapes

SequenceFlow

A SequenceFlow 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, the FlowType property of the BpmnFlowViewModel 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 the certain conditions.
  • DefaultSequenceFlow: Default sequence flows are represented by an arrow with a tic mark on one end.

The sequence property allows you to define the type of sequence. The following code example explains how to create a sequence flow.

<!--Initialize the SfDiagram-->
<syncfusion:SfDiagram x:Name="Diagram">
    <syncfusion:SfDiagram.Connectors>
     <!--Initialize the Group Collection-->
     <syncfusion:ConnectorCollection>
        <syncfusion:BpmnFlowViewModel FlowType="ConditionalSequenceFlow" SourcePoint="100,100" TargetPoint="200,100"></syncfusion:BpmnFlowViewModel>
     </syncfusion:ConnectorCollection>
    </syncfusion:SfDiagram.Connectors>
</syncfusion:SfDiagram>
//Initialize the diagram.
SfDiagram diagram = new SfDiagram();

 //Initialize the BpmnFlowViewModel.
 BpmnFlowViewModel flow = new BpmnFlowViewModel()
 {
    FlowType = BpmnFlowType.ConditionalSequenceFlow,
    SourcePoint = new Point(100, 100),
    TargetPoint = new Point(200, 100)
 };
 // Add the BpmnFlowViewModel into the Connectors's collection.
(Diagram.Connectors as GroupCollection).Add(flow);

BPMN Association

The following table contains various representation of sequence flows.

FlowType Symbol
SequenceFlow SequenceFlow BPMN Shpae
ConditionalSequenceFlow ConditionalSequenceFlow BPMN Shpae
DefaultSequenceFlow DefaultSequenceFlow BPMN Shpae

MessageFlow

Message flows are the 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 showing where the message originates and and empty arrowhead where the message terminates. To create a MessageFlow, the FlowType property of the BpmnFlowViewModel should be set to MessageFlow. The types of message 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 can not initiate a message to another pool.
  • MessageFlow: A MessageFlow flow shows the flow of messages between two participants and is represented by line.

The message property allows you to define the type of message. The following code example explains how to define a message flow.

<!--Initialize the SfDiagram-->
<syncfusion:SfDiagram x:Name="Diagram">
    <syncfusion:SfDiagram.Connectors>
     <!--Initialize the Group Collection-->
     <syncfusion:ConnectorCollection>
        <syncfusion:BpmnFlowViewModel FlowType="InitiatingMessageFlow" SourcePoint="100,100" TargetPoint="200,100"></syncfusion:BpmnFlowViewModel>
     </syncfusion:ConnectorCollection>
    </syncfusion:SfDiagram.Connectors>
</syncfusion:SfDiagram>
//Initialize the diagram.
SfDiagram diagram = new SfDiagram();

 //Initialize the BpmnFlowViewModel.
 BpmnFlowViewModel flow = new BpmnFlowViewModel()
 {
    FlowType = BpmnFlowType.InitiatingMessageFlow,
    SourcePoint = new Point(100, 100),
    TargetPoint = new Point(200, 100)
 };
 // Add the BpmnFlowViewModel into the Connectors's collection.
(Diagram.Connectors as GroupCollection).Add(flow);

BPMN MessageFlow

The following table contains various representation of the message flows.

Message Symbol
MessageFlow MessageFlow BPMN Shape
InitiatingMessageFlow InitiatingMessageFlow BPMN Shape
NonInitiatingMessageFlow NonInitiatingMessageFlow BPMN Shape

Note: The default value for the FlowType property is SequenceFlow.