What’s New in Blazor Diagram: 2023 Volume 2
Tags: blazor, development, web, webassembly
Published: 2023-07-14 11:37:51

---
title: What’s New in Blazor Diagram: 2023 Volume 2
published: true
date: 2023-07-14 11:05:23 UTC
tags: blazor, development, web, wasm
canonical_url: https://www.syncfusion.com/blogs/post/whats-new-blazor-diagram-2023-volume-2.aspx
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7bba508a4ph6j652ig2h.png
---
Syncfusion’s [Blazor Diagram](https://www.syncfusion.com/blazor-components/blazor-diagram "Blazor Diagram") component continues to evolve, offering a powerful toolkit for visualizing, creating, and editing interactive diagrams. Whether designing flowcharts, organizational charts, mind maps, floor plans, or BPMN charts, this feature-rich library empowers you to bring your concepts to life programmatically and interactively.

In this blog, we’ll explore the exciting new features of the Blazor Diagram component, introduced in the [2023 Volume 2](https://www.syncfusion.com/forums/183035/essential-studio-2023-volume-2-main-release-v22-1-34-is-available-for-download "Essential Studio 2023 Volume 2") release.

## Freehand drawing

The new freehand drawing feature lets users create freeform curves (splines) directly on the diagram page. With this functionality, users can effortlessly sketch anything from simple drawings to elaborate artistic creations.

To utilize this feature, users need to access the [DrawingObject](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_DrawingObject "DrawingObject property for Blazor Control") property and select the [Freehand](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ConnectorSegmentType.html#Syncfusion_Blazor_Diagram_ConnectorSegmentType_Freehand "Freehand property for Blazor Control") connector type.

The following code example illustrates how to initialize the freehand drawing tool in the Blazor Diagram component.

```csharp
@using Syncfusion.Blazor.Diagram
<input Type="button" value="Freehand" @onclick="Freehand" />
<SfDiagramComponent @ref="diagram" Nodes="@nodes" Height="600px">
    <SnapSettings Constraints="SnapConstraints.None"></SnapSettings>
</SfDiagramComponent>
@code
{
    //Reference the diagram.
    SfDiagramComponent diagram;
    //Define the diagram's nodes collection.
    public DiagramObjectCollection<Node> nodes;
    protected override void OnInitialized()
    {
        nodes = new DiagramObjectCollection<Node>();
        Node node = new Node()
        {
            ID = "group",
            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);
    }
    private void Freehand()
    {
        //Draw an object once and activate the draw once.
        diagram.InteractionController = DiagramInteractions.DrawOnce;
        //Initialize the drawing object to draw the freehand connector.
        diagram.DrawingObject = new Connector()
        {
            ID = "connector1",
            Type = ConnectorSegmentType.Freehand,            
        };
    }
}
```
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/07/Freehand-drawing-feature-in-Blazor-Diagram-component-1.gif" alt="Freehand drawing feature in Blazor Diagram component" style="width:100%">

  <figcaption>Freehand drawing feature in Blazor Diagram component</figcaption>

</figure>

**Note:** Check out the drawing tools in Blazor Diagram component [GitHub demos](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/DrawingTools "Syncfusion Blazor-Diagram GitHub demos") for more details.

## Auto-scroll support

The new auto-scroll feature automatically scrolls the diagram whenever a node or connector is moved beyond the diagram’s boundary. This way, it is always visible during dragging, resizing, and multiple-selection operations.

The auto-scroll feature is automatically triggered when any one of the following actions is done at the edges of a diagram:

- Node dragging and resizing.
- Connector dragging and end-thumb dragging.
- Rubber band selection.

You can enable or disable the auto-scroll behavior in the diagram using the [EnableAutoScroll](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ScrollSettings.html#Syncfusion_Blazor_Diagram_ScrollSettings_EnableAutoScroll "EnableAutoScroll property for Blazor Control") property. The default value for this property is **false**.

The following code example illustrates enabling the auto-scroll support for nodes in a diagram.

```csharp
@using Syncfusion.Blazor.Diagram
<SfDiagramComponent Height="400px" Width="400px" Nodes="@nodes" Connectors="@connectors">
    @* Sets the ScrollSettings for the diagram *@
    <ScrollSettings EnableAutoScroll=true @bind-ScrollLimit="@scrollLimit">
    </ScrollSettings>
</SfDiagramComponent>
@code
{
    ScrollLimitMode scrollLimit { get; set; } = ScrollLimitMode.Infinity;
    //Defines diagram's node collection.
    DiagramObjectCollection<Node> nodes;
    //Defines diagram's connector collection.
    DiagramObjectCollection<Connector> connectors = new DiagramObjectCollection<Connector>();
    protected override void OnInitialized()
    {
        nodes = new DiagramObjectCollection<Node>();
        // A node is created and stored in the nodes collection.
        Node node = new Node()
            {
                ID = "node1",
                // Position of the node.
                OffsetX = 250,
                OffsetY = 250,
                // Size of the node.
                Width = 100,
                Height = 100,
                Style = new ShapeStyle()
                {
                    Fill = "#6495ED",
                    StrokeColor = "white"
                }
            };
        // Add node.
        nodes.Add(node);
        Connector Connector = new Connector()
            {
                ID = "connector1",
                // Set the source and target point of the connector.
                SourcePoint = new DiagramPoint() { X = 100, Y = 100 },
                TargetPoint = new DiagramPoint() { X = 100, Y = 200 },
                // Type of the connector segments.
                Type = ConnectorSegmentType.Straight,
                Style = new ShapeStyle()
                {
                    StrokeColor = "#6495ED",
                    StrokeWidth = 1
                },
            };
        connectors. Add(Connector);
    }
}
```

You can set limits for the auto-scrolling region using the [ScrollLimit](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ScrollSettings.html#Syncfusion_Blazor_Diagram_ScrollSettings_ScrollLimit "ScrollLimit property for Blazor Control") property of the [ScrollSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ScrollSettings.html "ScrollSettings Class for Blazor Control") class. Please refer to the [ScrollLimit](https://blazor.syncfusion.com/documentation/diagram/scroll-settings#scroll-limit "Getting Started with Blazor Scroll limit") page for more details.

The [OnAutoScrollChange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_OnAutoScrollChange "OnAutoScrollChange property for Blazor Control") event is triggered when changes are detected to the scroll position, extent, or viewport size as a result of auto-scrolling for diagram elements. Please refer to the [OnAutoScrollChange](https://blazor.syncfusion.com/documentation/diagram/events#onautoscrollchange-event "Getting Started with Blazor OnAutoScrollChange Event") page for more details.
<figure>

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

  <figcaption>Auto-scroll support in the Blazor Diagram component</figcaption>

</figure>

**Note:** For more details, refer to the Diagram auto-scrolling [GitHub demos](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/ScrollSettings/AutoScroll "Syncfusion Blazor-Diagram GitHub demo").

## 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 Control") component for the [2023 Volume 2](https://www.syncfusion.com/forums/183035/essential-studio-2023-volume-2-main-release-v22-1-34-is-available-for-download "Essential Studio 2023 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/22.1.34?type=all "Essential Studio Release Notes") and [What’s New](https://www.syncfusion.com/products/whatsnew "Essential Studio What's New") pages for other 2023 Volume 2 release updates.

The new version of Essential Studio is available for existing customers in 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 to evaluate Essential Studio products for Free") 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

- [What’s New in Blazor: 2023 Volume 2](https://www.syncfusion.com/blogs/post/whats-new-blazor-2023-volume-2.aspx "Blog: What’s New in Blazor: 2023 Volume 2")
- [Introducing the Next-Gen Blazor PDF Viewer Component](https://www.syncfusion.com/blogs/post/next-gen-blazor-pdf-viewer.aspx "Blog: Introducing the Next-Gen Blazor PDF Viewer Component")
- [Simple Steps to Create Thumbnail Images Using the Blazor File Upload Component](https://www.syncfusion.com/blogs/post/create-thumbnail-images-blazor.aspx "Blog: Simple Steps to Create Thumbnail Images Using the Blazor File Upload Component")
- [Role-Based Authorization in Blazor File Manager: An Overview](https://www.syncfusion.com/blogs/post/role-based-authorization-blazor-file-manager.aspx "Blog: Role-Based Authorization in Blazor File Manager: An Overview")