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 big differences
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 %|
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.
RenderFragment support for node
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.
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.
Feature comparison between old and new 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)|
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.