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. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Trusted by the world’s leading companies

Syncfusion Trusted Companies

Overview

The ASP.NET Core Blazor Diagram is a feature-rich library for visualizing and creating diagrams. It supports creating flowcharts, organizational charts, mind maps, and BPMN charts either through code or a visual interface.


Flowchart

The  Blazor Diagram component provides all the standard flowchart shapes as ready-made objects to build flowcharts, 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

Built-in automatic layout algorithm specifically made for organizational charts to arrange the parent and child node positions automatically.

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


Nodes

Visualize any graphical object using nodes, which can be arranged and manipulated at the same time on a diagram page. They allow the following:

  • 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.

Connectors

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

Different types of connectors available in Blazor Diagram component

Types

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 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 read where connectors overlap each other in a dense diagram.

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

Arrowheads

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

Appearance

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


Labels

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

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

Alignment

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


Automatic layout

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


Ruler

Rulers allow you to measure the distance of nodes or connectors from the origin of the page. This is especially useful in creating scale models.

Measure the distance of nodes from the page origin by using the ruler feature in Blazor Diagram


Overview panel

The overview panel allows you to improve the navigation experience when exploring large diagrams. It displays a small preview of the full diagram page that allows users to zoom and pan within it.

Improve the navigation experience with larger diagrams by using the overview panel in Blazor Diagram component


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 diagram.

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


Exporting

You can export the diagram to different image files such as PNG, JPEG, BMP, and SVG.

Export the diagram to different image formats using Blazor Diagram component


Printing

Print diagrams from the browser. You can also customize the page size, orientation, and page margin, and fit a diagram to a single page.

Print diagrams from the browser using Blazor Diagram component


Serialization

You can save your 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


Miscellaneous

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

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.


Other supported frameworks

As a pure JavaScript component, our Diagram integrates easily with any web frameworks.


Blazor Components – 65+ UI and DataViz Components

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

Kirk-Rudy

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

Awards

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.

Syncfusion Awards
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