BPMN flows in Angular Diagram control

28 Mar 202515 minutes to read

BPMN Flows are lines that connects BPMN flow objects.

  • Association
  • Sequence
  • Message

Association flow

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 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 illustrates how to create an association.

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 DefaultImage
Directional DirectionalImage
BiDirectional BiDirectionalImage

NOTE

The default value for the property association is default.

Sequence flow

A Sequence flow shows the order in which 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 illustrates how to create a sequence flow.

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 representation of sequence flows.

Sequence Image
Default DefaultImage
Directional DirectionalImage
BiDirectional BiDirectionalImage

NOTE

The default value for the property sequence is normal.

Message flow

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 illustrates how to define a message flow.

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 representation of message flows.

Message Image
Default DefaultImage
InitiatingMessage InitiatingMessageImage
NonInitiatingMessage NonInitiatingMessageImage

NOTE

The default value for the property message is default.