Example of Flow Chart in ASP.NET Core Diagram Control

This sample demonstrates how to create, edit, and manage a credit card order-processing workflow using the ASP.NET Core Diagram. The workflow is designed with nodes and connectors, where each node represents a specific stage in the order process and each connector defines the flow between stages.

The nodes property is used to define the workflow stages, and the connectors property is used to establish the relationships between these stages. The getNodeDefaults and getConnectorDefaults properties are configured to apply common appearance and behavior settings to nodes and connectors.

A symbol palette with predefined flowchart shapes and connectors is provided to help users build diagrams through drag-and-drop interactions. The symbols displayed in the palette are configured using the symbols property.

The sample includes a toolbar with common diagram-editing actions, such as New, Open, Save, Export, Print, Cut, Copy, Paste, Undo, and Redo. It also provides options for drawing shapes and connectors, panning, zooming, rotating, flipping, grouping, aligning, and distributing diagram elements.

The read-only isModified property is used to track unsaved changes in the diagram. When users attempt to click the New or Open button in the toolbar, or try to close the browser tab without saving the current changes, a confirmation dialog is displayed.