BPMN flows in React Diagram Component

21 Oct 202524 minutes to read

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:

import * as React from "react";
import * as ReactDOM from "react-dom";
import { DiagramComponent, Inject, BpmnDiagrams } from "@syncfusion/ej2-react-diagrams";

let connector = [{
        // Position of the node
        sourcePoint: {
            x: 100,
            y: 100
        },
        targetPoint: {
            x: 300,
            y: 100
        },
        //Sets type of the connector as Orthogonal
        type: 'Orthogonal',
        //Sets type as Bpmn, shape as Association and association as BiDirectional
        shape: {
            type: 'Bpmn',
            flow: 'Association',
            association: 'BiDirectional'
        },
    },
    {
        // Position of the node
        sourcePoint: {
            x: 100,
            y: 200
        },
        targetPoint: {
            x: 300,
            y: 200
        },
        //Sets type of the connector as Orthogonal
        type: 'Orthogonal',
        //Sets type as Bpmn, flow as Association and association as Directional
        shape: {
            type: 'Bpmn',
            flow: 'Association',
            association: 'Directional'
        },
    },
    {
        // Position of the node
        sourcePoint: {
            x: 100,
            y: 300
        },
        targetPoint: {
            x: 300,
            y: 300
        },
        //Sets type of the connector as Orthogonal
        type: 'Orthogonal',
        //Sets type as Bpmn, flow as Association and association as Default
        shape: {
            type: 'Bpmn',
            flow: 'Association',
            association: 'Default'
        },
    }];
// initialize Diagram component
function App() {
    return (<DiagramComponent id="container" width={'100%'} height={'600px'} 
    // Add connector
    connectors={connector}>
      <Inject services={[BpmnDiagrams]}/>
    </DiagramComponent>);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);
import * as React from "react";
import * as ReactDOM from "react-dom";
import {DiagramComponent,Inject,ConnectorModel,BpmnDiagrams,
} from "@syncfusion/ej2-react-diagrams";

let connector:ConnectorModel[] = [{
    // Position of the node
    sourcePoint: {
        x: 100,
        y: 100
    },
    targetPoint: {
        x: 300,
        y: 100
    },
    //Sets type of the connector as Orthogonal
    type: 'Orthogonal',
    //Sets type as Bpmn,flow  as Association and association as BiDirectional
    shape: {
        type: 'Bpmn',
        flow: 'Association',
        association: 'BiDirectional'
    },
},
{
    // Position of the node
    sourcePoint: {
        x: 100,
        y: 200
    },
    targetPoint: {
        x: 300,
        y: 200
    },
    //Sets type of the connector as Orthogonal
    type: 'Orthogonal',
    //Sets type as Bpmn  flow as Association and association as Directional
    shape: {
        type: 'Bpmn',
        flow: 'Association',
        association: 'Directional'
    },
},
{
    // Position of the node
    sourcePoint: {
        x: 100,
        y: 300
    },
    targetPoint: {
        x: 300,
        y: 300
    },
    //Sets type of the connector as Orthogonal
    type: 'Orthogonal',
    //Sets type as Bpmn shape, flow as Association and association as Default
    shape: {
        type: 'Bpmn',
        flow: 'Association',
        association: 'Default'
    },
}];
// initialize Diagram component
function App() {
  return (
    <DiagramComponent
      id="container"
      width={'100%'}
      height={'600px'}
      // Add connector
      connectors={connector}
    >
      <Inject services={[BpmnDiagrams]} />
    </DiagramComponent>
  );
}

const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);

The following table demonstrates the visual representation of association flows.

Association Image
Default Default BPMN FlowShapes
Directional Directional BPMN FlowShapes
BiDirectional BiDirectional BPMN FlowShapes

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:

import * as React from "react";
import * as ReactDOM from "react-dom";
import { DiagramComponent, Inject, BpmnDiagrams } from "@syncfusion/ej2-react-diagrams";

let connector = [{
    // Position of the node
    sourcePoint: {
        x: 100,
        y: 100
    },
    targetPoint: {
        x: 300,
        y: 100
    },
    type: 'Orthogonal',
    //Sets type as Bpmn, flow as Sequence, and sequence as Default
    shape: {
        type: 'Bpmn',
        flow: 'Sequence',
        sequence: 'Default'
    },
},
{
    // Position of the node
    sourcePoint: {
        x: 100,
        y: 200
    },
    targetPoint: {
        x: 300,
        y: 200
    },
    type: 'Orthogonal',
    //Sets type as Bpmn, flow as Sequence, and sequence as Normal
    shape: {
        type: 'Bpmn',
        flow: 'Sequence',
        sequence: 'Normal'
    },
},
{
    // Position of the node
    sourcePoint: {
        x: 100,
        y: 300
    },
    targetPoint: {
        x: 300,
        y: 300
    },
    type: 'Orthogonal',
    //Sets type as Bpmn, flow as Sequence and sequence as Conditional
    shape: {
        type: 'Bpmn',
        flow: 'Sequence',
        sequence: 'Conditional'
    },
}];
// initialize diagram component
function App() {
    return (<DiagramComponent id="container" width={'100%'} height={'600px'}
        // Add connector
        connectors={connector}>
        <Inject services={[BpmnDiagrams]} />
    </DiagramComponent>);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);
import * as React from "react";
import * as ReactDOM from "react-dom";
import {DiagramComponent,Inject,ConnectorModel,BpmnDiagrams,
} from "@syncfusion/ej2-react-diagrams";

let connector:ConnectorModel[] = [
    {
    // Position of the node
    sourcePoint: {
        x: 100,
        y: 100
    },
    targetPoint: {
        x: 300,
        y: 100
    },
    type: 'Orthogonal',
    //Sets type as Bpmn, flow as Sequence, and sequence as Default
    shape: {
        type: 'Bpmn',
        flow: 'Sequence',
        sequence: 'Default'
    },
},
{
    // Position of the node
    sourcePoint: {
        x: 100,
        y: 200
    },
    targetPoint: {
        x: 300,
        y: 200
    },
    type: 'Orthogonal',
    //Sets type as Bpmn, flow as Sequence, and sequence as Normal
    shape: {
        type: 'Bpmn',
        flow: 'Sequence',
        sequence: 'Normal'
    },
},
    {
        // Position of the node
        sourcePoint: {
            x: 100,
            y: 300
        },
        targetPoint: {
            x: 300,
            y: 300
        },
        type: 'Orthogonal',
        //Sets type as Bpmn, flow as Sequence and sequence as Conditional
        shape: {
            type: 'Bpmn',
            flow: 'Sequence',
            sequence: 'Conditional'
        },
    }];
// initialize diagram component
function App() {
  return (
    <DiagramComponent
      id="container"
      width={'100%'}
      height={'600px'}
      // Add connector
      connectors={connector}
    >
      <Inject services={[BpmnDiagrams]} />
    </DiagramComponent>
  );
}

const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);

The following table contains various representations of sequence flows:

Sequence Image
Default Default Sequence BPMN Shpae
Conditional Conditional Sequence BPMN Shpae
Normal Normal Sequence BPMN Shpae

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:

import * as React from "react";
import * as ReactDOM from "react-dom";
import { DiagramComponent, Inject, BpmnDiagrams } from "@syncfusion/ej2-react-diagrams";

let connector = [
    {

        sourcePoint: {
            x: 100,
            y: 100
        },
        targetPoint: {
            x: 300,
            y: 100
        },
        type: 'Orthogonal',
        //Sets type as Bpmn, flow as Message, and message as Default
        shape: {
            type: 'Bpmn',
            flow: 'Message',
            message: 'Default'
        },
    },
    {

        sourcePoint: {
            x: 100,
            y: 200
        },
        targetPoint: {
            x: 300,
            y: 200
        },
        type: 'Orthogonal',
        //Sets type as Bpmn, flow as Message, and message as NonInitiatingMessage
        shape: {
            type: 'Bpmn',
            flow: 'Message',
            message: 'NonInitiatingMessage'
        },
    },
    {
        // Position of the node
        sourcePoint: {
            x: 100,
            y: 300
        },
        targetPoint: {
            x: 300,
            y: 300
        },
        type: 'Orthogonal',
        //Sets type as Bpmn, flow as Message and message as InitiatingMessage
        shape: {
            type: 'Bpmn',
            flow: 'Message',
            message: 'InitiatingMessage'
        },
    }];
// initialize diagram component
function App() {
    return (<DiagramComponent id="container" width={'100%'} height={'600px'}
        // Add connector
        connectors={connector}>
        <Inject services={[BpmnDiagrams]} />
    </DiagramComponent>);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);
import * as React from "react";
import * as ReactDOM from "react-dom";
import { DiagramComponent, Inject, ConnectorModel, BpmnDiagrams, } from "@syncfusion/ej2-react-diagrams";

let connector: ConnectorModel[] = [
  {

    sourcePoint: {
      x: 100,
      y: 100
    },
    targetPoint: {
      x: 300,
      y: 100
    },
    type: 'Orthogonal',
    //Sets type as Bpmn, flow as Message, and message as Default
    shape: {
      type: 'Bpmn',
      flow: 'Message',
      message: 'Default'
    },
  },
  {

    sourcePoint: {
      x: 100,
      y: 200
    },
    targetPoint: {
      x: 300,
      y: 200
    },
    type: 'Orthogonal',
    //Sets type as Bpmn, flow as Message, and message as NonInitiatingMessage
    shape: {
      type: 'Bpmn',
      flow: 'Message',
      message: 'NonInitiatingMessage'
    },
  },
  {
    // Position of the node
    sourcePoint: {
      x: 100,
      y: 300
    },
    targetPoint: {
      x: 300,
      y: 300
    },
    type: 'Orthogonal',
    //Sets type as Bpmn, flow as Message and message as InitiatingMessage
    shape: {
      type: 'Bpmn',
      flow: 'Message',
      message: 'InitiatingMessage'
    },
  }];
// initialize diagram component
function App() {
  return (
    <DiagramComponent
      id="container"
      width={'100%'}
      height={'600px'}
      // Add connector
      connectors={connector}
    >
      <Inject services={[BpmnDiagrams]} />
    </DiagramComponent>
  );
}

const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);

The following table contains various representations of message flows:

Message Image
Default Default Message BPMN Shape
InitiatingMessage InitiatingMessage Message BPMN Shape
NonInitiatingMessage NonInitiatingMessage Message BPMN Shape

NOTE

The default value for the property message is default.