The Blazor Diagram component is a fast and powerful library for visualizing, creating, and editing interactive diagrams. It supports creating flowcharts, organizational charts, mind maps, and more.
Automatically arrange nodes based on a predefined layout algorithm.
Populate diagrams with nodes and connectors created and positioned based on data from data sources. Without having to write any code, easily convert, map, and consume data in any format in the diagram by setting a few properties.
The Blazor Diagram lets you pan and zoom, snap, undo and redo, stencil, resize, and rotate interactively.
Diagram has a highly responsive layout and an optimized design for desktops, touchscreens, and phones. It works well on all mobile phones that use iOS, Android, or Windows OS.
The SymbolPalette displays a collection of palettes. A palette displays a set of nodes and connectors that you can drag and drop into the diagram.
Visualize any graphical object using nodes that can be arranged and manipulated on a diagram page at the same time. Diagram allows you to add different kinds of nodes.
Cutting-edge design with several built-in themes, such as Fluent, Tailwind CSS, Bootstrap, Material, and Fabric. Utilize the online Theme Studio tool to customize themes of diagram easily.
Enable users from different locales to use the component by formatting dates, currency, and numbering to suit preferences.
Easily get started with Blazor Diagram using a few simple lines of C# code, as demonstrated below. Also explore our Blazor Diagram Example that shows you how to render and configure the Diagram component in Blazor.
@using Syncfusion.Blazor.Diagram
@using System.Collections.ObjectModel
@using DiagramShapes = Syncfusion.Blazor.Diagram.Shapes
@using DiagramSegments = Syncfusion.Blazor.Diagram.Segments
<SfDiagramComponent Height="600px" Nodes="@NodeCollection" Connectors="@ConnectorCollection" NodeDefaults="@NodeDefaults" ConnectorDefaults="@ConnectorDefaults" ></SfDiagramComponent>
@code
{
int connectorCount = 0;
// Reference to diagram
SfDiagramComponent diagram;
// Define diagram's nodes collection
public DiagramObjectCollection<Node> NodeCollection { get; set; }
// Define diagram's connector collection
public DiagramObjectCollection<Connector> ConnectorCollection { get; set; }
protected override void OnInitialized()
{
InitDiagramModel();
}
private void InitDiagramModel()
{
NodeCollection = new DiagramObjectCollection<Node>();
ConnectorCollection = new DiagramObjectCollection<Connector>();
CreateNode("Start", 50, FlowShapes.Terminator, "Start");
CreateNode("Init", 140, FlowShapes.Process, "var i = 0;'");
CreateNode("Condition", 230, FlowShapes.Decision, "i < 10?");
CreateNode("Print", 320, FlowShapes.PreDefinedProcess, "print(\'Hello!!\');");
CreateNode("Increment", 410, FlowShapes.Process, "i++;");
CreateNode("End", 500, FlowShapes.Terminator, "End");
OrthogonalSegment segment1 = new OrthogonalSegment()
{
Type = DiagramSegments.Orthogonal,
Length = 30,
Direction = Direction.Right
};
OrthogonalSegment segment2 = new OrthogonalSegment()
{
Type = DiagramSegments.Orthogonal,
Length = 300,
Direction = Direction.Bottom
};
OrthogonalSegment segment3 = new OrthogonalSegment()
{
Type = DiagramSegments.Orthogonal,
Length = 30,
Direction = Direction.Left
};
OrthogonalSegment segment4 = new OrthogonalSegment()
{
Type = DiagramSegments.Orthogonal,
Length = 200,
Direction = Direction.Top
};
CreateConnector("Start", "Init");
CreateConnector("Init", "Condition");
CreateConnector("Condition", "Print");
CreateConnector("Condition", "End", "Yes", segment1, segment2);
CreateConnector("Print", "Increment", "No");
CreateConnector("Increment", "Condition", null, segment3, segment4);
}
private void CreateConnector(string sourceId, string targetId, string label = default(string), OrthogonalSegment segment1 = null, OrthogonalSegment segment2 = null)
{
Connector diagramConnector = new Connector()
{
ID = string.Format("connector{0}", ++connectorCount),
SourceID = sourceId,
TargetID = targetId
};
diagramConnector.Type = Segments.Orthogonal;
if (segment1 != null)
{
diagramConnector.Segments = new DiagramObjectCollection<ConnectorSegment>() { segment1, segment2 };
}
if (label != default(string))
{
var annotation = new PathAnnotation()
{
Content = label,
Style = new TextShapeStyle() { Fill = "transparent" }
};
diagramConnector.Annotations = new DiagramObjectCollection<PathAnnotation>() { annotation };
}
ConnectorCollection.Add(diagramConnector);
}
private void NodeDefaults(IDiagramObject obj)
{
Node node = obj as Node;
node.Width = 140;
node.Height = 50;
node.OffsetX = 300;
node.Style = new ShapeStyle() { Fill = "#357BD2", StrokeColor = "white" };
}
private void ConnectorDefaults(IDiagramObject obj)
{
Connector connector = obj as Connector;
connector.Type = DiagramSegments.Orthogonal;
connector.TargetDecorator = new Decorator() { Shape = DecoratorShapes.Arrow, Width = 10, Height = 10 };
}
private void CreateNode(string id, double y, FlowShapes shape, string label, bool positionLabel = false)
{
ShapeAnnotation annotation = new ShapeAnnotation() { Content = label,
Style = new TextShapeStyle()
{
Color = "white",
Fill = "transparent"
}
};
if (positionLabel)
{
annotation.Margin = new Margin() { Left = 25, Right = 25 };
};
Node diagramNode = new Node()
{
ID = id,
OffsetY = y,
Shape = new FlowShape() { Type = Shapes.Flow, Shape = shape },
Annotations = new DiagramObjectCollection<ShapeAnnotation>() { annotation }
};
NodeCollection.Add(diagramNode);
}
}
The Blazor Diagram component provides all the standard flowchart shapes as ready-made objects, making it is easy to add them to a diagram surface in a single call.
A built-in automatic layout algorithm is specifically designed for organizational charts to arrange parent and child node positions automatically.
Another built-in automatic layout algorithm is designed for mind map diagrams, allowing users to define which node should be at the center and which nodes should be placed around it in the diagram surface.
Visualize any graphical object using nodes, which can be arranged and manipulated at the same time on a Blazor diagram page. With nodes,
A connector represents a relationship between two nodes. Some of its key features like connector types, bridging, and more are listed below.
The Blazor Diagram component provides straight, orthogonal, polyline, and curved connector types. Choose any of these based on the type of diagram or the relationship between the connected nodes.
Use bridging (line jumps) to illustrate a connector’s route, making it easy to see where connectors overlap each other in a dense diagram.
Use different types of predefined arrowheads to illustrate flow direction in flowchart diagrams. Also build custom arrowheads.
Like nodes, the connector look and feel can also be customized. The Blazor Diagram component provides a rich set of properties to customize connector color, thickness, dash and dot appearance, rounded corners, and even decorators.
Attach connectors to specific places on a node through different types of ports or connecting points.
Additional information can be shown by adding text or labels on nodes and connectors.
Add and edit text at runtime and mark it read-only if it should not be edited.
Add any number of labels and align them individually.
Labels include sophisticated alignment options: place them inside or outside a node, or at the source or target end of a connector. Automatically align labels when a node or connector moves.
Use interactive features to improve the editing experience of a Blazor diagram at runtime. Furthermore, easily edit a Blazor diagram with mouse, touchscreen, or keyboard interfaces.
Select one or more nodes, connectors, or annotations and edit them using thumbs or handlers.
Resize a node in eight different directions and lock a node’s aspect ratios to maintain its shape. Also, resize multiple objects at the same time.
Don’t worry when you edit by mistake—undo and redo commands help to easily correct recent changes.
Cut, copy, paste, or duplicate selected objects within and across Blazor diagrams.
When multiple objects overlap, the z-order controls which object is at the top and which is at the bottom.
Precisely align nodes, connectors, and annotations while dragging them just by snapping to the nearest gridlines or objects.
You can combine multiple nodes into a group and then interact with them as a single object. Nested groups are also possible.
Frequently used commands like delete, connect, and duplicate can be shown as buttons near a selector. This makes it easy for users to quickly perform those operations instead of searching for the correct buttons in a toolbox.
Our Blazor Diagram library has predefined alignment commands that enable you to align selected objects, nodes, and connectors with respect to the selection boundary.
Spacing commands enable you to place selected objects on the diagram at equal intervals from each other.
Use sizing commands to equally size selected nodes with respect to the first selected object.
All the nodes or connectors in the selection list can be aligned at the left, right, or center horizontally, or aligned at the top, bottom, or middle vertically with respect to the selection boundary.
Use automatic layouts to arrange nodes automatically based on a predefined layout algorithm. Features built-in hierarchical tree, organizational tree, and mind map layouts.
Includes a gallery of stencils, reusable symbols, and nodes that can be dragged onto the surface of a Blazor diagram.
The overview panel allows you to improve the navigation experience when exploring large diagrams. It displays a small preview of the full diagram page that allows users to zoom and pan within it.
Draw all kinds of built-in nodes and connect them with connectors interactively by just clicking and dragging on the drawing area.
View a large diagram closely or assume a wider view by zooming in and out. Also, navigate from one region of a diagram to another by panning across the Blazor diagram.
You can export a diagram to different image files such as PNG, JPEG, BMP, and SVG.
Print diagrams from the browser. Users can also customize the page size, orientation, and page margin, and fit a diagram to a single page.
Save the Blazor diagram state in JSON format and load it back later for further editing using the serializer.
In addition to all the features listed thus far, there many more that enhance the diagramming experience.
Give a page-like appearance to the drawing surface using page size, orientation, and margins.
The Blazor Diagram control ensures that every cell is accessible using the keyboard. Major features like sort, select, and edit can be performed using keyboard commands alone; no mouse interaction is required. This helps in creating highly accessible applications using this control.
Developers can have full control over the UI and behavior of the event calendar through its built-in, developer-friendly APIs. It allows you to customize even the complex Diagram functionalities with ease.
The Diagram component is also available for Angular, React, Vue, and JavaScript frameworks, built from its own TypeScript libraries. Check out the different Diagram platforms from the following links:
The Blazor Diagram works well with all modern web browsers such as Chrome, Firefox, Microsoft Edge, Safari, and Opera.
We do not sell the Blazor Diagram separately. It is only available for purchase as part of the Syncfusion team license. This contains over 1,800 components and frameworks, including the Blazor Diagram. The price of the team license starts at $395 per month for 5 developers, and includes support and updates until the subscription expires. In addition, we might offer discounts based on currently active promotions. Please contact our product specialists today to see if you qualify for any additional discounts.
You can find our Blazor Diagram demo, which demonstrates how to render and configure the Diagram.
No, our 1,800+ components and frameworks for web, mobile, and desktop, including our Blazor Diagram, are not sold individually. They are only available as part of a team license. However, we have competitively priced the product, so it only costs a little bit more than what some other vendors charge for their Diagram component alone. We have also found that, in our experience, our customers usually start off using one of our products and then expand to several products quickly, so we felt it was best to offer all 1,800+ components and frameworks for a subscription fee that starts at $395 per month for a team of 5 developers. Additionally, we might be able to offer discounts based on currently active promotions. Please contact our product specialists today to see if you qualify for any additional discounts.
No, this is a commercial product and requires a paid license. However, a free community license is also available for companies and individuals whose organizations have less than $1 million USD in annual gross revenue, 5 or fewer developers, and 10 or fewer total employees.
A good place to start would be our comprehensive getting started documentation.
Greatness—it’s one thing to say you have it, but it means more when others recognize it. Syncfusion is proud to hold the following industry awards.