• Fluent
  • Fluent Dark
  • Bootstrap v5
  • Bootstrap v5 Dark
  • Tailwind CSS
  • Tailwind CSS Dark
  • Material
  • Bootstrap v4
  • High Contrast
Preferences
Mode Selection
Touch
Mouse
Theme Selection
Localization
*Translated by Google Translator.
Currency
Essential Studio
HOME
All Controls

Example of BPMN Editor in ASP.NET Core Diagram Control

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

DEMO
SOURCE

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.

To easily build BPMN diagrams, few shapes are predefined and added to the 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. The undo and redo features are also enabled.

Injecting Module

The diagram component’s features are segregated into individual feature-wise modules. To enable undo and redo features, inject UndoRedo module using the 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).