---
title: "How to Create Interactive Diagrams in Blazor Apps"
published_at: "2020-02-05T12:00:16+00:00"
modified_at: "2026-01-14T12:55:39+00:00"
url: "https://www.syncfusion.com/blogs/post/create-interactive-diagrams-in-blazor"
excerpt: "In this blog, explore how to create interactive diagrams in Blazor apps with customizable shapes, connectors, and annotations using a step-by-step guide."
taxonomy_category:
- "Blazor"
- "Syncfusion"
taxonomy_post_tag:
- "Blazor"
- "Blazor Application"
- "diagram"
- "flow-charts"
---
# How to Create Interactive Diagrams in Blazor Apps
[Kameshwaran R](https://www.syncfusion.com/blogs/author/kameshwaranr)
**TL;DR:** Learn how to create interactive diagrams in Blazor apps using a powerful Diagram component that supports customizable shapes, connectors, and annotations. This guide demonstrates building a flowchart for a malfunctioning lamp scenario, enhancing your Blazor application’s functionality and user experience.
In general, creating a Blazor server app requiring instant server-side updates on each mouse twitch is very difficult. These are apps like real-time games or drawing apps. However, Syncfusion’s rich, interactive Diagram component is built to handle a high rate of interactions in Blazor applications.
The [Blazor Diagram](https://www.syncfusion.com/blazor-components/blazor-diagram)
is a feature-rich component for creating or visualizing interactive diagrams. It allows users to create [flow charts](https://en.wikipedia.org/wiki/Flowchart)
, [organizational charts](https://en.wikipedia.org/wiki/Organizational_chart)
, [mind maps](https://en.wikipedia.org/wiki/Mind_map)
, and [BPMN](https://en.wikipedia.org/wiki/Business_Process_Model_and_Notation)
diagrams using C# code or a visual interface with seamless interaction and editing capabilities.
## Features
- Easily create desired diagrams using [built-in shapes](https://blazor.syncfusion.com/documentation/diagram/shapes/?no-cache=1) ([nodes](https://blazor.syncfusion.com/demos/diagram/nodes?theme=bootstrap4) ) with customizable appearances. You can also create [custom shapes](https://blazor.syncfusion.com/documentation/diagram/shapes#path-shape-node) and add them to the symbol palette.
- Connect shapes by using straight, orthogonal, and curved arrow ([connectors](https://blazor.syncfusion.com/documentation/diagram/connectors/connectors/) ) types. [Arrow heads](https://blazor.syncfusion.com/documentation/diagram/connectors/customization/) and [line styles](https://blazor.syncfusion.com/documentation/diagram/connectors/segments/) are customizable.
- Clearly specify how connectors links with one another using [bridging](https://blazor.syncfusion.com/documentation/diagram/connectors/customization#how-to-enable-bridging) (line jumps). The line jump appearance and size are customizable.
- Define [ports](https://blazor.syncfusion.com/documentation/diagram/ports/ports/) ([connection points](https://blazor.syncfusion.com/demos/diagramcomponent/ports) ) to shapes, which helps keeping the connector glued to a specific point on the shape.
- Add text ([annotations](https://blazor.syncfusion.com/documentation/diagram/annotations/labels/) ) to shapes and connectors, and edit them as needed. The [alignment](https://blazor.syncfusion.com/demos/diagramcomponent/annotations) of text is customizable.
- Utilize various types of [automatic layouts](https://blazor.syncfusion.com/documentation/diagram/layout/automatic-layout/) for real-time business objects such as organizational charts and mind maps. These are available with [customizable layout](https://blazor.syncfusion.com/demos/diagramcomponent/hierarchical-tree) , [spacing](https://blazor.syncfusion.com/documentation/diagram/layout/hierarchical-layout#how-to-update-the-spacing-between-nodes) , [orientation](https://blazor.syncfusion.com/documentation/diagram/layout/hierarchical-layout#how-to-change-orientation) , and [assistance](https://blazor.syncfusion.com/documentation/diagram/layout/organizational-chart/#assistant) .
- [Select](https://blazor.syncfusion.com/documentation/diagram/interaction/#selection) one or more nodes or connectors and [rotate](https://blazor.syncfusion.com/documentation/diagram/interaction/#rotate) them from 0 to 360 degrees. The selected items can be [resized](https://blazor.syncfusion.com/documentation/diagram/interaction/#resize) in eight different directions with or without respect to their aspect ratio.
- [Cut](https://blazor.syncfusion.com/documentation/diagram/commands#clipboard-commands) , [copy](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_Copy) , [paste](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_Paste_Syncfusion_Blazor_Diagram_DiagramObjectCollection_Syncfusion_Blazor_Diagram_NodeBase__) , or duplicate selected objects within and across diagrams. You can also trigger these diagramming features using keyboard shortcuts.
- Use built-in APIs for undo and redo actions to correct recent changes. [Group](https://blazor.syncfusion.com/documentation/diagram/commands#grouping-commands) and [ungroup](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_Ungroup) multiple diagram elements as a single object.
- Get an overall outline of a diagram with the [overview](https://blazor.syncfusion.com/documentation/diagram/overview-component) Zooming and panning features allow navigation to any part of a drawing to examine a specific part of [complex diagrams](https://blazor.syncfusion.com/demos/diagramcomponent/overview) .
- When you move a shape, the [snap](https://blazor.syncfusion.com/documentation/diagram/grid-lines/#snapping) functionality pulls it and its edges into a position aligned with other shapes, ruler subdivisions, grid lines, guides, or guide points.
- Store and reopen any [diagram](https://blazor.syncfusion.com/demos/diagramcomponent/serialization) with JSON [serialization](https://blazor.syncfusion.com/documentation/diagram/serialization/) and deserialization.
## How to create a simple, interactive diagram
Let’s see how to create a simple flowchart diagram in a Blazor application. You can find more information about how to [create nodes and connectors with labels and their customization](https://blazor.syncfusion.com/documentation/diagram/getting-started/?no-cache=1)
.
### Create node
Create and add a node with a specific position, size, label, and shape with the following code.
```
@using Syncfusion.Blazor.Diagram
@code
{
//Defines diagram's nodes collection
public DiagramObjectCollection NodeCollection { get; set; } = new DiagramObjectCollection();
protected override void OnInitialized()
{
//Create nodes with specified information, offset, and dimensions
CreateNode("node1", 300, 80, 145, 60, NodeFlowShapes.Terminator, "Lamp doesn't work");
}
private void CreateNode(string id, double x, double y, double width, double height, NodeFlowShapes shape, string label)
{
ShapeAnnotation annotation = new ShapeAnnotation()
{
//Specify the additional information to the shape
Content = label
};
Node diagramNode = new Node()
{
//Specify the information, offset, and dimensions
ID = id,
OffsetX = x,
OffsetY = y,
Width = width,
Height = height,
Shape = new FlowShape() { Type = NodeShapes.Flow, Shape = shape },
Annotations = new DiagramObjectCollection() { annotation }
};
//Add the diagram node to observable collection
NodeCollection.Add(diagramNode);
}
}
```
The previous code will create a node shown in the following screenshot.
Creating node in the Blazor Diagram
### Create connector
Create another node and a connector to connect the two nodes using the following code example.
```
@code
{
//Defines diagram's connector collection
public DiagramObjectCollection ConnectorCollection { get; set; } = new DiagramObjectCollection();
protected override void OnInitialized()
{
//Create nodes with specified information, offset, and dimensions
CreateNode("node1", 300, 80, 145, 60, NodeFlowShapes.Terminator, "Lamp doesn't work");
CreateNode("node2", 300, 180, 150, 60, NodeFlowShapes.Decision, "Lamp plugged in?");
//Create Connectors
CreateConnector("node1", "node2", "");
}
private void CreateConnector(string sourceId, string targetId, string label)
{
Connector diagramConnector = new Connector()
{
// Specify the source and target node for the connector
SourceID = sourceId,
TargetID = targetId
};
// Specify the additional information to the connector
PathAnnotation annotation = new PathAnnotation()
{
Content = String.IsNullOrEmpty(label) ? "" : label,
Style = new TextStyle() { Fill = "white" }
};
diagramConnector.Annotations = new DiagramObjectCollection() { annotation };
ConnectorCollection.Add(diagramConnector);
}
}
```
The previous code will create a node and connector as shown in the following screenshot.
Creating connector in the Blazor Diagram
### Create a flowchart
Let us add nodes and connector to create a simple flowchart representing the process for dealing with a malfunctioning lamp with the following code example.
```
protected override void OnInitialized()
{
//Create Nodes with specified information, offset, and dimensions.
CreateNode("node1", 300, 80, 145, 60, NodeFlowShapes.Terminator, "Lamp doesn't work");
CreateNode("node2", 300, 180, 150, 60, NodeFlowShapes.Decision, "Lamp plugged in?");
CreateNode("node3", 480, 180, 145, 60, NodeFlowShapes.Terminator, "Plug in lamp");
CreateNode("node4", 300, 280, 150, 60, NodeFlowShapes.Decision, "Bulb burned out?");
CreateNode("node5", 480, 280, 145, 60, NodeFlowShapes.Terminator, "Replace bulb");
CreateNode("node6", 300, 380, 145, 60, NodeFlowShapes.Terminator, "Repair lamp");
//Create Connectors
CreateConnector("node1", "node2", "");
CreateConnector("node2", "node3", "No");
CreateConnector("node2", "node4", "Yes");
CreateConnector("node4", "node5", "Yes");
CreateConnector("node4", "node6", "No");
InitPaletteModel();
}
```
Flow Chart in Blazor application
Finally, the simple flowchart will be created like in the following.
Create diagram interactively in Blazor application
You can also create the same flow diagram by dragging the flow shapes from symbol palette.
## Conclusion
I hope you are excited to create and edit diagrams in your Blazor applications. Apart from these features, the [Diagram](https://www.syncfusion.com/blazor-components/blazor-diagram)
has much more to offer, such as the ability to export diagrams into various image formats and bind data from different data sources. These can be used to design a real-time application.
For existing customers, the new version is available for download from the [License and Downloads](https://www.syncfusion.com/account/downloads)
page. If you are not yet a customer, you can try our 30-day [free trial](https://www.syncfusion.com/downloads)
to check out these new features.
If you have any questions about our applications, please let us know in the comments below. You can also contact us through our [support forum](https://www.syncfusion.com/forums)
, [Direct-Trac](https://www.syncfusion.com/account/login)
, or [feedback portal](https://www.syncfusion.com/feedback)
. We are happy to assist you!
## Related blogs
- [How to Maintain State in the Blazor ListBox Using Fluxor?](https://www.syncfusion.com/blogs/post/maintain-state-blazor-listbox-fluxor)
- [What’s New in C# 13 for Developers?](https://www.syncfusion.com/blogs/post/whats-new-csharp-13-for-developers)
- [Easily Implement Google Authentication in the Blazor WebAssembly App](https://www.syncfusion.com/blogs/post/google-authentication-blazor-wasm-app)
- [Pro Annotations on Mobile PDFs with Blazor PDF Viewer](https://www.syncfusion.com/blogs/post/mobile-pdf-annotations-with-blazor)