Example of BPMN Editor in React Diagram Component


This sample visualizes the hotel booking reservation system with built-in BPMN shapes.

More Details...


This example shows how to create a simple flow chart using the diagram control. The nodes property can be used to define different stages of a process. To define the flow between different stages, the connectors property can be used. The getNodeDefaults and{" "} getConnectorDefaults properties define the default behavior of shapes and connectors.

To easily build flow diagrams, few shapes are predefined and added to symbol palette. You can drag-and-drop predefined shapes into the drawing area. The symbols property allows you to add predefined symbols to the palette.

In this example, undo and redo support is enabled.

Injecting Module

The diagram component’s features are segregated into individual feature-wise modules. To enable undo and redo support, inject{" "} UndoRedo module into services.