Introducing the New Native Blazor Diagram Component
Tags: blazor, csharp, dotnet, webdev
Published: 2021-07-01 10:56:10

---
title: Introducing the New Native Blazor Diagram Component
published: true
date: 2021-06-30 10:02:01 UTC
tags: blazor, csharp, dotnet, webdev
canonical_url: https://www.syncfusion.com/blogs/post/introducing-the-new-native-blazor-diagram-component.aspx
cover_image: https://www.syncfusion.com/blogs/wp-content/uploads/2021/06/Introducing-the-New-Native-Blazor-Diagram-Component-1-672x372.png
---

[Diagram (preview)](https://www.syncfusion.com/blazor-components/blazor-diagram-component "Link to Blazor Diagram component") is a new native Blazor component library in our [Essential Studio 2021 Volume 2](https://www.syncfusion.com/forums/166800/essential-studio-2021-volume-2-main-release-v19-2-0-44-is-available-for-download "Link to download 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.

In this blog, we are going to discuss how the new native Blazor Diagram component differs from the previous Diagram component.

## The big differences

### Rendering

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 native Blazor Diagram component handles all the calculation and rendering logic in the native Razor rendering approach.

### Interaction

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 native objects. In the new native Blazor Diagram component, we have eliminated the objects preserved on the client-side (JavaScript), so all interactions will be handled natively.

### Performance

As mentioned before, 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 native Blazor Diagram component handles almost 95% of the rendering and interaction logic in the native approach. 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.

Still, some logic that is not available in the Blazor framework is handled with the help of JavaScript code in the new native 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.

However, in the Blazor server apps, you might experience a slight delay due to network latency.

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. Also, we are continuously working to improve the performance in the future.

### Native template node

You can host a native Blazor control as a node in the new Blazor Diagram component. The previous Diagram component doesn’t support this feature.

### Cancellable events

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.

## Reference

Refer to our [getting started with the new Blazor native Diagram component documentation](https://blazor.syncfusion.com/documentation/diagram-component/getting-started/ "Link to Getting started with Blazor Diagram Component component documentation") and [demos](https://blazor.syncfusion.com/demos/diagramcomponent/flowchart?theme=bootstrap4 "Link to Blazor Diagram component online demos").

## Conclusion

Thanks for reading! In this blog, we have seen how the new native [Blazor Diagram](https://www.syncfusion.com/blazor-components/blazor-diagram-component "Link to Blazor Diagram component") component differs from our previous Blazor WebAssembly Diagram component. This new component is available in our [Essential Studio 2021 Volume 2](https://www.syncfusion.com/forums/166800/essential-studio-2021-volume-2-main-release-v19-2-0-44-is-available-for-download "Link to download Essential Studio 2021 Volume 2") release. You can also learn more about it in our [release notes](https://help.syncfusion.com/common/essential-studio/release-notes/ "Link to Syncfusion release notes") and [What’s New](https://www.syncfusion.com/products/whatsnew "Link to Syncfusion What's New") pages.

Syncfusion provides more than 65 high-performance, lightweight, modular, and responsive [Blazor UI controls](https://www.syncfusion.com/blazor-components "Link to Blazor UI controls") such as [DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid "Link to Blazor DataGrid"), [Charts](https://www.syncfusion.com/blazor-components/blazor-charts "Link to Blazor Charts"), and [Scheduler](https://www.syncfusion.com/blazor-components/blazor-scheduler "Link to Blazor 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](https://www.syncfusion.com/forums "Link to the Syncfusion support forum"), [Direct-Trac](https://www.syncfusion.com/account/login "Link to the Syncfusion support system Direct Trac"), or [feedback portal](https://www.syncfusion.com/feedback/blazor-components "Link to Syncfusion Feedback Portal"). We are always happy to assist you!

## Related blogs

- [Syncfusion Essential Studio 2021 Volume 2 release is here!](https://dev.to/sureshmohan/syncfusion-essential-studio-2021-volume-2-is-here-dbk-temp-slug-1234958 "Link to Syncfusion Essential Studio 2021 Volume 2 release is here! blog")
- [3 Different Hosting Models in Blazor](https://dev.to/syncfusion/3-different-hosting-models-in-blazor-5ckn "Link to 3 Different Hosting Models in Blazor blog")
- [Exploring Syncfusion Blazor Components on Cross-Platform Desktop Apps Using Electron](https://dev.to/syncfusion/exploring-syncfusion-blazor-components-on-cross-platform-desktop-apps-using-electron-1g9k "Link to Exploring Syncfusion Blazor Components on Cross-Platform Desktop Apps Using Electron blog")
- [Easy Steps to Create a Blazor Server App with Authentication](https://dev.to/syncfusion/easy-steps-to-create-a-blazor-server-app-with-authentication-18j7 "Link to Easy Steps to Create a Blazor Server App with Authentication blog")