Diagram (preview) is a new Blazor component library in our Essential Studio® 2021 Volume 2 release. It allows users to create diagrams such as flowcharts, organizational charts, and BPMN diagrams using a code-behind or visual interface. It has better performance than the previous Diagram component in the Blazor WebAssembly applications.
Building a diagram component for the Blazor platform is challenging, and only a few plugins are available on the market. We are one of them, and we assure you that our performance is comparatively the best in the market.
In this blog, we are going to discuss how the new Blazor Diagram component differs from the previous Diagram component.
The previous Diagram component uses JavaScript code to render and interact with objects. Even though the UI gets updated immediately, it performs more JS Interop calls to communicate and sync the native and JavaScript objects with the changes. As the number of JS interop calls is high in this architecture, its performance is not at its best in Blazor WebAssembly apps.
The new Blazor Diagram component handles almost 95% of the rendering and interaction logic in the C# itself. Thus, helping us eliminate the JS Interop calls to update changes between the client-side (JS logic) and the native object and vice versa to a great extent. This results in better performance.
The following metrics were taken from the various diagram interactions.
| Diagram Action | Improvement from previous Diagram to new Diagram component |
| Initial rendering | ~+ 121 % |
| Node dragging | ~+ 19 % |
| Node resizing | ~+ 24 % |
| Node rotation | ~+ 101 % |
| Zooming | ~+ 40 % |
| Panning | ~+ 46 % |
| Scrolling | ~+ 119 % |
Still, some logic that is not available in the Blazor framework is handled with the help of JavaScript code in the new Diagram component. Because the JavaScript-level objects and logic are eliminated in the new Diagram component, the app payload or resource size is reduced, resulting in twice as fast initial loading times.
Also, we are continuously working to improve the performance in the future. However, in the Blazor server apps, you might experience a slight delay due to network latency.
You can host a Blazor control as a node in the new Blazor Diagram component. In the previous Diagram component, we have to initiate the native template rendering from the client-side. Now, the new Blazor Diagram component handles the template rendering in the C# itself.
Our previous Blazor Diagram component handles all the logical calculations and rendering on the client-side through JavaScript (JS), based on the control definition in the Razor pages. On the other hand, the new Blazor Diagram component handles all the calculation and rendering logic in the C# itself.
The Blazor WebAssembly Diagram component handles all interactions like dragging, resizing, zooming, etc. on the client-side through JavaScript. It updates the diagram object value after each interaction from the JavaScript to Blazor objects. In the new Blazor Diagram component, we have eliminated the objects preserved on the client-side (JavaScript), so all interactions will be handled by the Blazor framework itself.
In the new Diagram component, you can cancel the events such as dragging, rotation, resizing, and more. You guessed it- this is not possible in the older Diagram.
The new Diagram component is not yet ready to completely replace the previous Diagram component and it still lacks a few features. Here’s the comparison between them.
| Features | Previous Diagram | New Diagram (Preview) |
Node
| Yes | Yes |
Node
| Yes | No |
Connectors
| Yes | Yes |
Connectors
| Yes | No |
Automatic Layouts
| Yes | No |
Automatic Layouts
| Yes | Yes |
Other features
| Yes | Yes |
Other features
| Yes | No |
The features that are not available in the new diagram will be in our queue. Those features will be available in our upcoming releases.
Refer to our getting started with the new Blazor Diagram component documentation and demos.
Thanks for reading! In this blog, we have seen how the new Blazor Diagram component differs from our previous Blazor WebAssembly Diagram component. This new component is available in our Essential Studio 2021 Volume 2 release. You can also learn more about it in our release notes and What’s New pages.
Syncfusion provides more than 65 high-performance, lightweight, modular, and responsive Blazor UI controls such as DataGrid, Charts, and Scheduler to ease the work of developers.
If you have any questions, please let us know in the comments section below. You can also contact us through our support forum, Direct-Trac, or feedback portal. We are always happy to assist you!