We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback


Blazor flowchart diagram 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 short description. The Blazor Diagram library offers various features to build flowcharts with ease.

Flowchart shapes

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

Built-in flowchart shapes available in Blazor Diagram library

Connector arrows

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

Different types of connectors available in Blazor flowchart diagram

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 Blazor Diagram library illustrate flow direction in the Blazor flowchart


The Blazor Diagram library provides predefined arrowheads to illustrate flow direction in a flowchart diagram. You can also build your own custom arrowheads.


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 Blazor flowchart diagram

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 Blazor flowchart diagram

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 Blazor flowchart diagram

Select, drag, resize, rotate

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

Align nodes and connectors with the nearest gridlines or objects in Blazor flowchart


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

Undo and redo recent changes using the history manager feature in Blazor flowchart diagram

Undo and redo

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


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 Blazor flowchart diagram

Struggling to decide on the right product?

Our comprehensive competitor comparison of Blazor components will guide you to the perfect choice.

tick-mark 85+ UI components
tick-mark 960+ interactive Blazor demos
tick-mark 1.8M+ downloads
Blazor competitive image

Blazor Components – 85+ UI and DataViz Components

Scroll up icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon