BPMN flows in Angular Diagram control

Overview

BPMN Flows are connecting lines that define relationships and information flow between BPMN elements in business process diagrams. These flows are essential for modeling how activities, events, and gateways interact within a process workflow.

BPMN flows are categorized into three main types:

Association - Links flow objects with supporting text or artifacts
Sequence - Shows the execution order of activities in a process
Message - Represents communication between different process participants

Association flow

BPMN Association flows connect BPMN flow objects with their corresponding text annotations or artifacts. Association flows are represented as dotted lines with open arrowheads and do not affect the sequence or execution of the process.

The association flow supports three types:

Directional - Shows a one-way association from source to target
BiDirectional - Indicates a two-way association between elements
Default - A simple association without directional emphasis

The association property allows you to define the type of association. The following code example illustrates how to create an association flow:

app.component.ts
main.ts
import { DiagramModule, BpmnDiagramsService, BpmnFlowModel, PointModel } from '@syncfusion/ej2-angular-diagrams'
import { Component, ViewEncapsulation, ViewChild } from '@angular/core';

@Component({
imports: [
         DiagramModule
    ],

providers: [BpmnDiagramsService],
standalone: true,
    selector: "app-container",
    template: `<ejs-diagram id="diagram" width="100%" height="580px">
        <e-connectors>
            <e-connector id='connector' type='Orthogonal' [sourcePoint]='sourcePoint0' [targetPoint]='targetPoint0'[shape]='shape0' > 
            </e-connector>
            <e-connector id='connector1' type='Orthogonal' [sourcePoint]='sourcePoint1' [targetPoint]='targetPoint1' [shape]='shape1'> 
            </e-connector>
            <e-connector id='connector2' type='Orthogonal' [sourcePoint]='sourcePoint2' [targetPoint]='targetPoint2' [shape]='shape2'> 
            </e-connector>
        </e-connectors>
    </ejs-diagram>`,
    encapsulation: ViewEncapsulation.None
})
export class AppComponent {
    @ViewChild("diagram")
    public sourcePoint?: PointModel;
    public targetPoint?:PointModel;
    public shape?: BpmnFlowModel;
    public sourcePoint0?: PointModel;
    public targetPoint0?:PointModel;
    public shape0?: BpmnFlowModel;
    public sourcePoint1?: PointModel;
    public targetPoint1?:PointModel;
    public shape1?: BpmnFlowModel;
    public sourcePoint2?: PointModel;
    public targetPoint2?:PointModel;
    public shape2?: BpmnFlowModel;
    ngOnInit(): void {
        this.sourcePoint0 = { x: 100, y: 100 };
        this.targetPoint0 = { x: 300, y: 100 };
        this.shape0 = {
            type: 'Bpmn',
            flow: 'Association',
            association: 'BiDirectional'
        };
        this.sourcePoint1 = { x: 100, y: 200 };
        this.targetPoint1 = { x: 300, y: 200 };
        this.shape1 = {
            type: 'Bpmn',
            flow: 'Association',
            association: 'Directional'
        };
        this.sourcePoint2 = { x: 100, y: 300 };
        this.targetPoint2 = { x: 300, y: 300 };
        this.shape2 = {
            type: 'Bpmn',
            flow: 'Association',
            association: 'Default'
        };
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

The following table demonstrates the visual representation of association flows:

Association	Image
Default
Directional
BiDirectional

NOTE

The default value for the property association is default.

Sequence flow

A Sequence flow defines the execution order of activities, events, and gateways within a BPMN process. Sequence flows are represented by solid lines with closed arrowheads and control the flow of the process from one element to the next.

The sequence flow supports three types:

Normal - Standard flow path without special conditions
Conditional - Flow that occurs only when specific conditions are met
Default - Alternative flow path when conditional flows are not satisfied

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

app.component.ts
main.ts
import { DiagramModule, BpmnDiagramsService,BpmnFlowModel, PointModel  } from '@syncfusion/ej2-angular-diagrams'
import { Component, ViewEncapsulation, ViewChild } from '@angular/core';

@Component({
imports: [
         DiagramModule
    ],

providers: [BpmnDiagramsService],
standalone: true,
    selector: "app-container",
    template: `<ejs-diagram id="diagram" width="100%" height="580px" [constraints]='diagramConstraints'>
        <e-connectors>
            <e-connector id='connector' type='Orthogonal' [sourcePoint]='sourcePoint0' [targetPoint]='targetPoint0' [constraints]='connectorConstraints' [shape]='shape0'>
            </e-connector>
            <e-connector id='connector1' type='Orthogonal' [sourcePoint]='sourcePoint1' [targetPoint]='targetPoint1' [constraints]='connectorConstraints' [shape]='shape1'>
            </e-connector>
            <e-connector id='connector2' type='Orthogonal' [sourcePoint]='sourcePoint2' [targetPoint]='targetPoint2' [constraints]='connectorConstraints' [shape]='shape2'>
            </e-connector>
        </e-connectors>
    </ejs-diagram>`,
    encapsulation: ViewEncapsulation.None
})
export class AppComponent {
    @ViewChild("diagram")
    public sourcePoint?: PointModel;
    public targetPoint?:PointModel;
    public shape?: BpmnFlowModel;
     public sourcePoint0?: PointModel;
    public targetPoint0?:PointModel;
    public shape0?: BpmnFlowModel;
    public sourcePoint1?: PointModel;
    public targetPoint1?:PointModel;
    public shape1?: BpmnFlowModel;
    public sourcePoint2?: PointModel;
    public targetPoint2?:PointModel;
    public shape2?: BpmnFlowModel;
diagramConstraints: any;
connectorConstraints: any;
    ngOnInit(): void {
        this.sourcePoint0 = { x: 100, y: 100 };
        this.targetPoint0 = { x: 300, y: 100 };
        this.shape0 = {
            type: 'Bpmn',
            flow: 'Sequence',
            sequence: 'Default'
        };
        this.sourcePoint1 = { x: 100, y: 200 };
        this.targetPoint1 = { x: 300, y: 200 };
        this.shape1 = {
            type: 'Bpmn',
            flow: 'Sequence',
            sequence: 'Normal'
        };
        this.sourcePoint2 = { x: 100, y: 300 };
        this.targetPoint2 = { x: 300, y: 300 };
        this.shape2 = {
            type: 'Bpmn',
            flow: 'Sequence',
            sequence: 'Conditional'
        };
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

The following table contains various representations of sequence flows:

Sequence	Image
Default
Directional
BiDirectional

NOTE

The default value for the property sequence is normal.

Message flow

A Message flow represents the exchange of messages between different participants or pools in a BPMN process. Message flows are depicted as dashed lines and show communication that crosses organizational boundaries.

The message flow supports three types:

InitiatingMessage - Message that starts a process or triggers an activity
NonInitiatingMessage - Message that provides information but does not start a process
Default - Standard message flow without special initiation properties

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

app.component.ts
main.ts
import { DiagramModule, BpmnDiagramsService, BpmnFlowModel, DiagramConstraints, ConnectorConstraints, PointModel } from '@syncfusion/ej2-angular-diagrams'
import { Component, ViewEncapsulation, OnInit, ViewChild } from '@angular/core';

@Component({
imports: [
         DiagramModule
    ],

providers: [BpmnDiagramsService],
standalone: true,
    selector: "app-container",
    template: `<ejs-diagram id="diagram" width="100%" height="580px" [constraints]='diagramConstraints'>
        <e-connectors>
            <e-connector id='connector1' type='Orthogonal' [sourcePoint]='sourcePoint1' [targetPoint]='targetPoint1' [constraints]='connectorConstraints' [shape]='shape1'>
            </e-connector>
            <e-connector id='connector2' type='Orthogonal' [sourcePoint]='sourcePoint2' [targetPoint]='targetPoint2' [constraints]='connectorConstraints' [shape]='shape2'>
            </e-connector>
            <e-connector id='connector3' type='Orthogonal' [sourcePoint]='sourcePoint3' [targetPoint]='targetPoint3' [constraints]='connectorConstraints' [shape]='shape3'>
            </e-connector>
        </e-connectors>
    </ejs-diagram>`,
    encapsulation: ViewEncapsulation.None
})
export class AppComponent {
    @ViewChild("diagram")
    public diagramConstraints?: DiagramConstraints;
    public connectorConstraints?: ConnectorConstraints;
    public sourcePoint?: PointModel;
    public targetPoint?: PointModel;
    public shape?: BpmnFlowModel;
    public sourcePoint1?: PointModel;
    public targetPoint1?: PointModel;
    public shape1?: BpmnFlowModel;
    public sourcePoint2?: PointModel;
    public targetPoint2?: PointModel;
    public shape2?: BpmnFlowModel;
    public sourcePoint3?: PointModel;
    public targetPoint3?: PointModel;
    public shape3?: BpmnFlowModel;
    ngOnInit(): void {
        this.sourcePoint1 = { x: 100, y: 100 };
        this.targetPoint1 = { x: 300, y: 100 };
        this.shape1 = {
            type: 'Bpmn',
            flow: 'Message',
            message: 'Default'
        };
        this.sourcePoint2 = { x: 100, y: 200 };
        this.targetPoint2 = { x: 300, y: 200 };
        this.shape2 = {
            type: 'Bpmn',
            flow: 'Message',
            message: 'NonInitiatingMessage'
        };
        this.sourcePoint3 = { x: 100, y: 300 };
        this.targetPoint3 = { x: 300, y: 300 };
        this.shape3 = {
            type: 'Bpmn',
            flow: 'Message',
            message: 'InitiatingMessage'
        };
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

The following table contains various representations of message flows:

Message	Image
Default
InitiatingMessage
NonInitiatingMessage

NOTE

The default value for the property message is default.

Flow Usage Guidelines

When designing BPMN diagrams, consider the following best practices for using flows:

Use sequence flows to connect activities, events, and gateways within the same pool or participant
Use message flows to show communication between different pools or participants
Use association flows to attach text annotations, data objects, or other artifacts to flow elements
Ensure flow directions clearly indicate the intended process path and information exchange

Understanding these flow types and their proper usage helps create clear, standardized business process models that effectively communicate process logic and participant interactions.

Search docs

Ask Syncfusion AI Assistant