This sample demonstrates a credit card order-processing workflow created using built-in flow shapes in the React Diagram.
This sample demonstrates how to create, edit, and manage a credit card order-processing workflow using the React 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.