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.
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.
Built-in automatic layout algorithm specifically made for organizational charts to arrange the parent and child node positions automatically.
Visualize any graphical object using nodes, which can be arranged and manipulated at the same time on a diagram page. They allow the following:
A connector represents a relationship between two nodes. Some of the key features like connector types, bridging, and more are listed below.
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.
Use bridging (line jumps) to illustrate a connector’s route, making it easy to read where connectors overlap each other in a dense diagram.
Use different types of predefined arrowheads to illustrate flow direction in flowchart diagrams. You can also build your own custom arrowheads.
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.
Attach connectors to specific places on a node through different types of ports or connecting points.
Additional information can be shown by adding text or labels on nodes and connectors.
Add any number of labels and align them individually.
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.
Use automatic layouts to arrange nodes automatically based on a predefined layout algorithm. Features built-in hierarchical tree, radial tree, and symmetric layouts.
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.
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.
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.
You can export the diagram to different image files such as PNG, JPEG, BMP, and SVG.
Print diagrams from the browser. You can also customize the page size, orientation, and page margin, and fit a diagram to a single page.
You can save your diagram state in JSON format and load it back later for further editing using the serializer.
In addition to all the features listed thus far, there many more that enhance the diagramming experience.
Gridlines provide guidance when trying to align objects.
Give a page-like appearance to the drawing surface using page size, orientation, and margins.
As a pure JavaScript component, our Diagram integrates easily with any web frameworks.
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.
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.
