--- title: "What’s New in Blazor Diagram: 2024 Volume 2" published_at: "2024-07-01T10:11:00+00:00" modified_at: "2026-01-16T09:46:50+00:00" url: "https://www.syncfusion.com/blogs/post/whats-new-blazor-diagram-2024-vol-2" excerpt: "This blog explains the new features added in the Syncfusion Blazor Diagram component as part of the 2024 volume 2 release." taxonomy_category: - "Blazor" - "Development" - "Syncfusion" - "UI" - "Web" - "What's new" taxonomy_post_tag: - "Blazor" - "diagram" - "productivity" - "wasm" - "Web Development" - "What's New" --- # What’s New in Blazor Diagram: 2024 Volume 2 [Suganthi Karuppannan](https://www.syncfusion.com/blogs/author/suganthi-karuppannan) ![What’s New in Blazor Diagram: 2024 Volume 2](https://www.syncfusion.com/blogs/wp-content/uploads/2024/07/Whats-New-in-Blazor-Diagram-2024-Volume-2.jpg) **TL;DR:** Let’s explore the new updates in Syncfusion’s Blazor Diagram component, including rulers, symbol search, and more. These updates enhance diagram creation and editing, making it more interactive and precise. Syncfusion [Blazor Diagram](https://www.syncfusion.com/blazor-components/blazor-diagram) component has made significant strides in its development, providing an advanced toolkit for visualizing, creating, and editing interactive diagrams. Whether you’re working on flowcharts, organizational charts, mind maps, floor plans, or BPMN charts, this comprehensive library equips you with the tools to programmatically and interactively bring your ideas to life. This blog will explore the latest enhancements and features introduced in the [2024 Volume 2](https://www.syncfusion.com/forums/188642/essential-studio-2024-volume-2-main-release-v26-1-35-is-available-for-download) release for the Blazor Diagram component. Discover how these new capabilities can elevate your diagramming experience and streamline your workflow. Let’s get started! ## Ruler The new ruler feature in the Blazor Diagram component provides horizontal and vertical guides for precise measurement, ensuring accuracy when placing, sizing, and aligning shapes and objects within a diagram. ### Adding rulers to the Blazor Diagram component The [RulerSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_RulerSettings) property of the [SfDiagramComponent](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html) controls the ruler’s visibility and appearance in the diagram. The [HorizontalRuler](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.RulerSettings.html#Syncfusion_Blazor_Diagram_RulerSettings_HorizontalRuler) and [VerticalRuler](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.RulerSettings.html#Syncfusion_Blazor_Diagram_RulerSettings_VerticalRuler) properties define and customize the horizontal and vertical rulers, respectively, in the diagram canvas. The following code demonstrates how to add a ruler to the diagram. ``` @using Syncfusion.Blazor.Diagram ``` ### Customizing the Ruler The [HorizontalRuler](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.RulerSettings.html#Syncfusion_Blazor_Diagram_RulerSettings_HorizontalRuler) and [VerticalRuler](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.RulerSettings.html#Syncfusion_Blazor_Diagram_RulerSettings_VerticalRuler) properties of the [RulerSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_RulerSettings) class are used to modify the appearance of the rulers in the diagram. The following properties are used to customize the appearance of both the horizontal and vertical rulers. - [Interval](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramRuler.html#Syncfusion_Blazor_Diagram_DiagramRuler_Interval) – To specify the number of intervals present on each segment of the horizontal and vertical rulers. - [IsVisible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramRuler.html#Syncfusion_Blazor_Diagram_DiagramRuler_IsVisible) – Determines whether the horizontal and vertical rulers are displayed in the diagram. Depending on your requirements, this can be useful for toggling rulers on and off. - [TickAlignment](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramRuler.html#Syncfusion_Blazor_Diagram_DiagramRuler_TickAlignment) – Controls the placement of the tick marks (also called hash marks) on the ruler. You can typically choose to have them positioned on the left or right for the vertical ruler and on the top or bottom for the horizontal ruler. - [MarkerColor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramRuler.html#Syncfusion_Blazor_Diagram_DiagramRuler_MarkerColor) – Defines the color of the marker line, also known as the cursor guide. This line appears in the diagram and aligns with the ruler, visually indicating the cursor’s current position. The following code example illustrates how to customize the ruler in the Blazor Diagram component. ``` @using Syncfusion.Blazor.Diagram; @code{ public DiagramObjectCollection nodes = new DiagramObjectCollection(); protected override void OnInitialized() { Node node = new Node() { OffsetX = 200, OffsetY = 200, Width = 100, Height = 100, Annotations = new DiagramObjectCollection() { new ShapeAnnotation() { Content = "Node", Style = new TextStyle() { Color = "white", } } }, Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "white" } }; nodes. Add(node); } } ``` Refer to the following image. Customizing the ruler in the Blazor Diagram component **Note:** For more details, refer to the ruler in Blazor Diagram component [web demos](https://blazor.syncfusion.com/demos/diagramcomponent/rulers?theme=fluent) , [GitHub demos](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Ruler/CustomizingRuler) , and [documentation](https://blazor.syncfusion.com/documentation/diagram/rulers) . ## Symbol search option in the symbol palette The symbol palette now allows users to search for and retrieve symbols. Users can find matching symbols by entering a symbol’s ID or search keywords into a text box clicking the **Search** button, or pressing the ** Enter** key. The search results are based on matching the [ID](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.NodeBase.html#Syncfusion_Blazor_Diagram_NodeBase_ID) or [SearchTags](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.NodeBase.html#Syncfusion_Blazor_Diagram_NodeBase_SearchTags) property with the entered search string. The [ShowSearchTextBox](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SymbolPalette.SfSymbolPaletteComponent.html#Syncfusion_Blazor_Diagram_SymbolPalette_SfSymbolPaletteComponent_ShowSearchTextBox) property of the palette controls the visibility of the search text box. Refer to the following image. Symbol search option in Blazor Diagram component’s symbol palette **Note:** For more details, refer to the symbols search feature in the Blazor Diagram component’s [web demos](https://blazor.syncfusion.com/demos/diagramcomponent/symbolpalette?theme=fluent) , [GitHub demos](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/SymbolPalette/SearchOption) , and [documentation](https://blazor.syncfusion.com/documentation/diagram/symbol-palette/symbol-palette#how-to-enable-symbol-search-option-in-symbol-palette) . ## Chunk message support for diagram and symbol palette In the Blazor Diagram component, it’s essential to calculate the bounds of paths, text, images, and SVG data on the JavaScript side using **JsInterop** calls. Connection failure issues can arise when processing large data sets (exceeding 32KB for a single incoming hub message) in a single JS call. To resolve this, we have introduced the [EnableChunkMessages](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_EnableChunkMessages) property in the Diagram and symbol palette. This property allows large data to be sent in smaller chunks, thereby preventing connection failure issues. Chunk messages facilitate the measurement of paths, images, text, and SVG data without exceeding the maximum size limit for a single incoming hub message (MaximumReceiveMessageSize of 32KB). By default, the EnableChunkMessages property is set to **false.** **Note:** For more details, refer to the chunk message support in the Blazor Diagram [documentation](https://blazor.syncfusion.com/documentation/diagram/how-to#how-to-enable-the-chunk-message) . ## Connector splitting When a new node is dropped onto an existing connector, the user can split the connector between two nodes. This action creates new connections between the dropped node and the existing nodes. To enable this feature, set the [EnableConnectorSplitting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_EnableConnectorSplitting) property of the [SfDiagramComponent](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html) to **true**. The [AllowDrop](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ConnectorConstraints.html#Syncfusion_Blazor_Diagram_ConnectorConstraints_AllowDrop) constraints must also be enabled on the connector to allow node dropping. The following code example illustrates how to enable the connector splitting feature in the Blazor Diagram component. ``` @using Syncfusion.Blazor.Diagram @code { //Reference the diagram. SfDiagramComponent Diagram; // Initialize the diagram's connector collection. DiagramObjectCollection connectors = new DiagramObjectCollection(); // Initialize the diagram's node collection. DiagramObjectCollection nodes = new DiagramObjectCollection(); protected override void OnInitialized() { nodes = new DiagramObjectCollection() { new Node() { OffsetX = 100, OffsetY = 100, Height = 50, Width = 100, Style = new ShapeStyle(){ Fill = "#6495ED", StrokeColor = "#6495ED",}, Shape = new BasicShape() { Type = NodeShapes.Basic, Shape = NodeBasicShapes.Rectangle } }, new Node() { OffsetX = 300, OffsetY = 300, Height = 50, Width = 100, Style = new ShapeStyle(){ Fill = "#6495ED", StrokeColor = "#6495ED",}, Shape = new BasicShape() { Type = NodeShapes.Basic, Shape = NodeBasicShapes.Rectangle } }, new Node() { OffsetX = 300, OffsetY = 100, Height = 50, Width = 100, Style = new ShapeStyle(){ Fill = "#6495ED", StrokeColor = "#6495ED",}, Shape = new BasicShape() { Type = NodeShapes.Basic, Shape = NodeBasicShapes.Rectangle } } }; Connector Connector = new Connector() { ID = "connector1", //Source node ID of the connector. SourceID = "node1", TargetDecorator = new DecoratorSettings() { Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "#6495ED", } }, //Target node ID of the connector. TargetID = "node2", Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "#6495ED", }, // Type of the connector. Type = ConnectorSegmentType.Straight, Constraints = ConnectorConstraints.Default | ConnectorConstraints.AllowDrop, }; connectors.Add(Connector); } } ``` Refer to the following image. Connector splitting support in the Blazor Diagram component **Note:** For more details, refer to the connector splitting in the Blazor Diagram component [GitHub demos](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Interaction) and [documentation](https://blazor.syncfusion.com/documentation/diagram/connectors/customization#how-to-enable-connector-split) . ## Conclusion Thanks for reading! In this blog, we’ve seen the exciting new features added to the Syncfusion [Blazor Diagram](https://www.syncfusion.com/blazor-components/blazor-diagram) component for the [2024 Volume 2](https://www.syncfusion.com/forums/188642/essential-studio-2024-volume-2-main-release-v26-1-35-is-available-for-download) release. Use them to create and visualize interactive diagrams, and leave your feedback in the comments section below! Check out our [Release Notes](https://blazor.syncfusion.com/documentation/release-notes/26.1.35?type=all) and [What’s New](https://www.syncfusion.com/products/whatsnew) pages for other 2024 Volume 2 release updates. The new version of Essential Studio® is available for existing customers on the [License and Downloads](https://www.syncfusion.com/account/downloads) page. If you are not a Syncfusion customer, try our 30-day [free trial](https://www.syncfusion.com/downloads) to check out our available features. You can also contact us through our [support forum](https://www.syncfusion.com/forums) , [support portal](https://support.syncfusion.com/) , or [feedback portal](https://www.syncfusion.com/feedback/) . We are always happy to assist you! ## Related blogs - [Introducing the New Blazor TextArea Component](https://www.syncfusion.com/blogs/post/new-blazor-textarea-component) - [What’s New in Blazor: 2024 Volume 2](https://www.syncfusion.com/blogs/post/whats-new-blazor-2024-volume-2) - [Introducing the New Blazor 3D Charts Component](https://www.syncfusion.com/blogs/post/blazor-3d-charts-component) - [Syncfusion Essential Studio® 2024 Volume 2 Is Here!](https://www.syncfusion.com/blogs/post/syncfusion-essential-studio-2024-vol2)