# Workflow Diagrams The KendoReact Diagram ships with a comprehensive set of standard ANSI flowchart symbols. These shapes let you build process maps, decision trees, and software flowcharts without writing custom visual templates. The following example demonstrates a complete workflow process built with flowchart shapes. [Demo Source](https://demos.telerik.com/kendo-react-ui/diagram/workflow/source.txt) ## Creating a Workflow Diagram To create a workflow diagram, use flowchart shapes from the [`FlowchartShapeType`](https://www.telerik.com/kendo-react-ui-develop/components/diagram/api/flowchartshapetype) enumeration. Common workflow shapes include: * [`Terminator`](https://www.telerik.com/kendo-react-ui-develop/components/diagram/api/terminator) - Start and end points of the workflow. * [`Process`](https://www.telerik.com/kendo-react-ui-develop/components/diagram/api/process) - Standard processing steps or actions. * [`Decision`](https://www.telerik.com/kendo-react-ui-develop/components/diagram/api/decision) - Decision points with Yes/No or True/False branches. * [`Document`](https://www.telerik.com/kendo-react-ui-develop/components/diagram/api/document) - Document creation or data output. * [`PredefinedProcess`](https://www.telerik.com/kendo-react-ui-develop/components/diagram/api/predefinedprocess) - Subroutines or predefined operations. * [`Database`](https://www.telerik.com/kendo-react-ui-develop/components/diagram/api/database) - Database operations or data storage. * [`Delay`](https://www.telerik.com/kendo-react-ui-develop/components/diagram/api/delay) - Wait periods or time-based operations. * [`ManualOperation`](https://www.telerik.com/kendo-react-ui-develop/components/diagram/api/manualoperation) - Manual tasks requiring human intervention. Import [`FlowchartShapeType`](https://www.telerik.com/kendo-react-ui-develop/components/diagram/api/flowchartshapetype) from `@progress/kendo-react-diagram` and use it as the `type` property of a shape. ```tsx import { FlowchartShapeType, ShapeOptions } from '@progress/kendo-react-diagram'; const shapes: ShapeOptions[] = [ { id: 'start', type: FlowchartShapeType.Terminator, content: { text: 'Start' }, x: 100, y: 50 }, { id: 'process1', type: FlowchartShapeType.Process, content: { text: 'Define Requirements' }, x: 100, y: 150 }, { id: 'decision1', type: FlowchartShapeType.Decision, content: { text: 'Approved?' }, x: 100, y: 250 } ]; ``` Use [Diagram connections](https://www.telerik.com/kendo-react-ui-develop/components/diagram/connections) with labeled content to indicate decision outcomes and process flow direction between workflow steps. ```tsx import { ConnectionOptions } from '@progress/kendo-react-diagram'; const connections: ConnectionOptions[] = [ { from: 'start', to: 'process1' }, { from: 'process1', to: 'decision1' }, { from: 'decision1', to: 'approve', content: { text: 'Yes' } }, { from: 'decision1', to: 'reject', content: { text: 'No' } } ]; ``` ### Available Flowchart Shapes | Shape Type | Symbol Description | | ------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------- | | [`Terminator`](https://www.telerik.com/kendo-react-ui-develop/components/diagram/api/terminator) | Rounded rectangle marking start/end of a process. | | [`Process`](https://www.telerik.com/kendo-react-ui-develop/components/diagram/api/process) | Standard rectangle for a processing step. | | [`Decision`](https://www.telerik.com/kendo-react-ui-develop/components/diagram/api/decision) | Diamond for a yes/no branch point. | | [`Document`](https://www.telerik.com/kendo-react-ui-develop/components/diagram/api/document) | Rectangle with a wavy bottom for document output. | | [`MultipleDocuments`](https://www.telerik.com/kendo-react-ui-develop/components/diagram/api/multipledocuments) | Stacked documents shape. | | [`PredefinedProcess`](https://www.telerik.com/kendo-react-ui-develop/components/diagram/api/predefinedprocess) | Rectangle with double vertical lines for a sub-process. | | [`ManualOperation`](https://www.telerik.com/kendo-react-ui-develop/components/diagram/api/manualoperation) | Trapezoid for a manual step. | | [`ManualInputOutput`](https://www.telerik.com/kendo-react-ui-develop/components/diagram/api/manualinputoutput) | Parallelogram for manual data entry. | | [`DataInputOutput`](https://www.telerik.com/kendo-react-ui-develop/components/diagram/api/datainputoutput) | Parallelogram for automatic data I/O. | | [`Database`](https://www.telerik.com/kendo-react-ui-develop/components/diagram/api/database) | Cylinder for stored data. | | [`DirectAccessStorage`](https://www.telerik.com/kendo-react-ui-develop/components/diagram/api/directaccessstorage) | Drum shape for direct-access storage. | | [`InternalStorage`](https://www.telerik.com/kendo-react-ui-develop/components/diagram/api/internalstorage) | Rectangle with two internal lines for internal storage. | | [`Display`](https://www.telerik.com/kendo-react-ui-develop/components/diagram/api/display) | Hexagon for a display output step. | | [`Preparation`](https://www.telerik.com/kendo-react-ui-develop/components/diagram/api/preparation) | Hexagon for initialization or preparation. | | [`Sort`](https://www.telerik.com/kendo-react-ui-develop/components/diagram/api/sort) | Divided rectangle for sorting data. | | [`Merge`](https://www.telerik.com/kendo-react-ui-develop/components/diagram/api/merge) | Downward triangle indicating merging of flows. | | [`Collate`](https://www.telerik.com/kendo-react-ui-develop/components/diagram/api/collate) | Two triangles for collating data. | | [`Extract`](https://www.telerik.com/kendo-react-ui-develop/components/diagram/api/extract) | Triangle pointing downward for extracting a subset. | | [`OffPageConnector`](https://www.telerik.com/kendo-react-ui-develop/components/diagram/api/offpageconnector) | Pentagon for off-page reference. | | [`OnPageConnector`](https://www.telerik.com/kendo-react-ui-develop/components/diagram/api/onpageconnector) | Circle for on-page reference. | | [`SummingJunction`](https://www.telerik.com/kendo-react-ui-develop/components/diagram/api/summingjunction) | Circle with crossed lines for joining flows. | | [`LogicalOr`](https://www.telerik.com/kendo-react-ui-develop/components/diagram/api/logicalor) | Circle with a plus sign. | | [`Delay`](https://www.telerik.com/kendo-react-ui-develop/components/diagram/api/delay) | D-shaped symbol for a delay step. | ## Suggested Links * [Shapes](https://www.telerik.com/kendo-react-ui-develop/components/diagram/shapes) * [Connections](https://www.telerik.com/kendo-react-ui-develop/components/diagram/connections) * [Diagram Editor](https://www.telerik.com/kendo-react-ui-develop/components/diagram/diagram-editor) * [Layouts](https://www.telerik.com/kendo-react-ui-develop/components/diagram/layouts) * [`FlowchartShapeType` API](https://www.telerik.com/kendo-react-ui-develop/components/diagram/api/flowchartshapetype)