Blazor Diagram Component - Syncfusion

The Blazor Diagram component is a feature-rich control for visualizing, creating, and editing interactive diagrams. It supports creating flow charts, organizational charts, BPMN diagrams, and more either through code or a visual interface.

Features and Benefits

Flowchart

The Diagram library 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.

Learn more about flowchart diagram features

Organizational Chart

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

Learn more about organizational diagram features

Mind Map

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

Learn more about mind map features

Nodes

Visualize any graphical object using Blazor Diagram Nodes, which can be arranged and manipulated on a diagram page.

• Use many predefined standard shapes.
• Create and add custom shapes easily.
• Fully customize the appearance of a node.

Connectors

The relationship between two nodes is represented using a Blazor Diagram Connector. Some of the key features are listed.

• Connector Types: There are three types of connectors available in the diagram which are straight, orthogonal, and curved connector.
• Bridging or line jumps: Bridging clearly indicates a connector’s route and makes it easier to read where connectors overlap each other in a dense diagram.
• Arrowheads: Use decorators and arrows to indicate flow direction in flow charts or state diagrams. You can also build your own custom decorator based on the type of diagram.

Interactive features

Blazor Diagram Interactive features are used to improve the runtime editing experience of a diagram. You can easily edit a diagram with mouse or keyboard interfaces. Select one or more nodes, connectors, or annotations and edit them using thumbs or handlers.

Data binding

Populate 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 diagram by setting a few properties, without having to write any code.

Automatic layouts

Blazor Automatic layouts are used to arrange nodes automatically based on a predefined layout logic. There is built-in support available for following layouts.

• Hierarchical tree layout
• Organization chart
• Mind map

Symbol palette

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

Overview panel

The Blazor Diagram Overview Panel is used 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.

Serialization

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

Exporting and printing

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

Zooming and panning

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.

Web framework integration

Blazor Diagram component is also available in ASP.NET Core, ASP.NET MVC, JavaScript, React, Angular, and Vue frameworks. Check out the different Diagram platforms from the links below,

• ASP.NET Core Diagram
• ASP.NET MVC Diagram
• JavaScript Diagram
• Angular Diagram
• React Diagram
• Vue Diagram

Related links

Learn More about Blazor Diagram

Download Free Trial

Pricing

Documentation

View Demos

Community Forums

Knowledge base

Suggest a Feature

About Syncfusion Blazor Components

The Syncfusion's Blazor components library is the only suite that you will ever need to build an application since it contains over 80 high-performance, lightweight, modular, and responsive UI components in a single package. In addition to Diagram, we provide popular Blazor Components such as Diagram, DataGrid, Scheduler, Word Processor, and more.

About Syncfusion

Founded in 2001 and headquartered in Research Triangle Park, N.C., Syncfusion has more than 35,000 customers and more than 1 million users, including large financial institutions, Fortune 500 companies, and global IT consultancies.

Today we provide 1900+ controls and frameworks for web (ASP.NET Core, ASP.NET MVC, ASP.NET WebForms, JavaScript, Angular, React or Vue), mobile (Xamarin, UWP, JavaScript, and MAUI), and desktop development (WinForms, WPF & UWP, and MAUI). We provide ready-to deploy enterprise software for dashboards, reports, data integration, and big data processing. Many customers have saved millions in licensing fees by deploying our software.

sales@syncfusion.com | www.syncfusion.com | Toll Free: 1-888-9 DOTNET