Example of BPMN Editor in Angular Diagram Component

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

Book hotelCharge creditcardCancel hotelreservationHazardCancelledBookingsystemfailureCannotcharge card
Description

This sample visually represents the hotel booking reservation system. It is built with readymade BPMN shapes.

This sample shows how to create a hotel booking reservation system using the diagram control. The nodes property can be used to define different stages of the process. To define the flow between different stages, the connectors property is used.

This sample shows how to create a hotel booking reservation system using the diagram control. The nodes property can be used to define different stages of the process. To define the flow between different stages, the connectors property is used.

Injecting Module

The diagram component’s features are segregated into individual feature-wise modules. To enable undo and redo features, inject UndoRedo module using Diagram.Inject(UndoRedo) method. To draw BPMN shapes, inject the BpmnDiagrams module. To customize BPMN shapes using context menu, inject DiagramContextMenu module using (BpmnDiagrams, UndoRedo, DiagramContextMenu).