What’s New in Blazor Diagram – 2025 Volume 2 Updates Unpacked

We’re excited to introduce the latest enhancements in the Syncfusion^® Blazor Diagram component as part of our 2025 Volume 2 release! This update introduces a range of smart enhancements designed to improve diagram clarity, performance, and flexibility.

Let’s explore the new features and updates in the Syncfusion^® Blazor Diagram Library.

Enhanced connector routing algorithm

The Blazor Diagram 2025 Volume 2 provides flexibility to prevent connectors from overlapping, enhance clarity, and readability. This feature:

• Minimizes visual clutter by preventing orthogonal connectors from stacking.
• Improves readability in complex diagrams.
• Enhances structure by dynamically adjusting connector paths.

This feature can be enabled by adding the AvoidLineOverlapping enum value to the Constraints property of the diagram.

The following example demonstrates how to enable the AvoidLineOverlapping feature in the diagram.

@using Syncfusion.Blazor
@using Syncfusion.Blazor.Diagram
<SfDiagramComponent @ref="diagram" Height="700px" Width="100%" @bind-Nodes="@nodes" LineRoutingSettings="@LineRoutingSettings" @bind-Connectors="@connectors" Constraints="@diagramConstraints">
</SfDiagramComponent>

@code {
    SfDiagramComponent diagram;
    DiagramObjectCollection<Node> nodes = new DiagramObjectCollection<Node>();
    DiagramObjectCollection<Connector> connectors = new DiagramObjectCollection<Connector>();
    SnapConstraints snapConstraints = SnapConstraints.All;
    DiagramInteractions DiagramInteractions = DiagramInteractions.ZoomPan;
    DiagramConstraints diagramConstraints = DiagramConstraints.Default | DiagramConstraints.Routing | DiagramConstraints.AvoidLineOverlapping;
    LineRoutingSettings LineRoutingSettings = new LineRoutingSettings()
    {
        RoutingType = RoutingTypes.Classic
    };
}

Note: To avoid connector line overlapping, refer to the documentation for more details.

Automatic generation of UML sequence diagrams from model data

The UML Sequence diagram visually represents how a set of objects interact in a process over time. This feature allows you to:

• Automatically generate sequence diagrams from model data.
• Create actors, lifelines, messages, and activation boxes dynamically.
• Reduce manual effort and ensure accuracy in system modeling.

The following code snippets create a simple UML sequence diagram using model data.

@using Syncfusion.Blazor.Diagram

<SfDiagramComponent @ref="Diagram" Height="600px" Model="@DiagramModel">
</SfDiagramComponent>

@code {
    private SfDiagramComponent Diagram;
    private UmlSequenceDiagramModel DiagramModel;

    protected override void OnInitialized()
    {
        // Create participants
        List<UmlSequenceParticipant> participants = new List<UmlSequenceParticipant>()
        {
            new UmlSequenceParticipant()
            {
                ID = "User",
                Content = "User",
                IsActor = true
            },
            new UmlSequenceParticipant()
            {
                ID = "System",
                Content = "System",
                IsActor = false,
                ShowDestructionMarker = true
            }
        };
        // Create messages
        List<UmlSequenceMessage> messages = new List<UmlSequenceMessage>()
        {
            new UmlSequenceMessage()
            {
                ID = "MSG1",
                Content = "Login Request",
                FromParticipantID = "User",
                ToParticipantID = "System",
                MessageType = UmlSequenceMessageType.Synchronous
            },
            new UmlSequenceMessage()
            {
                ID = "MSG2",
                Content = "Login Response",
                FromParticipantID = "System",
                ToParticipantID = "User",
                MessageType = UmlSequenceMessageType.Reply
            },
        };

        // Initialize the Uml sequence diagram model
        DiagramModel = new UmlSequenceDiagramModel()
        {
            Participants = participants
            Messages = messages
        };
    }
} 

Note: For more details, refer to the documentation and try our online demo from this link.

Import and export UML sequence diagrams in Mermaid syntax

The Mermaid’s syntax is a markdown-inspired text-based language designed to define diagrams through simple, readable commands. This feature allows users to create UML Sequence diagrams from Mermaid syntax and export them back.

Key features

• Create UML sequence diagrams from Mermaid syntax: Easily visualize complex ideas and workflows directly from the text, eliminating the need to draw each element manually.
• Export diagrams to Mermaid syntax: You can share, edit, and reuse your diagrams across various platforms by exporting them to Mermaid format.

How do you use Mermaid syntax in the Blazor Diagram?

You can access this functionality through the following methods in the Blazor Diagram:

1. SaveDiagramAsMermaid method

The SaveDiagramAsMermaid() method converts the current diagram into Mermaid’s text format for easy sharing. Refer to the following code example.

//returns the serialized Mermaid string of the Diagram
string data = Diagram.SaveDiagramAsMermaid(); 

2. LoadDiagramFromMermaid method

The LoadDiagramFromMermaidAsync method generates a diagram from Mermaid’s text data, automatically creating the necessary nodes and connectors.

The following code example demonstrates how to load a diagram using Mermaid’s text data.

// Retrieves the serialized Mermaid string of the Diagram
string data = Diagram.SaveDiagramAsMermaid();
// Loads the Diagram from the saved Mermaid string
await Diagram.LoadDiagramFromMermaidAsync(data); 

Users can also use AI assistants to generate Mermaid syntax for these diagrams and directly import it into the Blazor Diagram component.

This functionality streamlines diagram creation and enhances collaboration using a widely recognized syntax format.

Note: For more details, refer to the documentation, and also try our online demo from this link.

Ports support for connectors

This feature allows users to define ports (connection points) on connectors. These ports can be used to create precise connections between connectors or shapes. To define connector ports, you need to create a collection of ConnectorPort and assign it to the connector’s Ports property.

The following code example demonstrates how to create a connector port.

@using Syncfusion.Blazor.Diagram

<SfDiagramComponent Height="600px" Connectors="@connectors">
</SfDiagramComponent>

@code
{
    //Define diagram's connector collection
    DiagramObjectCollection<Connector> connectors;

    protected override void OnInitialized()
    {
        // A connector is created and stored in the connectors collection.
        connectors = new DiagramObjectCollection<Connector>();

        // Create connector
        Connector connector = new Connector()
        {
            ID = "connector",
            SourcePoint = new DiagramPoint() { X = 400, Y = 200 },
            TargetPoint = new DiagramPoint() { X = 550, Y = 350 },
            Type = ConnectorSegmentType.Orthogonal,
            Ports = new DiagramObjectCollection<ConnectorPort>()
            {
                new ConnectorPort()
                {
                    ID = "port",
                    Visibility = PortVisibility.Visible,
                    Shape = PortShapes.Square,
                }
            }
        };
        connectors.Add(connector);
    }
} 

Note: For more details, refer to the documentation.

Performance improvement

The performance of the Blazor Diagram component is now significantly faster when working with nodes containing annotations and connectors. The following updates enhance the initial loading time and optimize various interactions, resulting in a more efficient user experience:

FAQs

Q1: How do I enable smart connector routing in Syncfusion^® Blazor Diagram?
To enable smart connector routing that avoids overlapping lines, set the AvoidLineOverlapping enum in the Constraints property of your diagram component. This helps improve clarity in complex diagrams.

Q2: What is the AvoidLineOverlapping feature in Blazor Diagram?
The AvoidLineOverlapping feature automatically adjusts connector paths to prevent them from stacking on top of each other. It enhances readability by reducing visual clutter in diagrams with multiple orthogonal connectors.

Q3: Can I generate UML sequence diagrams automatically in Blazor?
Yes! The 2025 Volume 2 release introduces automatic UML sequence diagram generation from model data. It dynamically creates actors, lifelines, messages, and activation boxes, saving time and improving accuracy.

Q4: What’s new in Syncfusion^® Blazor Diagram 2025 Volume 2?
This release includes:

• Smarter connector routing
• Automatic UML sequence diagram generation
• Improved performance and diagram clarity

Q5: Where can I find the full release notes for Syncfusion^® Blazor updates?
You can find the complete list of new features and improvements in the Release Notes and What’s New sections on the Syncfusion^® website.

Syncfusion Blazor components can be transformed into stunning and efficient web apps.

Try It Free

Conclusion

The 2025 Volume 2 release of Syncfusion^® Blazor Diagram delivers smarter routing, automated UML generation, and enhanced performance, empowering developers to build better diagrams, faster. Whether modeling complex systems, designing workflows, or visualizing data flows, these new features streamline your development process and elevate your user experience.

For a complete overview of all the new features in this release, check out our Release Notes and What’s New pages. Try these features, and don’t forget to share your thoughts in the comments!

If you’re an existing Syncfusion^® user, you can download the latest version of Essential Studio^® from the license and downloads page. For those new to Syncfusion^®, we offer a 30-day free trial so you can experience these exciting features firsthand.

Need help? Feel free to reach out via our support forum, support portal, or feedback portal. We’re always here to assist you!

Related Blogs

Syncfusion Essential Studio^® 2025 Volume 2 Is Here!

8 min read

What’s New in Blazor: 2025 Volume 1

12 min read

What’s New in Blazor 2025 Volume 2 – 99% Faster Performance + Revolutionary Spreadsheet Component

14 min read

2025 Volume 1: Must-Know Updates in the Syncfusion Diagram Component

12 min read