How can I help you?
BPMN Activity in React Diagram Component
21 Oct 202524 minutes to read
Overview
BPMN (Business Process Model and Notation) activities represent work performed within a business process. An activityappears as a rounded rectangle and serves as the fundamental unit of work in process modeling.
Activities fall into two main categories:
- Task: A single unit of work that cannot be broken down into smaller components within the process model.
- Subprocess: A compound activity that contains other activities and can be expanded to show additional detail.
To create a BPMN activity, set the shape property to activity. Specify the activity type using the activity property of the node. The default activity type is 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'
},
},
}];
// initialize Diagram component
function App() {
return (<DiagramComponent id="container" width={'100%'} height={'600px'}
// Add node
nodes={node}>
<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 {
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
function App() {
return (
<DiagramComponent
id="container"
width={'100%'}
height={'600px'}
// Add node
nodes={node}
>
<Inject services={[BpmnDiagrams]} />
</DiagramComponent>
);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);Tasks
The task property of the bpmn activitydefines specific task types such as user tasks, service tasks, or message tasks. The default task type is none. Different task types indicate the nature of work being performed and who or what performs it.
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: 150,
offsetY: 150,
// 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',
},
},
},
},
{
// Position of the node
offsetX: 350,
offsetY: 150,
// 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 Service
task: {
type: 'Service',
},
},
},
},
{
// Position of the node
offsetX: 550,
offsetY: 150,
// 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 BusinessRule
task: {
type: 'BusinessRule',
},
},
},
},
{
// Position of the node
offsetX: 750,
offsetY: 150,
// 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 Receive
task: {
type: 'Receive',
},
},
},
},
{
// Position of the node
offsetX: 150,
offsetY: 350,
// 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 InstantiatingReceive
task: {
type: 'InstantiatingReceive',
},
},
},
},
{
// Position of the node
offsetX: 350,
offsetY: 350,
// 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 Manual
task: {
type: 'Manual',
},
},
},
},
{
// Position of the node
offsetX: 550,
offsetY: 350,
// 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 Script
task: {
type: 'Script',
},
},
},
},
{
// Position of the node
offsetX: 750,
offsetY: 350,
// 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 User
task: {
type: 'User',
},
},
},
},
{
// Position of the node
offsetX: 450,
offsetY: 550,
// 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 None
task: {
type: 'None',
},
},
},
},
];
// initialize Diagram component
function App() {
return (<DiagramComponent id="container" width={'100%'} height={'600px'}
// Add node
nodes={node}>
<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,NodeModel,BpmnDiagrams,} from "@syncfusion/ej2-react-diagrams";
// A node is created and stored in nodes array.
let node:NodeModel[] = [
{
// Position of the node
offsetX: 150,
offsetY: 150,
// 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',
},
},
},
},
{
// Position of the node
offsetX: 350,
offsetY: 150,
// 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 Service
task: {
type: 'Service',
},
},
},
},
{
// Position of the node
offsetX: 550,
offsetY: 150,
// 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 BusinessRule
task: {
type: 'BusinessRule',
},
},
},
},
{
// Position of the node
offsetX: 750,
offsetY: 150,
// 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 Receive
task: {
type: 'Receive',
},
},
},
},
{
// Position of the node
offsetX: 150,
offsetY: 350,
// 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 InstantiatingReceive
task: {
type: 'InstantiatingReceive',
},
},
},
},
{
// Position of the node
offsetX: 350,
offsetY: 350,
// 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 Manual
task: {
type: 'Manual',
},
},
},
},
{
// Position of the node
offsetX: 550,
offsetY: 350,
// 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 Script
task: {
type: 'Script',
},
},
},
},
{
// Position of the node
offsetX: 750,
offsetY: 350,
// 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 User
task: {
type: 'User',
},
},
},
},
{
// Position of the node
offsetX: 450,
offsetY: 550,
// 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 None
task: {
type: 'None',
},
},
},
},
];
// initialize Diagram component
function App() {
return (
<DiagramComponent
id="container"
width={'100%'}
height={'600px'}
// Add node
nodes={node}
>
<Inject services={[BpmnDiagrams]} />
</DiagramComponent>
);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);The various types of BPMN tasks are tabulated as follows.
| Shape | Image |
|---|---|
| Service |  |
| Send |  |
| Receive |  |
| Instantiating Receive |  |
| Manual |  |
| Business Rule |  |
| User |  |
| Script |  |
Subprocesses
Subprocesses represent activities that contain other processes or activities within them. They provide a way to organize complex processes hierarchically and can be expanded or collapsed to show or hide internal details.
Collapsed Subprocess
A Collapsed Sub-Processappears as a single activity but contains additional process details that remain hidden. This approach helps maintain process diagram clarity while preserving detailed information.
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
function App() {
return (<DiagramComponent id="container" width={'100%'} height={'600px'}
// Add node
nodes={node}>
<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 {
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
function App() {
return (
<DiagramComponent
id="container"
width={'100%'}
height={'600px'}
// Add node
nodes={node}
>
<Inject services={[BpmnDiagrams]} />
</DiagramComponent>
);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);Loop
Loop characteristics indicate that an activity repeats until a specified condition is met. The loop property of bpmn activity defines the repetition behavior. The default value is none.
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,
annotations: [{ content: 'Standard', offset: { x: 0.5, y: 1.2 } }],
//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,
annotations: [{ content: 'None', offset: { x: 0.5, y: 1.2 } }],
//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 None
subProcess: {
collapsed: true,
loop: 'None',
},
},
},
},
{
// Position of the node
offsetX: 500,
offsetY: 100,
// Size of the node
width: 100,
height: 100,
annotations: [
{ content: 'ParallelMultiInstance', offset: { x: 0.5, y: 1.2 } },
],
//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 ParallelMultiInstance
subProcess: {
collapsed: true,
loop: 'ParallelMultiInstance',
},
},
},
},
{
// Position of the node
offsetX: 700,
offsetY: 100,
// Size of the node
width: 100,
height: 100,
annotations: [
{ content: 'SequenceMultiInstance', offset: { x: 0.5, y: 1.2 } },
],
//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 SequenceMultiInstance
subProcess: {
collapsed: true,
loop: 'SequenceMultiInstance',
},
},
},
},
];
// initialize diagram component
function App() {
return (<DiagramComponent id="container" width={'100%'} height={'600px'}
// Add node
nodes={node}>
<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,NodeModel,BpmnDiagrams,} 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,
annotations: [{ content: 'Standard', offset: { x: 0.5, y: 1.2 } }],
//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,
annotations: [{ content: 'None', offset: { x: 0.5, y: 1.2 } }],
//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 None
subProcess: {
collapsed: true,
loop: 'None',
},
},
},
},
{
// Position of the node
offsetX: 500,
offsetY: 100,
// Size of the node
width: 100,
height: 100,
annotations: [
{ content: 'ParallelMultiInstance', offset: { x: 0.5, y: 1.2 } },
],
//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 ParallelMultiInstance
subProcess: {
collapsed: true,
loop: 'ParallelMultiInstance',
},
},
},
},
{
// Position of the node
offsetX: 700,
offsetY: 100,
// Size of the node
width: 100,
height: 100,
annotations: [
{ content: 'SequenceMultiInstance', offset: { x: 0.5, y: 1.2 } },
],
//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 SequenceMultiInstance
subProcess: {
collapsed: true,
loop: 'SequenceMultiInstance',
},
},
},
},
];
// initialize diagram component
function App() {
return (
<DiagramComponent
id="container"
width={'100%'}
height={'600px'}
// Add node
nodes={node}
>
<Inject services={[BpmnDiagrams]} />
</DiagramComponent>
);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);The following table shows the available loop types for both tasks and subprocesses:
| Loops | Task | Subprocess |
|---|---|---|
| Standard |  |
 |
| SequenceMultiInstance |  |
 |
| ParallelMultiInstance |  |
 |
Compensation
Compensation indicates that an activity can undo or compensate for work performed by another activity. This becomes relevant when a process fails after partial completion and requires cleanup activities. Enable compensation using the compensation property of the bpmn activity. The default value is false.
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
function App() {
return (<DiagramComponent id="container" width={'100%'} height={'600px'}
// Add node
nodes={node}>
<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 {
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
function App() {
return (
<DiagramComponent
id="container"
width={'100%'}
height={'600px'}
// Add node
nodes={node}
>
<Inject services={[BpmnDiagrams]} />
</DiagramComponent>
);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);Call
A call activity references a global process or subprocess that exists outside the current process definition. This promotes reusable across multiple processes. Enable call activity behavior using the call property of the task. The default value is false.
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
function App() {
return (<DiagramComponent id="container" width={'100%'} height={'600px'}
// Add node
nodes={node}>
<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 {
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
function App() {
return (
<DiagramComponent
id="container"
width={'100%'}
height={'600px'}
// Add node
nodes={node}
>
<Inject services={[BpmnDiagrams]} />
</DiagramComponent>
);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);NOTE
The call property applies only to task-type activities.
Adhoc
An adhocsubprocess contains activities that performers can execute in any order or skip entirely, provided the overall objective is achieved. Enable ad hoc behavior using the adhoc property of the subprocess. The default value is false.
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
function App() {
return (<DiagramComponent id="container" width={'100%'} height={'600px'}
// Add node
nodes={node}>
<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 {
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
function App() {
return (
<DiagramComponent
id="container"
width={'100%'}
height={'600px'}
// Add node
nodes={node}
>
<Inject services={[BpmnDiagrams]} />
</DiagramComponent>
);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);Boundary Types
The boundary property defines the visual boundary style of a subprocess, indicating different subprocess characteristics. The default value is 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
function App() {
return (<DiagramComponent id="container" width={'100%'} height={'600px'}
// Add node
nodes={node}>
<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 {
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
function App() {
return (
<DiagramComponent
id="container"
width={'100%'}
height={'600px'}
// Add node
nodes={node}
>
<Inject services={[BpmnDiagrams]} />
</DiagramComponent>
);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);The following table shows the available boundary types:
| Boundary | Image |
|---|---|
| Call |  |
| Event |  |
| Default |  |
SubProcess Types
BPMN defines two specialized subprocess types for specific business scenarios:
* Event subprocess
* Transaction
Event Subprocess
An event subprocess executes when triggered by a specific event rather than following the normal process flow. Event subprocesses reside within other subprocesses but remain outside the main sequence flow until activated.
Configure an event subprocess using the the event and trigger property of the subprocess. The typeproperty determines whether the subprocess is an 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: false,
type: 'Event',
//Sets event as Start and trigger as Message
events: [{
event: 'Start',
trigger: 'Message',
offset: { x: 0.5, y: 0 },
}]
}
},
},
}];
// initialize diagram component
function App() {
return (<DiagramComponent id="container" width={'100%'} height={'600px'}
// Add node
nodes={node}>
<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,NodeModel,BpmnDiagrams,} 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: false,
type: 'Event',
//Sets event as Start and trigger as Message
events: [{
event: 'Start',
trigger: 'Message',
offset: { x: 0.5, y: 0 },
}]
}
},
},
}];
// initialize diagram component
function App() {
return (
<DiagramComponent
id="container"
width={'100%'}
height={'600px'}
// Add node
nodes={node}
>
<Inject services={[BpmnDiagrams]} />
</DiagramComponent>
);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);Transaction Subprocess
-
transactionis 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). Theeventsproperty allows representation of these results as events attached to the subprocess. Configure event properties as follows: - Event type: Defines the triggering event type for the subprocess.
- Event name: Identifies the event during runtime.
- Offset: Sets the event shape position relative to the parent (as a fraction/ratio).
- Trigger: Specifies the event trigger type.
- Ports and labels: Define additional interaction points and descriptive text.
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
function App() {
return (<DiagramComponent id="container" width={'100%'} height={'600px'}
// Add node
nodes={node}>
<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 {
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
function App() {
return (
<DiagramComponent
id="container"
width={'100%'}
height={'600px'}
// Add node
nodes={node}
>
<Inject services={[BpmnDiagrams]} />
</DiagramComponent>
);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);