BPMN flows in EJ2 JavaScript Diagram control

22 Mar 202513 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.

index.js
index.html
var connector = {
    
    sourcePoint: { x: 100, y: 100 }, targetPoint: { x: 300, y: 100 }, type: 'Orthogonal',
    shape: {
type: 'Bpmn',
flow: 'Association',
association: 'BiDirectional'
}, 
        };
var connector2 = {
    
    sourcePoint: { x: 100, y: 200 }, targetPoint: { x: 300, y: 200 }, type: 'Orthogonal',
    shape: {
type: 'Bpmn',
flow: 'Association',
association: 'Directional'
}, 
        };
var connector3 = {
    
    sourcePoint: { x: 100, y: 300 }, targetPoint: { x: 300, y: 300 }, type: 'Orthogonal',
    shape: {
type: 'Bpmn',
flow: 'Association',
association: 'Default'
}, 
        };
// initialize Diagram component

var diagram = new ej.diagrams.Diagram({
    width: '100%', height: '600px', connectors: [connector,connector2,connector3]
    }, '#element');
<!DOCTYPE html><html lang="en"><head>
    <title>EJ2 Diagram</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Typescript UI Controls">
    <meta name="author" content="Syncfusion">
    <link href="index.css" rel="stylesheet">
    
    <link href="https://cdn.syncfusion.com/ej2/31.2.12/ej2-base/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/31.2.12/ej2-buttons/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/31.2.12/ej2-popups/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/31.2.12/ej2-splitbuttons/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/31.2.12/ej2-diagrams/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/31.2.12/ej2-navigations/styles/fabric.css" rel="stylesheet">
    
<script src="https://cdn.syncfusion.com/ej2/31.2.12/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    
    <div id="container">
        <div id="element"></div>
    </div>


<script>
var ele = document.getElementById('container');
if(ele) {
  ele.style.visibility = "visible";
}   
      </script>
<script src="index.js" type="text/javascript"></script>
</body></html>

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 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.

index.js
index.html
var connector = {
    sourcePoint: { x: 100, y: 100 },
    targetPoint: { x: 300, y: 100 },
    type: 'Orthogonal',
    shape: {
      type: 'Bpmn',
      flow: 'Sequence',
      sequence: 'Default',
    },
  };
  var connector2 = {
    sourcePoint: { x: 100, y: 200 },
    targetPoint: { x: 300, y: 200 },
    type: 'Orthogonal',
    shape: {
      type: 'Bpmn',
      flow: 'Sequence',
      sequence: 'Normal',
    },
  };
  var connector3 = {
    sourcePoint: { x: 100, y: 300 },
    targetPoint: { x: 300, y: 300 },
    type: 'Orthogonal',
    shape: {
      type: 'Bpmn',
      flow: 'Sequence',
      sequence: 'Conditional',
    },
  };

// initialize Diagram component

var diagram = new ej.diagrams.Diagram({
    width: '100%', height: '600px', connectors: [connector,connector2,connector3]
    }, '#element');
<!DOCTYPE html><html lang="en"><head>
    <title>EJ2 Diagram</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Typescript UI Controls">
    <meta name="author" content="Syncfusion">
    <link href="index.css" rel="stylesheet">
    
    <link href="https://cdn.syncfusion.com/ej2/31.2.12/ej2-base/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/31.2.12/ej2-buttons/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/31.2.12/ej2-popups/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/31.2.12/ej2-splitbuttons/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/31.2.12/ej2-diagrams/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/31.2.12/ej2-navigations/styles/fabric.css" rel="stylesheet">
    
<script src="https://cdn.syncfusion.com/ej2/31.2.12/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    
    <div id="container">
        <div id="element"></div>
    </div>


<script>
var ele = document.getElementById('container');
if(ele) {
  ele.style.visibility = "visible";
}   
      </script>
<script src="index.js" type="text/javascript"></script>
</body></html>

The following table contains various representation of sequence flows.

Sequence	Image
Default
Conditional
Normal

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.

index.js
index.html
var connector = {
    
    sourcePoint: { x: 100, y: 100 }, targetPoint: { x: 300, y: 100 }, type: 'Orthogonal',
    shape: {
type: 'Bpmn',
flow: 'Message',
message: 'Default'
}, 
        };
var connector2 = {
    
    sourcePoint: { x: 100, y: 200 }, targetPoint: { x: 300, y: 200 }, type: 'Orthogonal',
    shape: {
type: 'Bpmn',
flow: 'Message',
message: 'NonInitiatingMessage'
}, 
        };
var connector3 = {
    
    sourcePoint: { x: 100, y: 300 }, targetPoint: { x: 300, y: 300 }, type: 'Orthogonal',
    shape: {
type: 'Bpmn',
flow: 'Message',
message: 'InitiatingMessage'
}, 
        };

// initialize Diagram component

var diagram = new ej.diagrams.Diagram({
    width: '100%', height: '600px', connectors: [connector,connector2,connector3]
    }, '#element');
<!DOCTYPE html><html lang="en"><head>
    <title>EJ2 Diagram</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Typescript UI Controls">
    <meta name="author" content="Syncfusion">
    <link href="index.css" rel="stylesheet">
    
    <link href="https://cdn.syncfusion.com/ej2/31.2.12/ej2-base/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/31.2.12/ej2-buttons/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/31.2.12/ej2-popups/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/31.2.12/ej2-splitbuttons/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/31.2.12/ej2-diagrams/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/31.2.12/ej2-navigations/styles/fabric.css" rel="stylesheet">
    
<script src="https://cdn.syncfusion.com/ej2/31.2.12/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    
    <div id="container">
        <div id="element"></div>
    </div>


<script>
var ele = document.getElementById('container');
if(ele) {
  ele.style.visibility = "visible";
}   
      </script>
<script src="index.js" type="text/javascript"></script>
</body></html>

The following table contains various representation of message flows.

Message	Image
Default
InitiatingMessage
NonInitiatingMessage

NOTE

The default value for the property message is default.

Search docs

Ask HelpBot