Introducing the New Blazor Diagram Component | Syncfusion Blogs
Live Chat Icon For mobile
Live Chat Icon
Popular Categories.NET  (173).NET Core  (29).NET MAUI  (203)Angular  (107)ASP.NET  (51)ASP.NET Core  (82)ASP.NET MVC  (89)Azure  (40)Black Friday Deal  (1)Blazor  (211)BoldSign  (13)DocIO  (24)Essential JS 2  (106)Essential Studio  (200)File Formats  (65)Flutter  (132)JavaScript  (219)Microsoft  (118)PDF  (81)Python  (1)React  (98)Streamlit  (1)Succinctly series  (131)Syncfusion  (897)TypeScript  (33)Uno Platform  (3)UWP  (4)Vue  (45)Webinar  (50)Windows Forms  (61)WinUI  (68)WPF  (157)Xamarin  (161)XlsIO  (35)Other CategoriesBarcode  (5)BI  (29)Bold BI  (8)Bold Reports  (2)Build conference  (8)Business intelligence  (55)Button  (4)C#  (146)Chart  (127)Cloud  (15)Company  (443)Dashboard  (8)Data Science  (3)Data Validation  (8)DataGrid  (63)Development  (618)Doc  (8)DockingManager  (1)eBook  (99)Enterprise  (22)Entity Framework  (5)Essential Tools  (14)Excel  (39)Extensions  (22)File Manager  (6)Gantt  (18)Gauge  (12)Git  (5)Grid  (31)HTML  (13)Installer  (2)Knockout  (2)Language  (1)LINQPad  (1)Linux  (2)M-Commerce  (1)Metro Studio  (11)Mobile  (501)Mobile MVC  (9)OLAP server  (1)Open source  (1)Orubase  (12)Partners  (21)PDF viewer  (42)Performance  (12)PHP  (2)PivotGrid  (4)Predictive Analytics  (6)Report Server  (3)Reporting  (10)Reporting / Back Office  (11)Rich Text Editor  (12)Road Map  (12)Scheduler  (52)Security  (3)SfDataGrid  (9)Silverlight  (21)Sneak Peek  (31)Solution Services  (4)Spreadsheet  (11)SQL  (10)Stock Chart  (1)Surface  (4)Tablets  (5)Theme  (12)Tips and Tricks  (112)UI  (381)Uncategorized  (68)Unix  (2)User interface  (68)Visual State Manager  (2)Visual Studio  (31)Visual Studio Code  (17)Web  (582)What's new  (323)Windows 8  (19)Windows App  (2)Windows Phone  (15)Windows Phone 7  (9)WinRT  (26)
Introducing the New Native Blazor Diagram Component

Introducing the New Blazor Diagram Component

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

Performance

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 ActionImprovement 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.

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.

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 Blazor Diagram component handles all the calculation and rendering logic in the C# itself.

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 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.

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.

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.

FeaturesPrevious DiagramNew Diagram (Preview)
Node

  1. Flow shapes
  2. Basic shapes
  3. BPMN nodes
  4. Style and appearance customization
  5. Ports
  6. Annotation
  7. Interactions:
    • Drag
    • Resize
    • Rotation and more
YesYes
Node

  1. Text node
  2. UML shapes
  3. Z- index support
YesNo
Connectors

  1. Three types of connectors:
    • Straight line
    • Orthogonal line
    • Bezier line
  2. Annotation
  3. Interactions:
    • Drag
    • Source and target points dragging
    • Segment editing
YesYes
Connectors

  1. Z- index support
YesNo
Automatic Layouts

  1. Symmetric layout
  2. Complex hierarchical tree layout
  3. Radial tree layout
  4. Expand and collapse layout
YesNo
Automatic Layouts

  1. Organizational chart
  2. Mind map layout
  3. Hierarchical tree layout
YesYes
Other features

  1.  Data binding
  2.  Gridlines and snapping
  3.  Scroll viewer to view large diagrams
  4.  Page settings
  5.  Commands
  6.  Clipboard commands
    • Grouping commands
    •  Spacing commands
    • Sizing commands
    • Nudge commands
  7.  Symbol palette
  8.  Undo / Redo
  9. Keyboard interaction
YesYes
Other features

  1. Fit to page
  2. Boundary constraints
  3. Overview for diagram
  4. Tooltip support for nodes and connectors
  5. Ruler
  6. Line routing
  7. Virtualization
  8. Print and Exporting
  9. Context menu
YesNo

The features that are not available in the new diagram will be in our queue. Those features will be available in our upcoming releases.

Reference

Refer to our getting started with the new Blazor Diagram component documentation and demos.

Conclusion

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 DataGridCharts, 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 forumDirect-Trac, or feedback portal. We are always happy to assist you!

Related blogs

Tags:

Share this post:

Popular Now

Be the first to get updates

Subscribe RSS feed

Be the first to get updates

Subscribe RSS feed