# Workflow Diagram

The Kendo UI for Angular Diagram component allows you to create [workflow diagrams](https://en.wikipedia.org/wiki/Flowchart) that visually represent a sequence of steps or processes. Workflow diagrams are useful for illustrating the flow of tasks, decisions, and actions in a process, making it easier to understand complex workflows.

The following example demonstrates how to create a Workflow Diagram representing a software development process with decision points and feedback loops.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/diagrams/workflow/overview/source.txt)

## Creating a Workflow Diagram

To create a Workflow Diagram, use flowchart shapes from the [`FlowchartShapeType`](https://www.telerik.com/kendo-angular-ui-develop/components/diagrams/api/flowchartshapetype) enumeration. Common workflow shapes include:

* `Terminator`—Start and end points of the workflow.
* `Process`—Standard processing steps or actions.
* `Decision`—Decision points with Yes/No or True/False branches.
* `Document`—Document creation or data output.
* `PredefinedProcess`—Subroutines or predefined operations.
* `Database`—Database operations or data storage.
* `Delay`—Wait periods or time-based operations.
* `ManualOperation`—Manual tasks requiring human intervention.

```typescript
import { FlowchartShapeType } from '@progress/kendo-angular-diagrams';

public 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-angular-ui-develop/components/diagrams/connections) with labeled content to indicate decision outcomes and process flow direction between workflow steps.

```typescript
public connections: ConnectionOptions[] = [
    { from: 'start', to: 'process1' },
    { from: 'process1', to: 'decision1' },
    { 
        from: 'decision1', 
        to: 'approve', 
        content: { text: 'Yes' } 
    },
    { 
        from: 'decision1', 
        to: 'reject', 
        content: { text: 'No' } 
    }
];
```

## See Also

* [Diagram API Reference](https://www.telerik.com/kendo-angular-ui-develop/components/diagrams/api)
* [Diagram Shapes](https://www.telerik.com/kendo-angular-ui-develop/components/diagrams/shapes)
* [Diagram Connections](https://www.telerik.com/kendo-angular-ui-develop/components/diagrams/connections)
* [Diagram Layouts](https://www.telerik.com/kendo-angular-ui-develop/components/diagrams/layouts)
* [Diagram Tooltips](https://www.telerik.com/kendo-angular-ui-develop/components/diagrams/tooltips)
* [Diagram Editor](https://www.telerik.com/kendo-angular-ui-develop/components/diagrams/diagram-editor)
* [Diagram Events](https://www.telerik.com/kendo-angular-ui-develop/components/diagrams/events)
* [Diagram Export Options](https://www.telerik.com/kendo-angular-ui-develop/components/diagrams/pdf-export)
* [Diagram Keyboard Navigation](https://www.telerik.com/kendo-angular-ui-develop/components/diagrams/keyboard-navigation)