ASP.NET Core Flowcharts | Diagrams Library

Overview

A flowchart is a visual representation of a process in which each step in the process is represented by a different shape and contains a short description of the process step. The Syncfusion ASP.NET Core Diagram control offers various feature sets to build flowcharts with ease.

Flowchart shapes

The Syncfusion ASP.NET Core Diagram control provides the shapes required to build a flowchart diagram as ready-made objects, making it is easy to add them in a diagram surface in a single call.

Flowchart shapes documentation

Built-in flowchart shapes available in ASP.NET Core FlowChart Diagram control

Connector arrows

Arrows (or connectors) represent the relationship or direction of flow between two flowchart shapes.

Different types of connectors available in ASP.NET Core FlowChart Diagram control

Arrow types

Straight, orthogonal, and curved connector types are provided. You can choose any of these based on the relationship between the connected shapes.

Predefined arrowheads in ASP.NET Core FlowChart Diagram control illustrate flow direction in the flowchart

Arrowheads

The Syncfusion ASP.NET Core Diagram control provides predefined arrowheads to illustrate flow direction in a flowchart diagram. You can also build your own custom arrowheads.

Annotations

You can add descriptions to the flowchart shapes and connectors using annotations, and modify descriptions by pressing F2 or double-clicking them.

Additional information can be shown on nodes and connectors using labels in ASP.NET Core FlowChart Diagram control

Connection points (ports)

Connect to specific places on a shape through different types of ports or connecting points.

Connect to specific places on a node using ports in the ASP.NET Core FlowChart Diagram control

Interactive features

Use interactive features to improve the editing experience of a flowchart diagram at runtime. You can easily edit a diagram with mouse, touchscreen, or keyboard interfaces.

Select and drag the nodes or connectors using handlers in ASP.NET Core FlowChart Diagram control

Select, drag, resize, rotate

Objects can be selected and then dragged, resized, or rotated.

Interaction documentation

Align nodes and connectors with the nearest gridlines or objects in ASP.NET Core FlowChart Diagram control

Snap

Precisely align shapes, connectors, and annotations easily while dragging just by snapping to the nearest grid lines or objects.

Snapping documentation

Undo and redo the recent changes using history manager feature in ASP.NET Core FlowChart Diagram control

Undo and redo

Don’t worry when you edit by mistake—undo and redo commands help to easily correct recent changes.

Undo and redo documentation

Serialization

Save your diagram state in JSON format and load it back later for editing using the serializer.

Save and load a diagram by serializing it to JSON format using ASP.NET Core FlowChart Diagram control

Exporting and printing

You can easily export flowchart diagrams to different image formats such as PNG, JPEG, BMP, and SVG. Flowcharts can be printed from the browser.

Export the diagram to different image formats using ASP.NET Core FlowChart Diagram control

Feature Rich and Interactive ASP.NET Core Flowchart

Overview

Flowchart shapes