New to Kendo UI for Angular? Start a free 30-day trial
Workflow Diagram
The Kendo UI for Angular Diagram component allows you to create workflow diagrams 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.
Change Theme
Theme
Loading ...
Creating a Workflow Diagram
To create a Workflow Diagram, use flowchart shapes from the 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 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' }
}
];