👁 Image
Syncfusion.Blazor.Diagram 33.2.13

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.

👁 Blazor Diagram

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();

2. 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.

| Toll Free: 1-888-9-DOTNET