BPMN shapes are used to represent the internal business procedure in a graphical notation and enable you to communicate the procedures in a standard manner. To create a BPMN shape, in the node property shape, type should be set as “bpmn” and its shape should be set as any one of the built-in shapes. The following code example illustrates how to create a simple business process.
Note: If you want to use BPMN shapes in React Diagram, you need to inject BpmnDiagrams in the diagram.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { DiagramComponent, Inject, BpmnDiagrams } from "@syncfusion/ej2-react-diagrams";
// A node is created and stored in nodes array.
let node = [{
// Position of the node
offsetX: 250,
offsetY: 250,
// Size of the node
width: 100,
height: 100,
//Sets type as Bpmn and shape as Event
shape: {
type: 'Bpmn',
shape: 'Event',
// set the event type as End
event: {
event: 'End'
}
},
}];
// initialize Diagram component
ReactDOM.render(<DiagramComponent id="diagram" width={'100%'} height={'600px'}
// Add node
nodes={node}><Inject services={[BpmnDiagrams]}/>
</DiagramComponent>, document.getElementById("diagram"));
import * as React from "react";
import * as ReactDOM from "react-dom";
import {
Diagram,
DiagramComponent,
Inject,
NodeModel,
BpmnShape,
BpmnSubProcessModel,
BpmnDiagrams,
BpmnActivityModel,
BpmnFlowModel
} from "@syncfusion/ej2-react-diagrams";
// A node is created and stored in nodes array.
let node: NodeModel[] = [{
// Position of the node
offsetX: 250,
offsetY: 250,
// Size of the node
width: 100,
height: 100,
//Sets type as Bpmn and shape as Event
shape: {
type: 'Bpmn',
shape: 'Event',
// set the event type as End
event: {
event: 'End'
}
},
}];
// initialize Diagram component
ReactDOM.render( <DiagramComponent id="diagram"
width = {
'100%'
}
height = {
'600px'
}
// Add node
nodes = {
node
}
><Inject services = {[BpmnDiagrams]}/>
</DiagramComponent>, document.getElementById("diagram") );
Note : The default value for the property shape
is “event”.
The list of BPMN shapes are as follows:
Shape | Image |
---|---|
Event |
![]() |
Gateway |
![]() |
Task |
![]() |
Message |
![]() |
DataSource |
![]() |
DataObject |
![]() |
Group |
![]() |
The BPMN shapes and its types are explained as follows.
An event
is notated with a circle and it represents an event in a business process. The type of events are as follows:
* Start
* End
* Intermediate
The event
property of the node allows you to define the type of the event. The default value of the event is start. The following code example illustrates how to create a BPMN event.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { DiagramComponent, Inject, BpmnDiagrams } from "@syncfusion/ej2-react-diagrams";
// A node is created and stored in nodes array.
let node = [{
// Position of the node
offsetX: 250,
offsetY: 250,
// Size of the node
width: 100,
height: 100,
//Sets type as Bpmn and shape as event
shape: {
type: 'Bpmn',
shape: 'Event',
// Sets event as End and trigger as None
event: {
event: 'End',
trigger: 'None'
}
},
}];
// initialize Diagram component
ReactDOM.render(<DiagramComponent id="diagram" width={'100%'} height={'600px'}
// Add node
nodes={node}><Inject services={[BpmnDiagrams]}/>
</DiagramComponent>, document.getElementById("diagram"));
import * as React from "react";
import * as ReactDOM from "react-dom";
import {
Diagram,
DiagramComponent,
Inject,
NodeModel,
BpmnShape,
BpmnSubProcessModel,
BpmnDiagrams,
BpmnActivityModel,
BpmnFlowModel
} from "@syncfusion/ej2-react-diagrams";
// A node is created and stored in nodes array.
let node: NodeModel[] = [{
// Position of the node
offsetX: 250,
offsetY: 250,
// Size of the node
width: 100,
height: 100,
//Sets type as Bpmn and shape as event
shape: {
type: 'Bpmn',
shape: 'Event',
// Sets event as End and trigger as None
event: {
event: 'End',
trigger: 'None'
}
},
}];
// initialize Diagram component
ReactDOM.render( <DiagramComponent id="diagram"
width = {
'100%'
}
height = {
'600px'
}
// Add node
nodes = {
node
}
// render initialized diagram
><Inject services = {[BpmnDiagrams]}/>
</DiagramComponent>, document.getElementById("diagram") );
Event triggers are notated as icons inside the circle and they represent the specific details of the process. The trigger
property of the node allows you to set the type of trigger and by default, it is set as none. The following table illustrates the type of event triggers.
Triggers | Start | Non-Interrupting Start | Intermediate | Non-Interrupting Intermediate | Throwing Intermediate | End |
---|---|---|---|---|---|---|
None |
![]() |
![]() |
![]() |
![]() |
![]() |
|
Message |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
Timer |
![]() |
![]() |
![]() |
![]() |
||
Conditional |
![]() |
![]() |
![]() |
![]() |
||
Link |
![]() |
![]() |
||||
Signal |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
Error |
![]() |
![]() |
![]() |
|||
Escalation |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
Termination |
![]() |
|||||
Compensation |
![]() |
![]() |
![]() |
![]() |
||
Cancel |
![]() |
![]() |
||||
Multiple |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
Parallel |
![]() |
![]() |
![]() |
![]() |
Gateway is used to control the flow of a process and it is represented as a diamond shape. To create a gateway, the shape property of the node should be set as gateway
and the gateway property can be set with any of the appropriate gateways. The following code example illustrates how to create a BPMN Gateway.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { DiagramComponent, Inject, BpmnDiagrams } from "@syncfusion/ej2-react-diagrams";
// A node is created and stored in nodes array.
let node = [{
// Position of the node
offsetX: 250,
offsetY: 250,
// Size of the node
width: 100,
height: 100,
//Sets type as Bpmn and shape as Gateway
shape: {
type: 'Bpmn',
shape: 'Gateway',
//Sets type of the gateway as None
gateway: {
type: 'None',
}
},
}];
// initialize Diagram component
ReactDOM.render(<DiagramComponent id="diagram" width={'100%'} height={'600px'}
// Add node
nodes={node}><Inject services={[BpmnDiagrams]}/>
</DiagramComponent>, document.getElementById("diagram"));
import * as React from "react";
import * as ReactDOM from "react-dom";
import {
Diagram,
DiagramComponent,
Inject,
NodeModel,
BpmnShape,
BpmnSubProcessModel,
BpmnDiagrams,
BpmnActivityModel,
BpmnFlowModel,
BpmnGatewayModel
} from "@syncfusion/ej2-react-diagrams";
// A node is created and stored in nodes array.
let node: NodeModel[] = [{
// Position of the node
offsetX: 250,
offsetY: 250,
// Size of the node
width: 100,
height: 100,
//Sets type as Bpmn and shape as Gateway
shape: {
type: 'Bpmn',
shape: 'Gateway',
//Sets type of the gateway as None
gateway: {
type: 'None',
}
},
}];
// initialize Diagram component
ReactDOM.render( <DiagramComponent id="diagram"
width = {
'100%'
}
height = {
'600px'
}
// Add node
nodes = {
node
}
// render initialized diagram
><Inject services = {[BpmnDiagrams]}/>
</DiagramComponent>, document.getElementById("diagram") );
Note: By default, the gateway
will be set as none.
There are several types of gateways as tabulated:
Shape | Image |
---|---|
Exclusive |
![]() |
Parallel |
![]() |
Inclusive |
![]() |
Complex |
![]() |
EventBased |
![]() |
ExclusiveEventBased |
![]() |
ParallelEventBased |
![]() |
The activity
is the task that is performed in a business process. It is represented by a rounded rectangle.
There are two types of activities. They are listed as follows:
To create a BPMN activity, set the shape as activity. You also need to set the type of the BPMN activity by using the activity property of the node. By default, the type of the activity is set as task. The following code example illustrates how to create an activity.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { DiagramComponent, Inject, BpmnDiagrams } from "@syncfusion/ej2-react-diagrams";
// A node is created and stored in nodes array.
let node = [{
// Position of the node
offsetX: 250,
offsetY: 250,
// Size of the node
width: 100,
height: 100,
//Sets type as Bpmn and shape as Activity
shape: {
type: 'Bpmn',
shape: 'Activity',
//Sets activity as Task
activity: {
activity: 'Task'
},
},
}];
// initialize Diagram component
ReactDOM.render(<DiagramComponent id="diagram" width={'100%'} height={'600px'}
// Add node
nodes={node}><Inject services={[BpmnDiagrams]}/>
</DiagramComponent>, document.getElementById("diagram"));
import * as React from "react";
import * as ReactDOM from "react-dom";
import {
Diagram,
DiagramComponent,
Inject,
NodeModel,
BpmnShape,
BpmnSubProcessModel,
BpmnDiagrams,
BpmnActivityModel,
BpmnFlowModel,
BpmnGatewayModel
} from "@syncfusion/ej2-react-diagrams";
// A node is created and stored in nodes array.
let node: NodeModel[] = [{
// Position of the node
offsetX: 250,
offsetY: 250,
// Size of the node
width: 100,
height: 100,
//Sets type as Bpmn and shape as Activity
shape: {
type: 'Bpmn',
shape: 'Activity',
//Sets activity as Task
activity: {
activity: 'Task'
},
},
}];
// initialize Diagram component
ReactDOM.render( <DiagramComponent id="diagram"
width = {
'100%'
}
height = {
'600px'
}
// Add node
nodes = {
node
}
// render initialized diagram
><Inject services = {[BpmnDiagrams]}/>
</DiagramComponent>, document.getElementById("diagram") );
The different activities of BPMN process are listed as follows.
The task
property of the node allows you to define the type of task such as sending, receiving, user based task, etc. By
default, the type property of task is set as none. The following code illustrates how to create different types of
BPMN tasks.
The type
property of tasks allows to represent these results as an event attached to the task..
import * as React from "react";
import * as ReactDOM from "react-dom";
import { DiagramComponent, Inject, BpmnDiagrams } from "@syncfusion/ej2-react-diagrams";
// A node is created and stored in nodes array.
let node = [{
// Position of the node
offsetX: 250,
offsetY: 250,
// Size of the node
width: 100,
height: 100,
//Sets type as Bpmn and shape as Activity
shape: {
type: 'Bpmn',
shape: 'Activity',
//Sets activity as Task
activity: {
activity: 'Task',
//Sets the type of the task as Send
task: {
type: 'Send'
}
},
},
}];
// initialize Diagram component
ReactDOM.render(<DiagramComponent id="diagram" width={'100%'} height={'600px'}
// Add node
nodes={node}><Inject services={[BpmnDiagrams]}/>
</DiagramComponent>, document.getElementById("diagram"));
import * as React from "react";
import * as ReactDOM from "react-dom";
import {
Diagram,
DiagramComponent,
Inject,
NodeModel,
BpmnShape,
BpmnSubProcessModel,
BpmnDiagrams,
BpmnActivityModel,
BpmnFlowModel,
BpmnGatewayModel
} from "@syncfusion/ej2-react-diagrams";
// A node is created and stored in nodes array.
let node: NodeModel[] = [{
// Position of the node
offsetX: 250,
offsetY: 250,
// Size of the node
width: 100,
height: 100,
//Sets type as Bpmn and shape as Activity
shape: {
type: 'Bpmn',
shape: 'Activity',
//Sets activity as Task
activity: {
activity: 'Task',
//Sets the type of the task as Send
task: {
type: 'Send'
}
},
},
}];
// initialize Diagram component
ReactDOM.render( <DiagramComponent id="diagram"
width = {
'100%'
}
height = {
'600px'
}
// Add node
nodes = {
node
}
// render initialized diagram
><Inject services = {[BpmnDiagrams]}/>
</DiagramComponent>, document.getElementById("diagram") );
The various types of BPMN tasks are tabulated as follows.
Shape | Image |
---|---|
Service |
![]() |
Send |
![]() |
Receive |
![]() |
Instantiating Receive |
![]() |
Manual |
![]() |
Business Rule |
![]() |
User |
![]() |
Script |
![]() |
A sub-process
is a group of tasks, which is used to hide or reveal details of additional levels using the collapsed
property.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { DiagramComponent, Inject, BpmnDiagrams } from "@syncfusion/ej2-react-diagrams";
// A node is created and stored in nodes array.
let node = [{
// Position of the node
offsetX: 250,
offsetY: 250,
// Size of the node
width: 100,
height: 100,
//Sets type as Bpmn and shape as Activity
shape: {
type: 'Bpmn',
shape: 'Activity',
//Sets activity as SubProcess and collapsed of subprocess as true
activity: {
activity: 'SubProcess',
subProcess: {
collapsed: true
}
}
},
}];
// initialize diagram component
ReactDOM.render(<DiagramComponent id="diagram" width={'100%'} height={'600px'}
// Add node
nodes={node}><Inject services={[BpmnDiagrams]}/>
</DiagramComponent>, document.getElementById("diagram"));
import * as React from "react";
import * as ReactDOM from "react-dom";
import {
Diagram,
DiagramComponent,
Inject,
NodeModel,
BpmnShape,
BpmnSubProcessModel,
BpmnDiagrams,
BpmnActivityModel,
BpmnFlowModel,
BpmnGatewayModel
} from "@syncfusion/ej2-react-diagrams";
// A node is created and stored in nodes array.
let node: NodeModel[] = [{
// Position of the node
offsetX: 250,
offsetY: 250,
// Size of the node
width: 100,
height: 100,
//Sets type as Bpmn and shape as Activity
shape: {
type: 'Bpmn',
shape: 'Activity',
//Sets activity as SubProcess and collapsed of subprocess as true
activity: {
activity: 'SubProcess',
subProcess: {
collapsed: true
}
}
},
}];
// initialize diagram component
ReactDOM.render( <DiagramComponent id="diagram"
width = {
'100%'
}
height = {
'600px'
}
// Add node
nodes = {
node
}
// render initialized diagram
><Inject services = {[BpmnDiagrams]}/>
</DiagramComponent>, document.getElementById("diagram") );
The different types of subprocess are as follows:
A subprocess is defined as an event subprocess, when it is triggered by an event. An event subprocess is placed within another subprocess which is not part of the normal flow of its parent process. You can set event to a subprocess with the event
and trigger
property of the subprocess. The type
property of subprocess allows you to define the type of subprocess whether it should be event subprocess or transaction subprocess.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { DiagramComponent, Inject, BpmnDiagrams } from "@syncfusion/ej2-react-diagrams";
// A node is created and stored in nodes array.
let node = [{
// Position of the node
offsetX: 250,
offsetY: 250,
// Size of the node
width: 100,
height: 100,
//Sets type as Bpmn and shape as activity
shape: {
type: 'Bpmn',
shape: 'Activity',
//Sets activity as SubProcess
activity: {
activity: 'SubProcess',
//Sets the collapsed as true and type as Event
subProcess: {
collapsed: true,
type: 'Event',
//Sets event as Start and trigger as Message
events: [{
event: 'Start',
trigger: 'Message'
}]
}
},
},
}];
// initialize diagram component
ReactDOM.render(<DiagramComponent id="diagram" width={'100%'} height={'600px'}
// Add node
nodes={node}><Inject services={[BpmnDiagrams]}/>
</DiagramComponent>, document.getElementById("diagram"));
import * as React from "react";
import * as ReactDOM from "react-dom";
import {
Diagram,
DiagramComponent,
Inject,
NodeModel,
BpmnShape,
BpmnSubProcessModel,
BpmnDiagrams,
BpmnActivityModel,
BpmnFlowModel,
BpmnGatewayModel
} from "@syncfusion/ej2-react-diagrams";
// A node is created and stored in nodes array.
let node: NodeModel[] = [{
// Position of the node
offsetX: 250,
offsetY: 250,
// Size of the node
width: 100,
height: 100,
//Sets type as Bpmn and shape as activity
shape: {
type: 'Bpmn',
shape: 'Activity',
//Sets activity as SubProcess
activity: {
activity: 'SubProcess',
//Sets the collapsed as true and type as Event
subProcess: {
collapsed: true,
type: 'Event',
//Sets event as Start and trigger as Message
events: [{
event: 'Start',
trigger: 'Message'
}]
}
},
},
}];
// initialize diagram component
ReactDOM.render( <DiagramComponent id="diagram"
width = {
'100%'
}
height = {
'600px'
}
// Add node
nodes = {
node
}
// render initialized diagram
><Inject services = {[BpmnDiagrams]}/>
</DiagramComponent>, document.getElementById("diagram") );
transaction
is a set of activities that logically belong together, in which all contained activities must complete their parts of the transaction; otherwise the process is undone. The execution result of a transaction is one of Successful Completion, Unsuccessful Completion (Cancel), and Hazard (Exception). The events
property of subprocess allows to represent these results as an event attached to the subprocess.import * as React from "react";
import * as ReactDOM from "react-dom";
import { DiagramComponent, Inject, BpmnDiagrams } from "@syncfusion/ej2-react-diagrams";
// A node is created and stored in nodes array.
let node = [{
// Position of the node
offsetX: 250,
offsetY: 250,
// Size of the node
width: 100,
height: 100,
//Sets type as Bpmn and shape as activity
shape: {
type: 'Bpmn', shape: 'Activity', activity: {
//Sets activity as SubProcess
activity: 'SubProcess',
subProcess: {
//Sets collapsed as true and type as Transition
collapsed: true,
type: 'Transaction',
events: [{
event: 'Intermediate',
trigger: 'Cancel',
offset: {
x: 0.25,
y: 1
}
},
{
event: 'Intermediate',
trigger: 'Error',
offset: {
x: 0.25,
y: 1
}
},
]
//processes: ['start', 'end', 'nod1', 'nod']
}
},
},
}];
// initialize diagram component
ReactDOM.render(<DiagramComponent id="diagram" width={'100%'} height={'600px'}
// Add node
nodes={node}><Inject services={[BpmnDiagrams]}/>
</DiagramComponent>, document.getElementById("diagram"));
import * as React from "react";
import * as ReactDOM from "react-dom";
import {
Diagram,
DiagramComponent,
Inject,
NodeModel,
BpmnShape,
BpmnSubProcessModel,
BpmnDiagrams,
BpmnActivityModel,
BpmnFlowModel,
BpmnGatewayModel
} from "@syncfusion/ej2-react-diagrams";
// A node is created and stored in nodes array.
let node: NodeModel[] = [{
// Position of the node
offsetX: 250,
offsetY: 250,
// Size of the node
width: 100,
height: 100,
//Sets type as Bpmn and shape as activity
shape: {
type: 'Bpmn', shape: 'Activity', activity: {
//Sets activity as SubProcess
activity: 'SubProcess',
subProcess: {
//Sets collapsed as true and type as Transition
collapsed: true,
type: 'Transaction',
events: [{
event: 'Intermediate',
trigger: 'Cancel',
offset: {
x: 0.25,
y: 1
}
},
{
event: 'Intermediate',
trigger: 'Error',
offset: {
x: 0.25,
y: 1
}
},
]
//processes: ['start', 'end', 'nod1', 'nod']
} as BpmnSubProcessModel
},
},
}];
// initialize diagram component
ReactDOM.render( <DiagramComponent id="diagram"
width = {
'100%'
}
height = {
'600px'
}
// Add node
nodes = {
node
}
// render initialized diagram
><Inject services = {[BpmnDiagrams]}/>
</DiagramComponent>, document.getElementById("diagram") );
Processes is an array collection that defines the children values for BPMN subprocess.
Loop
is a task that is internally being looped. The loop property of task allows you to define the type of loop. The default value for loop
is none.
You can define the loop property in subprocess BPMN shape as shown in the following code.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { DiagramComponent, Inject, BpmnDiagrams } from "@syncfusion/ej2-react-diagrams";
// A node is created and stored in nodes array.
let node = [{
// Position of the node
offsetX: 100,
offsetY: 100,
// Size of the node
width: 100,
height: 100,
//Sets type as Bpmn and shape as Activity
shape: {
type: 'Bpmn',
shape: 'Activity',
//Sets activity as Task
activity: {
activity: 'Task',
//Sets loop of the task as Standard
task: {
loop: 'Standard'
}
},
},
}, {
// Position of the node
offsetX: 300,
offsetY: 100,
// Size of the node
width: 100,
height: 100,
//Sets type as Bpmn and shape as activity
shape: {
type: 'Bpmn',
shape: 'Activity',
//Sets Activity as SubProcess
activity: {
activity: 'SubProcess',
//Sets collapsed as true and loop as Standard
subProcess: {
collapsed: true,
loop: 'Standard'
},
},
},
}];
// initialize diagram component
ReactDOM.render(<DiagramComponent id="diagram" width={'100%'} height={'600px'}
// Add node
nodes={node}><Inject services={[BpmnDiagrams]}/>
</DiagramComponent>, document.getElementById("diagram"));
import * as React from "react";
import * as ReactDOM from "react-dom";
import {
Diagram,
DiagramComponent,
Inject,
NodeModel,
BpmnShape,
BpmnSubProcessModel,
BpmnDiagrams,
BpmnActivityModel,
BpmnFlowModel,
BpmnGatewayModel
} from "@syncfusion/ej2-react-diagrams";
// A node is created and stored in nodes array.
let node: NodeModel[] = [{
// Position of the node
offsetX: 100,
offsetY: 100,
// Size of the node
width: 100,
height: 100,
//Sets type as Bpmn and shape as Activity
shape: {
type: 'Bpmn',
shape: 'Activity',
//Sets activity as Task
activity: {
activity: 'Task',
//Sets loop of the task as Standard
task: {
loop: 'Standard'
}
},
},
}, {
// Position of the node
offsetX: 300,
offsetY: 100,
// Size of the node
width: 100,
height: 100,
//Sets type as Bpmn and shape as activity
shape: {
type: 'Bpmn',
shape: 'Activity',
//Sets Activity as SubProcess
activity: {
activity: 'SubProcess',
//Sets collapsed as true and loop as Standard
subProcess: {
collapsed: true,
loop: 'Standard'
},
},
},
}];
// initialize diagram component
ReactDOM.render( <DiagramComponent id="diagram"
width = {
'100%'
}
height = {
'600px'
}
// Add node
nodes= { node }
// render initialized diagram
><Inject services = {[BpmnDiagrams]}/>
</DiagramComponent>, document.getElementById("diagram") );
The following table contains various types of BPMN loops.
Loops | Task | Subprocess |
---|---|---|
Standard |
![]() |
![]() |
SequenceMultiInstance |
![]() |
![]() |
ParallelMultiInstance |
![]() |
![]() |
Compensation
is triggered, when operation is partially failed and enabled it with the compensation property of the task and the subprocess.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { DiagramComponent, Inject, BpmnDiagrams } from "@syncfusion/ej2-react-diagrams";
// A node is created and stored in nodes array.
let node = [{
// Position of the node
offsetX: 100,
offsetY: 100,
// Size of the node
width: 100,
height: 100,
//Sets type as Bpmn and shape as Activity
shape: {
type: 'Bpmn',
shape: 'Activity',
//Sets activity as Task
activity: {
activity: 'Task',
//Sets compensation of the task as true
task: {
compensation: true,
}
},
}
}, {
// Position of the node
offsetX: 300,
offsetY: 100,
// Size of the node
width: 100,
height: 100,
//Sets type as Bpmn and shape as Activity
shape: {
type: 'Bpmn',
shape: 'Activity',
//Sets activity as SubProcess
activity: {
activity: 'SubProcess',
//Set the collapsed as true and compensation as true
subProcess: {
collapsed: true,
compensation: true,
},
},
},
}];
// initialize Diagram component
ReactDOM.render(<DiagramComponent id="diagram" width={'100%'} height={'600px'}
// Add node
nodes={node}><Inject services={[BpmnDiagrams]}/>
</DiagramComponent>, document.getElementById("diagram"));
import * as React from "react";
import * as ReactDOM from "react-dom";
import {
Diagram,
DiagramComponent,
Inject,
NodeModel,
BpmnShape,
BpmnSubProcessModel,
BpmnDiagrams,
BpmnActivityModel,
BpmnFlowModel,
BpmnGatewayModel
} from "@syncfusion/ej2-react-diagrams";
// A node is created and stored in nodes array.
let node: NodeModel[] = [{
// Position of the node
offsetX: 100,
offsetY: 100,
// Size of the node
width: 100,
height: 100,
//Sets type as Bpmn and shape as Activity
shape: {
type: 'Bpmn',
shape: 'Activity',
//Sets activity as Task
activity: {
activity: 'Task',
//Sets compensation of the task as true
task: {
compensation: true,
}
},
}
}, {
// Position of the node
offsetX: 300,
offsetY: 100,
// Size of the node
width: 100,
height: 100,
//Sets type as Bpmn and shape as Activity
shape: {
type: 'Bpmn',
shape: 'Activity',
//Sets activity as SubProcess
activity: {
activity: 'SubProcess',
//Set the collapsed as true and compensation as true
subProcess: {
collapsed: true,
compensation: true,
},
},
},
}];
// initialize Diagram component
ReactDOM.render( <DiagramComponent id="diagram"
width = {
'100%'
}
height = {
'600px'
}
// Add node
nodes = {
node
}
// render initialized diagram
><Inject services = {[BpmnDiagrams]}/>
</DiagramComponent>, document.getElementById("diagram") );
A call
activity is a global subprocess that is reused at various points of the business flow and set it with the call property of the task.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { DiagramComponent, Inject, BpmnDiagrams } from "@syncfusion/ej2-react-diagrams";
// A node is created and stored in nodes array.
let node = [{
// Position of the node
offsetX: 250,
offsetY: 250,
// Size of the node
width: 100,
height: 100,
//Sets type as Bpmn and shape as Activity
shape: {
type: 'Bpmn',
shape: 'Activity',
//Sets the activity as task
activity: {
activity: 'Task',
//Sets the call of the task as true
task: {
call: true
}
},
},
}];
// initialize diagram component
ReactDOM.render(<DiagramComponent id="diagram" width={'100%'} height={'600px'}
// Add node
nodes={node}><Inject services={[BpmnDiagrams]}/>
</DiagramComponent>, document.getElementById("diagram"));
import * as React from "react";
import * as ReactDOM from "react-dom";
import {
Diagram,
DiagramComponent,
Inject,
NodeModel,
BpmnShape,
BpmnSubProcessModel,
BpmnDiagrams,
BpmnActivityModel,
BpmnFlowModel,
BpmnGatewayModel
} from "@syncfusion/ej2-react-diagrams";
// A node is created and stored in nodes array.
let node: NodeModel[] = [{
// Position of the node
offsetX: 250,
offsetY: 250,
// Size of the node
width: 100,
height: 100,
//Sets type as Bpmn and shape as Activity
shape: {
type: 'Bpmn',
shape: 'Activity',
//Sets the activity as task
activity: {
activity: 'Task',
//Sets the call of the task as true
task: {
call: true
}
},
},
}];
// initialize diagram component
ReactDOM.render( <DiagramComponent id="diagram"
width = {
'100%'
}
height = {
'600px'
}
// Add node
nodes = {
node
}
// render initialized diagram
><Inject services = {[BpmnDiagrams]}/>
</DiagramComponent>, document.getElementById("diagram") );
An adhoc subprocess is a group of tasks that are executed in any order or skipped in order to fulfill the end condition and set it with the adhoc
property of subprocess.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { DiagramComponent, Inject, BpmnDiagrams } from "@syncfusion/ej2-react-diagrams";
// A node is created and stored in nodes array.
let node = [{
// Position of the node
offsetX: 250,
offsetY: 250,
// Size of the node
width: 100,
height: 100,
//Sets type as Bpmn and shape as Activity
shape: {
type: 'Bpmn',
shape: 'Activity',
//Sets activity as SubProcess
activity: {
activity: 'SubProcess',
//Sets collapsed as true and adhoc as true
subProcess: {
collapsed: true,
adhoc: true
}
},
},
}];
// initialize diagram component
ReactDOM.render(<DiagramComponent id="diagram" width={'100%'} height={'600px'}
// Add node
nodes={node}><Inject services={[BpmnDiagrams]}/>
</DiagramComponent>, document.getElementById("diagram"));
import * as React from "react";
import * as ReactDOM from "react-dom";
import {
Diagram,
DiagramComponent,
Inject,
NodeModel,
BpmnShape,
BpmnSubProcessModel,
BpmnDiagrams,
BpmnActivityModel,
BpmnFlowModel,
BpmnGatewayModel
} from "@syncfusion/ej2-react-diagrams";
// A node is created and stored in nodes array.
let node: NodeModel[] = [{
// Position of the node
offsetX: 250,
offsetY: 250,
// Size of the node
width: 100,
height: 100,
//Sets type as Bpmn and shape as Activity
shape: {
type: 'Bpmn',
shape: 'Activity',
//Sets activity as SubProcess
activity: {
activity: 'SubProcess',
//Sets collapsed as true and adhoc as true
subProcess: {
collapsed: true,
adhoc: true
}
},
},
}];
// initialize diagram component
ReactDOM.render( <DiagramComponent id="diagram"
width = {
'100%'
}
height = {
'600px'
}
// Add node
nodes = {
node
}
// render initialized diagram
><Inject services = {[BpmnDiagrams]}/>
</DiagramComponent>, document.getElementById("diagram") );
Boundary represents the type of task that is being processed. The boundary
property of subprocess allows you to define the type of boundary. By default, it is set as default.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { DiagramComponent, Inject, BpmnDiagrams } from "@syncfusion/ej2-react-diagrams";
// A node is created and stored in nodes array.
let node = [{
// Position of the node
offsetX: 250,
offsetY: 250,
// Size of the node
width: 100,
height: 100,
//Sets type as Bpmn and shape as Activity
shape: {
type: 'Bpmn',
shape: 'Activity',
//Sets activity as SubProcess
activity: {
activity: 'SubProcess',
//Sets collapsed as true and boundary as Call
subProcess: {
collapsed: true,
boundary: 'Call'
}
},
},
}];
// initialize diagram component
ReactDOM.render(<DiagramComponent id="diagram" width={'100%'} height={'600px'}
// Add node
nodes={node}><Inject services={[BpmnDiagrams]}/>
</DiagramComponent>, document.getElementById("diagram"));
import * as React from "react";
import * as ReactDOM from "react-dom";
import {
Diagram,
DiagramComponent,
Inject,
NodeModel,
BpmnShape,
BpmnSubProcessModel,
BpmnDiagrams,
BpmnActivityModel,
BpmnFlowModel,
BpmnGatewayModel
} from "@syncfusion/ej2-react-diagrams";
// A node is created and stored in nodes array.
let node: NodeModel[] = [{
// Position of the node
offsetX: 250,
offsetY: 250,
// Size of the node
width: 100,
height: 100,
//Sets type as Bpmn and shape as Activity
shape: {
type: 'Bpmn',
shape: 'Activity',
//Sets activity as SubProcess
activity: {
activity: 'SubProcess',
//Sets collapsed as true and boundary as Call
subProcess: {
collapsed: true,
boundary: 'Call'
}
},
},
}];
// initialize diagram component
ReactDOM.render( <DiagramComponent id="diagram"
width = {
'100%'
}
height = {
'600px'
}
// Add node
nodes = {
node
}
// render initialized diagram
><Inject services = {[BpmnDiagrams]}/>
</DiagramComponent>, document.getElementById("diagram") );
The following table contains various types of BPMN boundaries.
Boundary | Image |
---|---|
Call |
![]() |
Event |
![]() |
Default |
![]() |
A data object represents information flowing through the process, such as data placed into the process, data resulting from the process, data that needs to be collected, or data that must be stored. To define a data object
, set the shape as DataObject and the type property defines whether data is an input or an output. You can create multiple instances of data object with the collection property of data.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { DiagramComponent, Inject, BpmnDiagrams } from "@syncfusion/ej2-react-diagrams";
// A node is created and stored in nodes array.
let node = [{
// Position of the node
offsetX: 250,
offsetY: 250,
// Size of the node
width: 100,
height: 100,
//Sets type as Bpmn and shape as DataObject
shape: {
type: 'Bpmn',
shape: 'DataObject',
//Sets collection as true and type as Input
dataObject: {
collection: true,
type: 'Input'
}
}
}];
// initialize diagram component
ReactDOM.render(<DiagramComponent id="diagram" width={'100%'} height={'600px'}
// Add node
nodes={node}><Inject services={[BpmnDiagrams]}/>
</DiagramComponent>, document.getElementById("diagram"));
import * as React from "react";
import * as ReactDOM from "react-dom";
import {
Diagram,
DiagramComponent,
Inject,
NodeModel,
BpmnShape,
BpmnSubProcessModel,
BpmnShapeModel,
BpmnDiagrams,
BpmnActivityModel,
BpmnFlowModel,
BpmnGatewayModel
} from "@syncfusion/ej2-react-diagrams";
// A node is created and stored in nodes array.
let node: NodeModel[] = [{
// Position of the node
offsetX: 250,
offsetY: 250,
// Size of the node
width: 100,
height: 100,
//Sets type as Bpmn and shape as DataObject
shape: {
type: 'Bpmn',
shape: 'DataObject',
//Sets collection as true and type as Input
dataObject: {
collection: true,
type: 'Input'
}
}
}];
// initialize diagram component
ReactDOM.render( <DiagramComponent id="diagram"
width = {
'100%'
}
height = {
'600px'
}
// Add node
nodes = {
node
}
// render initialized diagram
><Inject services = {[BpmnDiagrams]}/>
</DiagramComponent>, document.getElementById("diagram") );
The following table contains various representation of BPMN data object.
Boundary | Image |
---|---|
Collection Data Object |
![]() |
Data Input |
![]() |
Data Output |
![]() |
Datasource is used to store or access data associated with a business process. To create a datasource, set the shape as datasource. The following code example illustrates how to create a datasource.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { DiagramComponent, Inject, BpmnDiagrams } from "@syncfusion/ej2-react-diagrams";
// A node is created and stored in nodes array.
let node = [{
// Position of the node
offsetX: 250,
offsetY: 250,
// Size of the node
width: 100,
height: 100,
//Sets type as Bpmn and shape as DataSource
shape: {
type: 'Bpmn',
shape: 'DataSource',
}
}];
// initialize diagram component
ReactDOM.render(<DiagramComponent id="diagram" width={'100%'} height={'600px'}
// Add node
nodes={node}><Inject services={[BpmnDiagrams]}/>
</DiagramComponent>, document.getElementById("diagram"));
import * as React from "react";
import * as ReactDOM from "react-dom";
import {
Diagram,
DiagramComponent,
Inject,
NodeModel,
BpmnShape,
BpmnSubProcessModel,
BpmnDiagrams,
BpmnActivityModel,
BpmnFlowModel,
BpmnGatewayModel
} from "@syncfusion/ej2-react-diagrams";
// A node is created and stored in nodes array.
let node: NodeModel[] = [{
// Position of the node
offsetX: 250,
offsetY: 250,
// Size of the node
width: 100,
height: 100,
//Sets type as Bpmn and shape as DataSource
shape: {
type: 'Bpmn',
shape: 'DataSource',
}
}];
// initialize diagram component
ReactDOM.render( <DiagramComponent id="diagram"
width = {
'100%'
}
height = {
'600px'
}
// Add node
nodes = {
node
}
// render initialized diagram
><Inject services = {[BpmnDiagrams]}/>
</DiagramComponent>, document.getElementById("diagram") );
Artifact is used to show additional information about a process in order to make it easier to understand. There are two types of artifacts in BPMN.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { DiagramComponent, Inject, BpmnDiagrams } from "@syncfusion/ej2-react-diagrams";
// A node is created and stored in nodes array.
let node = [{
// Position of the node
offsetX: 100,
offsetY: 100,
// Size of the node
width: 100,
height: 100,
//Sets type as Bpmn and shape as DataObject
shape: {
type: 'Bpmn',
shape: 'DataObject',
//Sets collection as true and type as Input
dataObject: {
collection: true,
type: 'Input'
},
//Sets the id, angle, length and text for the annotation
annotations: [{
id: 'left',
angle: 45,
length: 150,
text: 'Left',
}]
}
}];
// initialize diagram component
ReactDOM.render(<DiagramComponent id="diagram" width={'100%'} height={'600px'}
// Add node
nodes={node}><Inject services={[BpmnDiagrams]}/>
</DiagramComponent>, document.getElementById("diagram"));
import * as React from "react";
import * as ReactDOM from "react-dom";
import {
Diagram,
DiagramComponent,
Inject,
NodeModel,
BpmnShape,
BpmnSubProcessModel,
BpmnShapeModel,
BpmnDiagrams,
BpmnActivityModel,
BpmnFlowModel,
BpmnGatewayModel
} from "@syncfusion/ej2-react-diagrams";
// A node is created and stored in nodes array.
let node: NodeModel[] = [{
// Position of the node
offsetX: 100,
offsetY: 100,
// Size of the node
width: 100,
height: 100,
//Sets type as Bpmn and shape as DataObject
shape: {
type: 'Bpmn',
shape: 'DataObject',
//Sets collection as true and type as Input
dataObject: {
collection: true,
type: 'Input'
},
//Sets the id, angle, length and text for the annotation
annotations: [{
id: 'left',
angle: 45,
length: 150,
text: 'Left',
}]
}
}];
// initialize diagram component
ReactDOM.render( <DiagramComponent id="diagram"
width = {
'100%'
}
height = {
'600px'
}
// Add node
nodes = {
node
}
// render initialized diagram
><Inject services = {[BpmnDiagrams]}/>
</DiagramComponent>, document.getElementById("diagram") );
A group is used to frame a part of the diagram, shows that elements included in it are logically belong together and does not have any other semantics other than organizing elements. To create a group, the shape property of the node should be set as group. The following code example illustrates how to create a BPMN group.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { DiagramComponent, Inject, BpmnDiagrams } from "@syncfusion/ej2-react-diagrams";
// A node is created and stored in nodes array.
let node = [{
// Position of the node
offsetX: 250,
offsetY: 250,
// Size of the node
width: 100,
height: 100,
//Sets type as Bpmn and shape as Group
shape: {
type: 'Bpmn',
shape: 'Group',
}
}];
// initialize diagram component
ReactDOM.render(<DiagramComponent id="diagram" width={'100%'} height={'600px'}
// Add node
nodes={node}><Inject services={[BpmnDiagrams]}/>
</DiagramComponent>, document.getElementById("diagram"));
import * as React from "react";
import * as ReactDOM from "react-dom";
import {
Diagram,
DiagramComponent,
Inject,
NodeModel,
BpmnShape,
BpmnSubProcessModel,
BpmnShapeModel,
BpmnDiagrams,
BpmnActivityModel,
BpmnFlowModel,
BpmnGatewayModel
} from "@syncfusion/ej2-react-diagrams";
// A node is created and stored in nodes array.
let node: NodeModel[] = [{
// Position of the node
offsetX: 250,
offsetY: 250,
// Size of the node
width: 100,
height: 100,
//Sets type as Bpmn and shape as Group
shape: {
type: 'Bpmn',
shape: 'Group',
}
}];
// initialize diagram component
ReactDOM.render( <DiagramComponent id="diagram"
width = {
'100%'
}
height = {
'600px'
}
// Add node
nodes = {
node
}
// render initialized diagram
><Inject services = {[BpmnDiagrams]}/>
</DiagramComponent>, document.getElementById("diagram") );
BPMN Flows
are lines that connects BPMN flow objects.
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:
The association
property allows you to define the type of association. The following code example illustrates how to create an association.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { DiagramComponent, Inject, BpmnDiagrams } from "@syncfusion/ej2-react-diagrams";
// A node is created and stored in nodes array.
let connector = [{
// 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, shape as Association and association as BiDirectional
shape: {
type: 'Bpmn',
flow: 'Association',
association: 'BiDirectional'
},
}];
// initialize Diagram component
ReactDOM.render(<DiagramComponent id="diagram" width={'100%'} height={'600px'}
// Add Connectors
connectors={connector}><Inject services={[BpmnDiagrams]}/>
</DiagramComponent>, document.getElementById("diagram"));
import * as React from "react";
import * as ReactDOM from "react-dom";
import {
Diagram,
DiagramComponent,
Inject,
NodeModel,
ConnectorModel,
BpmnShape,
BpmnSubProcessModel,
BpmnShapeModel,
BpmnDiagrams,
BpmnActivityModel,
BpmnFlowModel,
BpmnGatewayModel
} from "@syncfusion/ej2-react-diagrams";
// A node is created and stored in nodes array.
let connector: ConnectorModel[] = [{
// 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, shape as Association and association as BiDirectional
shape: {
type: 'Bpmn',
flow: 'Association',
association: 'BiDirectional'
},
}];
// initialize Diagram component
ReactDOM.render( <DiagramComponent id="diagram"
width = {
'100%'
}
height = {
'600px'
}
// Add Connectors
connectors = {
connector
}
// render initialized diagram
><Inject services = {[BpmnDiagrams]}/>
</DiagramComponent>, document.getElementById("diagram") );
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.
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:
The sequence property allows you to define the type of sequence. 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";
// A node is created and stored in nodes array.
let connector = [{
// 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 Conditional
shape: {
type: 'Bpmn',
flow: 'Sequence',
sequence: 'Conditional'
},
}];
// initialize diagram component
ReactDOM.render(<DiagramComponent id="diagram" width={'100%'} height={'600px'}
// Add connectors
connectors={connector}><Inject services={[BpmnDiagrams]}/>
</DiagramComponent>, document.getElementById("diagram"));
import * as React from "react";
import * as ReactDOM from "react-dom";
import {
Diagram,
DiagramComponent,
Inject,
NodeModel,
ConnectorModel,
BpmnShape,
BpmnSubProcessModel,
BpmnShapeModel,
BpmnDiagrams,
BpmnActivityModel,
BpmnFlowModel,
BpmnGatewayModel
} from "@syncfusion/ej2-react-diagrams";
// A node is created and stored in nodes array.
let connector: ConnectorModel[] = [{
// 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 Conditional
shape: {
type: 'Bpmn',
flow: 'Sequence',
sequence: 'Conditional'
},
}];
// initialize diagram component
ReactDOM.render( <DiagramComponent id="diagram"
width = {
'100%'
}
height = {
'600px'
}
// Add connectors
connectors = {
connector
}
// render initialized diagram
><Inject services = {[BpmnDiagrams]}/>
</DiagramComponent>, document.getElementById("diagram") );
The following table contains various representation of sequence flows.
Sequence | Image |
---|---|
Default |
![]() |
Conditional |
![]() |
Normal |
![]() |
Note: The default value for the property sequence
is normal.
A message
flow shows the flow of messages between two participants and is represented by dashed line. The types of message are as follows:
The message property allows you to define the type of message. 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";
// A node is created and stored in nodes array.
let connector = [{
// Position of the node
sourcePoint: {
x: 100,
y: 200
},
targetPoint: {
x: 300,
y: 200
},
type: 'Orthogonal',
//Sets type as Bpmn, flow as Message and message as InitiatingMessage
shape: {
type: 'Bpmn',
flow: 'Message',
message: 'InitiatingMessage'
},
}];
// initialize diagram component
ReactDOM.render(<DiagramComponent id="diagram" width={'100%'} height={'600px'}
// Add connectors
connectors={connector}><Inject services={[BpmnDiagrams]}/>
</DiagramComponent>, document.getElementById("diagram"));
import * as React from "react";
import * as ReactDOM from "react-dom";
import {
Diagram,
DiagramComponent,
Inject,
NodeModel,
ConnectorModel,
BpmnShape,
BpmnSubProcessModel,
BpmnShapeModel,
BpmnDiagrams,
BpmnActivityModel,
BpmnFlowModel,
BpmnGatewayModel
} from "@syncfusion/ej2-react-diagrams";
// A node is created and stored in nodes array.
let connector: ConnectorModel[] = [{
// Position of the node
sourcePoint: {
x: 100,
y: 200
},
targetPoint: {
x: 300,
y: 200
},
type: 'Orthogonal',
//Sets type as Bpmn, flow as Message and message as InitiatingMessage
shape: {
type: 'Bpmn',
flow: 'Message',
message: 'InitiatingMessage'
},
}];
// initialize diagram component
ReactDOM.render( <DiagramComponent id="diagram"
width = {
'100%'
}
height = {
'600px'
}
// Add connectors
connectors = {
connector
}
// render initialized diagram
><Inject services = {[BpmnDiagrams]}/>
</DiagramComponent>, document.getElementById("diagram") );
The following table contains various representation of message flows.
Message | Image |
---|---|
Default |
![]() |
InitiatingMessage |
![]() |
NonInitiatingMessage |
![]() |
Note: The default value for the property message
is default.