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

Example of WorkFlow Diagram in ASP.NET MVC Diagram Control

This sample provides a visual representation of a streamlined Travel Request Approval workflow created with the Syncfusion ASP.NET MVC. The diagram incorporates BPMN nodes, connectors, and annotations to represent various diagram elements.

DEMO
SOURCE

This example showcases the process of building a workflow diagram using the diagram control. Upon clicking the 'Execute' button, the workflow will commence. It will be indicated by animated connectors, followed by the display of loading indicators as HTML templates on the nodes. Subsequently, the loading indicators will transition to checkmarks, signifying successful execution. Finally, in the last phase, the workflow execution will reach its conclusion. The “Reset” button will refresh the diagram elements. Here, zoom and pan options are enabled. The tool property of the diagram control allows you to enable or disable zoom and pan options.

Transform your ASP.NET MVC web apps today with Syncfusion ASP.NET MVC components
85+ high-performance and responsive UI components
Dedicated support
Hassle-free licensing
TRY IT FOR FREE