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

Trusted by the world’s leading companies

Syncfusion Trusted Companies


The Blazor Diagram component is a fast and powerful library for visualizing and creating diagrams. It supports creating flowcharts, organizational charts, mind maps, and more.


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

Flowchart diagram created with built-in flowchart shapes available in Blazor Diagram component

Organizational chart

A built-in automatic layout algorithm is specifically designed for organizational charts to arrange parent and child node positions automatically.

Organizational chart visualization using data binding and automatic layout features in Blazor Diagram component

Mind map

Another built-in automatic layout algorithm is designed for mind map diagrams, allowing you to define which node should be at the center and which nodes should be placed around it in the diagram surface.

Mind map diagram created with data binding and automatic layout features available in Blazor Diagram library


Visualize any graphical object using nodes, which can be arranged and manipulated at the same time on a Blazor diagram page. With nodes, you can:

  • Use many predefined standard shapes.
  • Create and add custom shapes easily.
  • Fully customize the appearance of a node.
  • Design a node UI template and reuse it across multiple nodes.


A connector represents a relationship between two nodes. Some of its key features like connector types, bridging, and more are listed below.

Different types of connectors available in Blazor Diagram component


The Blazor Diagram component provides straight, orthogonal, polyline, and curved connector types. You can choose any of these based on the type of diagram or the relationship between the connected nodes.

Connector line jump behavior in Blazor Diagram component

Bridging or line jumps

Use bridging (line jumps) to illustrate a connector’s route, making it easy to see where connectors overlap each other in a dense diagram.

Predefined arrowheads in Blazor Diagram component illustrate flow direction in the diagram


Use different types of predefined arrowheads to illustrate flow direction in flowchart diagrams. You can also build your own custom arrowheads.

Connector appearance customization in Blazor Diagram component


Like nodes, the connector look and feel can also be customized any way you want. The Blazor Diagram component provides a rich set of properties through which you can customize connector color, thickness, dash and dot appearance, rounded corners, and even decorators.

Ports (connection points)

Attach connectors to specific places on a node through different types of ports or connecting points.

Connect to specific places on a node using ports in the Blazor Diagram component


Additional information can be shown by adding text or labels on nodes and connectors.

Additional information can be shown on nodes and connectors using labels in Blazor Diagram library


You can add and edit text at runtime and mark it read-only if it should not be edited.

Add multiple labels on nodes and connectors using Label feature in Blazor Diagram component

Multiple labels

Add any number of labels and align them individually.

Align labels inside or outside a node in Blazor Diagram component


Labels include sophisticated alignment options: place them inside or outside a node, or at the source or target end of a connector. Automatically align labels when a node or connector moves.

Interactive features

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

Select and drag the nodes or connectors using handlers in Blazor Diagram library

Select and drag

Select one or more nodes, connectors, or annotations and edit them using thumbs or handlers.

Select and resize nodes using handlers in Blazor Diagram library


You can resize a node in eight different directions and lock a node’s aspect ratios to maintain its shape. You can also resize multiple objects at the same time.

Select and rotate nodes using handlers in Blazor Diagram library


Rotate selected nodes from 0 to 360 degrees.

Undo and redo the recent changes using history manager feature in Blazor Diagram library

Undo and redo

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

Cut, copy, and paste selected objects within a diagram using the clipboard feature in Blazor Diagram library


Cut, copy, paste, or duplicate selected objects within and across Blazor diagrams.

Move objects to the top or bottom of the diagram using the z-order feature in Blazor Diagram library


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

Combine multiple nodes into a group node in Blazor Diagram library


You can combine multiple nodes into a group and then interact with them as a single object. Nested groups are also possible.

Quick commands can be shown as buttons near a selector in Blazor Diagram library

Quick commands

Frequently used commands like delete, connect, and duplicate can be shown as buttons near a selector. This makes it easy for users to quickly perform those operations instead of searching for the correct buttons in a toolbox.


Our Blazor Diagram library has predefined alignment commands that enable you to align selected objects, nodes, and connectors with respect to the selection boundary.

Arrange selected objects in equal intervals using spacing commands in Blazor Diagram library

Spacing commands

Spacing commands enable you to place selected objects on the diagram at equal intervals from each other.

Resize selected objects to have equal sizes in Blazor Diagram library

Sizing commands

Use sizing commands to equally size selected nodes with respect to the first selected object.

Align selected objects horizontally or vertically by using align commands in Blazor Diagram library

Align commands

All the nodes or connectors in the selection list can be aligned at the left, right, or center horizontally, or aligned at the top, bottom, or middle vertically with respect to the selection boundary.

Automatic layout

Use automatic layouts to arrange nodes automatically based on a predefined layout algorithm. Features built-in hierarchical tree, organizational tree, and mind map layouts.

Symbol palette

Includes a gallery of stencils, reusable symbols, and nodes that can be dragged onto the surface of a Blazor diagram.

Host reusable nodes inside the symbol palette using the symbol palette feature in Blazor Diagram library

Drawing tools

Draw all kinds of built-in nodes and connect them with connectors interactively by just clicking and dragging on the drawing area.

Draw nodes and connectors interactively using Blazor Diagram library

Zoom and pan tools

View a large diagram closely or assume a wider view by zooming in and out. Also, navigate from one region of a diagram to another by panning across the Blazor diagram.

View a large diagram closely or farther away by zooming in and out in Blazor Diagram component

Data binding

Populate Blazor diagrams with nodes and connectors created and positioned based on data from data sources. In addition, data in any format can be easily converted, mapped, and consumed in the Blazor diagram by setting a few properties, without having to write any code. The Blazor Diagram library also supports loading data from a list or IEnumerable collection.

Populate the diagram from external data sources in Blazor Diagram library


You can save your Blazor diagram state in JSON format and load it back later for further editing using the serializer.

Save and load a diagram by serializing it to JSON format using Blazor Diagram component


In addition to all the features listed thus far, there many more that enhance the diagramming experience.

Align objects using gridlines in Blazor Diagram component


Gridlines provide guidance when trying to align objects.

Define page-like appearance on the drawing surface using Blazor Diagram component

Page layout

Give a page-like appearance to the drawing surface using page size, orientation, and margins.

Blazor Diagram code example

Easily get started with Blazor Diagram using a few simple lines of C# code, as demonstrated below. Also explore our Blazor Diagram Example that shows you how to render the Diagram component.

@using Syncfusion.Blazor.Diagram
@using System.Collections.ObjectModel
@using DiagramShapes = Syncfusion.Blazor.Diagram.Shapes
@using DiagramSegments = Syncfusion.Blazor.Diagram.Segments
<SfDiagramComponent Height="600px" Nodes="@NodeCollection" Connectors="@ConnectorCollection" NodeDefaults="@NodeDefaults" ConnectorDefaults="@ConnectorDefaults" ></SfDiagramComponent>
    int connectorCount = 0;
    // Reference to diagram
    SfDiagramComponent diagram;
    // Defines diagram's nodes collection
    public DiagramObjectCollection<Node> NodeCollection { get; set; }
    // Defines diagram's connector collection
    public DiagramObjectCollection<Connector> ConnectorCollection { get; set; }

    protected override void OnInitialized()

    private void InitDiagramModel()
        NodeCollection = new DiagramObjectCollection<Node>();
        ConnectorCollection = new DiagramObjectCollection<Connector>();
        CreateNode("Start", 50, FlowShapes.Terminator, "Start");
        CreateNode("Init", 140, FlowShapes.Process, "var i = 0;'");
        CreateNode("Condition", 230, FlowShapes.Decision, "i < 10?");
        CreateNode("Print", 320, FlowShapes.PreDefinedProcess, "print(\'Hello!!\');");
        CreateNode("Increment", 410, FlowShapes.Process, "i++;");
        CreateNode("End", 500, FlowShapes.Terminator, "End");
        OrthogonalSegment segment1 = new OrthogonalSegment()
            Type = DiagramSegments.Orthogonal,
            Length = 30,
            Direction = Direction.Right
        OrthogonalSegment segment2 = new OrthogonalSegment()
            Type = DiagramSegments.Orthogonal,
            Length = 300,
            Direction = Direction.Bottom
        OrthogonalSegment segment3 = new OrthogonalSegment()
            Type = DiagramSegments.Orthogonal,
            Length = 30,
            Direction = Direction.Left
        OrthogonalSegment segment4 = new OrthogonalSegment()
            Type = DiagramSegments.Orthogonal,
            Length = 200,
            Direction = Direction.Top
        CreateConnector("Start", "Init");
        CreateConnector("Init", "Condition");
        CreateConnector("Condition", "Print");
        CreateConnector("Condition", "End", "Yes", segment1, segment2);
        CreateConnector("Print", "Increment", "No");
        CreateConnector("Increment", "Condition", null, segment3, segment4);

    private void CreateConnector(string sourceId, string targetId, string label = default(string), OrthogonalSegment segment1 = null, OrthogonalSegment segment2 = null)
        Connector diagramConnector = new Connector()
            ID = string.Format("connector{0}", ++connectorCount),
            SourceID = sourceId,
            TargetID = targetId

        diagramConnector.Type = Segments.Orthogonal;
        if (segment1 != null)
            diagramConnector.Segments = new DiagramObjectCollection<ConnectorSegment>() { segment1, segment2 };
        if (label != default(string))
            var annotation = new PathAnnotation()
                Content = label,
                Style = new TextShapeStyle() { Fill = "transparent" }
            diagramConnector.Annotations = new DiagramObjectCollection<PathAnnotation>() { annotation };


    private void NodeDefaults(IDiagramObject obj)
        Node node = obj as Node;
        node.Width = 140;
        node.Height = 50;
        node.OffsetX = 300;
        node.Style = new ShapeStyle() { Fill = "#357BD2", StrokeColor = "white" };
    private void ConnectorDefaults(IDiagramObject obj)

        Connector connector = obj as Connector;
        connector.Type = DiagramSegments.Orthogonal;
        connector.TargetDecorator = new Decorator() { Shape = DecoratorShapes.Arrow, Width = 10, Height = 10 };
    private void CreateNode(string id, double y, FlowShapes shape, string label, bool positionLabel = false)
        ShapeAnnotation annotation = new ShapeAnnotation() { Content = label,
            Style = new TextShapeStyle()
                Color = "white",
                Fill = "transparent"
        if (positionLabel)
            annotation.Margin = new Margin() { Left = 25, Right = 25 };

        Node diagramNode = new Node()
            ID = id,
            OffsetY = y,
            Shape = new FlowShape() { Type = Shapes.Flow, Shape = shape },
            Annotations = new DiagramObjectCollection<ShapeAnnotation>() { annotation }

Other supported frameworks

The Diagram component is also available for JavaScript, Angular, React, and Vue frameworks, built from its own TypeScript libraries. Check out the different Diagram platforms from the following links:

Blazor Components – 70+ UI and DataViz Components

Frequently Asked Questions

  • Visualize, create, and edit interactive diagrams.
  • Blazing fast load time, rich UI interactions, and keyboard navigation.
  • Load a wide range of nodes with optimum performance.
  • Flowchart diagram support, many built-in shapes, and flexible data binding.
  • Easily arrange diagram components in layouts such as organization chart, mind map, radial tree, and hierarchical tree.
  • One of the best Blazor Diagram libraries on the market, offering a feature-rich UI to interact with the software.
  • Simple configuration and API.
  • Supports all modern browsers.
  • Mobile-touch friendly and responsive.
  • Extensive demos and videos to help you learn quickly and get started.

We do not sell the Blazor Diagram component separately. It is only available for purchase as part of the Syncfusion Blazor suite, which contains over 70 native Blazor components, including the Diagram. A single developer license for the Syncfusion Blazor suite costs $995.00 USD, and includes one year of support and updates. On top of this, we might be able to offer additional discounts based on currently active promotions. Please contact our sales team today to see if you qualify for any additional discounts.

You can find our Blazor Diagram demo here.

No. Our 70 Blazor components, including Diagram, are not sold individually. They are only as a single package. However, we have competitively priced the product so it only costs a little bit more than what some other vendors charge for their Diagram alone. We have also found that, in our experience, our customers usually start off using one of our products and then expand to several products quickly, so we felt it was best to offer all 70 Blazor components for a flat fee of $995/developer. On top of this, we might be able to offer additional discounts based on currently active promotions. Please contact our sales team today to see if you qualify for any additional discounts.

No, this is a commercial product and requires a paid license. However, a free community license is also available for companies and individuals whose organizations have less than $1 million USD in annual gross revenue and five or fewer developers.

Read independent,
authenticated reviews
on G2

Download Now

What do our customers say about us?

double quotes

Syncfusion controls contain almost everything a developer could ask for, saving us time and money. All backed up by unmatched support. Syncfusion controls are a developer's dream come true.
Kevin Kerr

Kevin Kerr


double quotes

I would highly recommend using Essential Studio and have found that the Syncfusion support team is one of the fastest I have worked with.
Georg Kukula

Georg Kukula

G&W Software Entwicklung GmbH

Transform your applications today by downloading our free evaluation version Download Free Trial


Greatness—it’s one thing to say you have it, but it means more when others recognize it. Syncfusion is proud to hold the following industry awards.

Up arrow 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