What’s New in Blazor Diagram: 2024 Volume 2
Tags: blazor, development, web, ui
Published: 2024-07-08 15:42:35

---
title: What’s New in Blazor Diagram: 2024 Volume 2
published: true
date: 2024-07-01 10:11:00 UTC
tags: blazor, development, web, ui
canonical_url: https://www.syncfusion.com/blogs/post/whats-new-blazor-diagram-2024-vol-2
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8a0n3ldohtv15oyry03l.png
---
**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 "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 "Essential Studio 2024 Volume 2") 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 "RulerSettings property of Blazor Diagram component") property of the [SfDiagramComponent](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html "SfDiagramComponent class of Blazor Diagram component") 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 "HorizontalRuler property of Blazor Diagram component") and [VerticalRuler](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.RulerSettings.html#Syncfusion_Blazor_Diagram_RulerSettings_VerticalRuler "VerticalRuler property of Blazor Diagram component") 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.

```xml
@using Syncfusion.Blazor.Diagram

<SfDiagramComponent Height="600px">
 <RulerSettings>
  <HorizontalRuler />
  <VerticalRuler />
 </RulerSettings>
</SfDiagramComponent>
```

### Customizing the Ruler

The [HorizontalRuler](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.RulerSettings.html#Syncfusion_Blazor_Diagram_RulerSettings_HorizontalRuler "HorizontalRuler property of Blazor Diagram component") and [VerticalRuler](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.RulerSettings.html#Syncfusion_Blazor_Diagram_RulerSettings_VerticalRuler "VerticalRuler property of Blazor Diagram component") properties of the [RulerSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_RulerSettings "RulerSettings property of Blazor Diagram component") 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 "Interval property of Blazor Diagram component") – 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 "IsVisible property of Blazor Diagram component") – 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 "TickAlignment property of Blazor Diagram component") – 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 "MarkerColor property of Blazor Diagram component") – 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.

```xml
@using Syncfusion.Blazor.Diagram;

<SfDiagramComponent Height="600px" Nodes="@nodes">
 <RulerSettings>
  <HorizontalRuler IsVisible="true" Interval="10" TickAlignment="TickAlignment.LeftAndTop" MarkerColor="green" />
  <VerticalRuler IsVisible="true" Interval="10" TickAlignment="TickAlignment.RightAndBottom" MarkerColor="red" />
 </RulerSettings>
</SfDiagramComponent>

@code{
    public DiagramObjectCollection<Node> nodes = new DiagramObjectCollection<Node>();
    protected override void OnInitialized()
    {
        Node node = new Node()
        {
            OffsetX = 200,
            OffsetY = 200,
            Width = 100,
            Height = 100,
            Annotations = new DiagramObjectCollection<ShapeAnnotation>()
            {
                new ShapeAnnotation()
                {
                    Content = "Node",
                    Style = new TextStyle()
                    {
                        Color = "white",
                    }
                }
            },
            Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "white" }
        };
        nodes. Add(node);
    }
}
```

Refer to the following image.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2024/07/Customizing-the-ruler-in-the-Blazor-Diagram-component.gif" alt="Customizing the ruler in the Blazor Diagram component" style="width:100%">

  <figcaption>Customizing the ruler in the Blazor Diagram component</figcaption>

</figure>

**Note:** For more details, refer to the ruler in Blazor Diagram component [web demos](https://blazor.syncfusion.com/demos/diagramcomponent/rulers?theme=fluent "Example of rulers in Blazor Diagram component"), [GitHub demos](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Ruler/CustomizingRuler "Ruler in Blazor Diagram component GitHub demos"), and [documentation](https://blazor.syncfusion.com/documentation/diagram/rulers "Ruler Settings in Blazor Diagram component documentation").

## 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 "ID property of Blazor Diagram component") or [SearchTags](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.NodeBase.html#Syncfusion_Blazor_Diagram_NodeBase_SearchTags "SearchTags property of Blazor Diagram component") 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 "ShowSearchTextBox property of Blazor Diagram component") property of the palette controls the visibility of the search text box.

Refer to the following image.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2024/07/Symbol-search-option-in-Blazor-Diagram-components-symbol-palette.gif" alt="Symbol search option in Blazor Diagram component’s symbol palette" style="width:100%">

  <figcaption>Symbol search option in Blazor Diagram component’s symbol palette</figcaption>

</figure>

**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 "Example of symbol palette in Blazor Diagram component"), [GitHub demos](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/SymbolPalette/SearchOption "Symbols search feature in the Blazor Diagram component’ GitHub demo"), and [documentation](https://blazor.syncfusion.com/documentation/diagram/symbol-palette/symbol-palette#how-to-enable-symbol-search-option-in-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 "EnableChunkMessages property of Blazor Diagram component") 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 "How to enable the chunk message in the Blazor Diagram component?").

## 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 "EnableConnectorSplitting property of Blazor Diagram component") property of the [SfDiagramComponent](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html "SfDiagramComponent class of Blazor Diagram component") to **true**. The [AllowDrop](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ConnectorConstraints.html#Syncfusion_Blazor_Diagram_ConnectorConstraints_AllowDrop "AllowDrop property of Blazor Diagram component") 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.

```csharp
@using Syncfusion.Blazor.Diagram

<SfDiagramComponent @ref="Diagram" Width="1000px" Height="500px" Nodes="@nodes" Connectors="@connectors" EnableConnectorSplitting="true" />

@code {
    //Reference the diagram.
    SfDiagramComponent Diagram;
    // Initialize the diagram's connector collection.
    DiagramObjectCollection<Connector> connectors = new DiagramObjectCollection<Connector>();
    // Initialize the diagram's node collection.
    DiagramObjectCollection<Node> nodes = new DiagramObjectCollection<Node>();
    protected override void OnInitialized()
    {
        nodes = new DiagramObjectCollection<Node>() 
        {
          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.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2024/07/Connector-splitting-support-in-the-Blazor-Diagram-component.gif" alt="Connector splitting support in the Blazor Diagram component" style="width:100%">

  <figcaption>Connector splitting support in the Blazor Diagram component</figcaption>

</figure>

**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 "Connector splitting feature in the Blazor Diagram component GitHub demo")and [documentation](https://blazor.syncfusion.com/documentation/diagram/connectors/customization#how-to-enable-connector-split "How to enable connector split feature in Blazor Diagram?"). 

## 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 "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 "Essential Studio 2024 Volume 2") 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 "Essential Studio Release Notes") and [What’s New](https://www.syncfusion.com/products/whatsnew "Essential Studio What’s New page") 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 "Essential Studio License and Downloads page") page. If you are not a Syncfusion customer, try our 30-day [free trial](https://www.syncfusion.com/downloads "Get free evaluation of the Essential Studio products") to check out our available features.

You can also contact us through our [support forum](https://www.syncfusion.com/forums "Syncfusion Support Forum"), [support portal](https://support.syncfusion.com/ "Syncfusion Support Portal"), or [feedback portal](https://www.syncfusion.com/feedback/ "Syncfusion Feedback Portal"). 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 "Blog: Introducing the New Blazor TextArea Component")
- [What’s New in Blazor: 2024 Volume 2](https://www.syncfusion.com/blogs/post/whats-new-blazor-2024-volume-2 "Blog: What’s New in Blazor: 2024 Volume 2")
- [Introducing the New Blazor 3D Charts Component](https://www.syncfusion.com/blogs/post/blazor-3d-charts-component "Blog: Introducing the New Blazor 3D Charts Component")
- [Syncfusion Essential Studio 2024 Volume 2 Is Here!](https://www.syncfusion.com/blogs/post/syncfusion-essential-studio-2024-vol2 "Blog: Syncfusion Essential Studio 2024 Volume 2 Is Here!")