The Blazor Diagram component is a fast and powerful library for visualizing, creating, and editing interactive diagrams. It supports the creation of flowcharts, organizational charts, mind maps, and more.
Populate diagrams with nodes and connectors created and positioned based on data from data sources. Without writing any code, easily convert, map, and consume data in any format in the diagram by setting a few properties.
The Blazor Diagram lets you pan and zoom, snap, undo and redo, stencil, resize, and rotate interactively.
Diagram has a highly responsive layout and an optimized design for desktops, touchscreens, and phones. It works well on all mobile phones that use iOS, Android, or Windows OS.
The SymbolPalette displays a collection of palettes. A palette displays a set of nodes and connectors that you can drag and drop into the diagram.
Visualize any graphical object using nodes that can be arranged and manipulated on a diagram page at the same time. Diagram allows you to add different kinds of nodes.
Cutting-edge design with several built-in themes, such as Fluent, Tailwind CSS, Bootstrap, Material, Fabric and more. Utilize the online Theme Studio tool to customize themes of diagram easily.
Enable users from different locales to use the component by formatting dates, currency, and numbering to suit preferences.
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 and configure the Diagram component in Blazor.
The Blazor Diagram component provides all the standard flowchart shapes as ready-made objects, making it easy to add them to a diagram surface in a single call.
A built-in automatic layout algorithm is specifically designed to arrange parent and child node positions automatically in organizational charts.
Another built-in automatic layout algorithm is designed for mind map diagrams, allowing users to specify which node should be at the center and which nodes should be placed around it on the diagram surface.
The Blazor diagram supports Swimlane shapes, which are visual elements in a swimlane diagram representing various components, activities, and responsibilities within a business process.
The Blazor diagram includes all standard BPMN (Business Process Model and Notation) shapes, which are essential graphical elements used to visualize business processes effectively within a BPMN diagram.
Visualize any graphical object using nodes, which can be arranged and manipulated simultaneously on a Blazor diagram page. With nodes, you can:
A connector represents a relationship between two nodes. Some of its key features, such as connector types, bridging, and more, are listed below.
The Blazor Diagram component offers straight, orthogonal, polyline, and curved connector types. Choose any of these based on the type of diagram or the relationships between the connected nodes.
Orthogonal connectors navigate the shortest and most efficient path to prevent overlapping with neigring nodes.
Use bridging (line jumps) to illustrate a connector’s route, making it easier to see where connectors overlap in a dense diagram.
Use various types of predefined arrowheads to illustrate flow direction in flowchart diagrams, and also create custom arrowheads if needed.
Like nodes, the connector’s look and feel can also be customized. The Blazor Diagram component provides a rich set of properties to customize connector color, thickness, dash and dot appearance, rounded corners, and even decorators.
Attach connectors to specific locations on a node using various shapes of ports or connection points, and customize the visibility and appearance of these ports.
Additional information can be shown by adding text or labels on nodes, connectors, and swimlanes.
Add and edit text at runtime, and mark it as read-only if it should not be edited.
Add any number of labels and align each one individually.
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.
Use interactive features to improve the editing experience of a Blazor diagram at runtime. Furthermore, you can easily edit a Blazor diagram using mouse, touchscreen, or keyboard interfaces.
Select one or more nodes and connectors, then drag the selected objects and edit them using thumbs or handlers.
Resize a node in eight different directions and lock its aspect ratio to maintain its shape. Additionally, resize multiple objects simultaneously.
Don’t worry if you edit by mistake—undo and redo commands help you easily correct recent changes.
Cut, copy, paste, or duplicate selected objects within and across Blazor diagrams.
When multiple objects overlap, the z-order determines which object is on top and which is on the bottom.
Precisely align nodes, connectors, and annotations while dragging them by snapping to the nearest gridlines or objects.
You can combine multiple nodes into a group and then interact with them as a single object. Nested groups are also possible.
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.
The Blazor Diagram control provides an automatic layout algorithm that arranges nodes based on predefined layout logic. It includes built-in support for organizational chart layouts, hierarchical tree layouts, complex hierarchical tree layouts, mind map layouts, and radial tree layouts.
Includes a gallery of stencils, reusable symbols, and nodes that can be dragged onto the surface of a Blazor diagram.
The overview panel enhances the navigation experience when exploring large diagrams by displaying a small preview of the full diagram page, which allows users to zoom and pan within it.
Rulers provides horizontal and vertical guides for precise measurement, ensuring accuracy when placing, sizing, and aligning shapes and objects from the origin of the diagram page. They also allow you to customize the visibility and appearance of the rulers.
Interactively draw all kinds of built-in nodes and connect them using connectors by simply clicking and dragging on the drawing area.
View a large diagram closely or get a broader perspective by zooming in and out. You can also navigate from one region of the diagram to another by panning across the Blazor diagram.
You can export a diagram in various image formats, such as PNG, JPEG, PDF, and SVG.
Print diagrams directly from the browser. Users can also customize the page size, orientation, and margins, and fit a diagram to a single page.
Save the state of the Blazor diagram in JSON format and load it later for further editing using the serializer.
Print diagrams from the browser. Users can also customize the page size, orientation, and margins, and fit the diagram to a single page.
In addition to all the features listed thus far, there are many more that enhance the diagramming experience.
Create a page-like appearance for the drawing surface by adjusting the page size, orientation, and margins
The Blazor Diagram control ensures that every cell is accessible via the keyboard. Major functions such as sorting, selecting, and editing can be performed using keyboard commands alone, without the need for mouse interaction. This contributes to creating highly accessible applications with this control.
Developers can have full control over the UI and behavior of the event calendar through its built-in, developer-friendly APIs, which allow for easy customization of even complex diagram functionalities.
The Diagram is available for the React, Angular, JavaScript, and Vue frameworks. Explore its platform-specific options through the following links:
The Blazor Diagram works well with all modern web browsers, including Chrome, Firefox, Edge, Safari, and Opera.
We do not sell the Blazor Diagram separately. It is only available for purchase as part of the Syncfusion team license. This contains over 1,900 components and frameworks, including the Blazor Diagram. The price of the team license starts at $395 per month for 5 developers, and includes support and updates until the subscription expires. In addition, we might offer discounts based on currently active promotions. Please contact our product specialists today to see if you qualify for any additional discounts.
You can find our Blazor Diagram demo, which demonstrates how to render and configure the Diagram.
No, our 1,900+ components and frameworks for web, mobile, and desktop, including our Blazor Diagram, are not sold individually. They are only available as part of a team license. However, we have competitively priced the product, so it only costs a little bit more than what some other vendors charge for their Diagram component 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 1,900+ components and frameworks for a subscription fee that starts at $395 per month for a team of 5 developers. Additionally, we might be able to offer discounts based on currently active promotions. Please contact our product specialists 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, 5 or fewer developers, and 10 or fewer total employees.
A good place to start would be our comprehensive getting started documentation.
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.
