Workflow Diagrams

Premium

Updated on Apr 2, 2026

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, custom connection markers, and decision branches.

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.

Import FlowchartShapeType from @progress/kendo-diagram-common and use it as the type property of a shape.

tsx

import { FlowchartShapeType } from '@progress/kendo-diagram-common';
import { 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 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	Rounded rectangle marking start/end of a process.
Process	Standard rectangle for a processing step.
Decision	Diamond for a yes/no branch point.
Document	Rectangle with a wavy bottom for document output.
MultipleDocuments	Stacked documents shape.
PredefinedProcess	Rectangle with double vertical lines for a sub-process.
ManualOperation	Trapezoid for a manual step.
ManualInputOutput	Parallelogram for manual data entry.
DataInputOutput	Parallelogram for automatic data I/O.
Database	Cylinder for stored data.
DirectAccessStorage	Drum shape for direct-access storage.
InternalStorage	Rectangle with two internal lines for internal storage.
Display	Hexagon for a display output step.
Preparation	Hexagon for initialization or preparation.
Sort	Divided rectangle for sorting data.
Merge	Downward triangle indicating merging of flows.
Collate	Two triangles for collating data.
Extract	Triangle pointing downward for extracting a subset.
OffPageConnector	Pentagon for off-page reference.
OnPageConnector	Circle for on-page reference.
SummingJunction	Circle with crossed lines for joining flows.
LogicalOr	Circle with a plus sign.
Delay	D-shaped symbol for a delay step.

Custom Connection Markers

When building workflow diagrams, you can use a custom MarkerType for connection end caps to match standard flowchart notation.

tsx

import { MarkerType } from '@progress/kendo-diagram-common';

const connectionDefaults: ConnectionDefaults = {
    endCap: {
        type: MarkerType.ArrowEnd,
        path: 'M 0 0 L 8 7 L 0 14',
        anchor: { x: 8, y: 7 },
        stroke: { color: '#4E4E4E', lineCap: 'round', lineJoin: 'round', width: 2 }
    },
    stroke: { color: '#4E4E4E', width: 2 }
};

Suggested Links

• Shapes
• Connections
• Layouts
• FlowchartShapeType API