Syncfusion.Blazor.Diagram

Syncfusion® Blazor Diagram

Fast and powerful diagram visualization and creation library for Blazor applications. Create flowcharts, organizational charts, mind maps, UML diagrams, and more with interactive canvas and extensive customization.

Key features

• Diagram Types: Flowcharts, organizational charts, mind maps, UML diagrams, network diagrams
• Rich Shapes: Built-in and custom shapes with templates
• Connectors: Multiple connector types (straight, orthogonal, bezier) with customizable endpoints
• Editing: Drag, resize, rotate, and delete objects seamlessly
• Layout Algorithms: Automatic arrangement (hierarchical, radial, organizational)
• Serialization: Save and load diagrams in JSON format
• Export: Export diagrams as image (PNG, SVG, PDF)
• Interactive Features: Zoom, pan, selection, undo/redo, properties panel
• Mobile Support: Touch-friendly interactions and responsive design

Add stylesheet and script references

• For Blazor Web App / Blazor Server App, add these to Components/App.razor or App.razor file.
• For Blazor WebAssembly App, add these to wwwroot/index.html file

<link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
<script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>

Quick start

1. Register the Syncfusion® Blazor service in the Program.cs file.

using Syncfusion.Blazor;

builder.Services.AddSyncfusionBlazor();

1. Add Blazor Diagram component to your Razor page.

@using Syncfusion.Blazor.Diagram

<SfDiagramComponent Height="600px" Nodes="@NodeCollection" Connectors="@ConnectorCollection">
</SfDiagramComponent>

@code {
    
    public DiagramObjectCollection<Node> NodeCollection = new DiagramObjectCollection<Node>();

    public DiagramObjectCollection<Connector> ConnectorCollection = new DiagramObjectCollection<Connector>();

    protected override void OnInitialized()
    {
        // Create nodes
        Node node1 = new Node() { Id = "node1", OffsetX = 250, OffsetY = 50, Width = 100, Height = 100, Shape = new FlowShape() { Type = FlowShapeType.Process }, Annotations = new DiagramObjectCollection<ShapeAnnotation>() { new ShapeAnnotation { Content = "Start" } } };
        Node node2 = new Node() { Id = "node2", OffsetX = 250, OffsetY = 250, Width = 100, Height = 100, Shape = new FlowShape() { Type = FlowShapeType.Decision }, Annotations = new DiagramObjectCollection<ShapeAnnotation>() { new ShapeAnnotation { Content = "Decision" } } };

        NodeCollection.Add(node1);
        NodeCollection.Add(node2);

        // Create connector
        Connector connector = new Connector() { SourceID = "node1", TargetID = "node2", Type = ConnectorSegmentType.Orthogonal };
        ConnectorCollection.Add(connector);
    }
}

Documentation

• Getting Started with Blazor Web App
• Getting Started with WebAssembly
• API Reference
• Live Demos
• Feature Overview

Support

• Submit a support ticket
• Community forums
• Feature requests

License

This is a commercial product and requires a paid license for possession or use. Review the Syncfusion® EULA.

• Purchase a license
• Start a free 30-day trial

About Syncfusion®

Syncfusion® provides 1600+ UI components and frameworks for web, mobile, and desktop development across multiple platforms:

Web: Blazor | ASP.NET Core | ASP.NET MVC | JavaScript | Angular | React | Vue

Mobile: Flutter | MAUI | UWP

Desktop: WinForms | WPF | WinUI

Learn more at www.syncfusion.com.

[email protected] | Toll Free: 1-888-9-DOTNET