Bpmn shapes in React Diagram component
6 Dec 20245 minutes to read
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 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'
}
},
}];
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
} 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'
}
},
}];
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 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.