SfDiagramComponent Overview

12 Nov 20244 minutes to read

The Blazor Diagram component is a high-performance and versatile library designed for visualizing, creating, and editing interactive diagrams. With comprehensive support for flowcharts, organizational charts, mind maps, and other diagram types, this component empowers users to create sophisticated visual representations of data and processes with ease.

Key features of SfDiagramComponent are as follows:

• Flowchart: Provides all the standard flowchart shapes as ready-made objects, making it easy to add them to a diagram surface in a single call.
• Ports: Connect connectors to specific locations on a node using various types of ports or connecting points for precise connectivity.
• Nodes: Visualize and arrange any graphical object using nodes, which can be manipulated freely on the Blazor diagram surface.
• Built-in Shapes: Provided built-in shapes such as basic and flow shapes.
• Swimlane: Visualize groups and categorizes activities or tasks based on the role or department responsible for their execution, aiding in illustrating complex processes involving multiple participants or departments within an organization.
• Connectors: Represent connections between nodes, defining relationships and workflows within the diagram.
• Routing: Enhanced the dynamic updating of connector routes based on the placement or movement of nearby shapes. This feature is activated by setting the Routing enum value to the Constraints property for both the diagram and connectors, and setting the RoutingType to Classic or Advanced.
• Interaction: Diagram elements can be selected, rotated, resized, and moved.
• Z-Order: Diagram elements overlapping can be controlled by changing their Z-Order value.
• Pan and Zoom: Navigate the diagram with pan and zoom options for detailed and broad views.
• Snapping: Precisely align nodes, connectors, and annotations while dragging them just by snapping to the nearest gridlines or objects.
• Undo/Redo: Allows you to keep track of the recent changes made in a SfDiagramComponent to correct your mistakes.
• Commands: 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.
• Keyboard Shortcuts: Perform diagramming actions using customizable keyboard shortcuts.
• Clipboard Operations: Ability to cut, copy, and paste or duplicate selected Diagram elements within and across diagrams.
• Automatic Layouts: Built-in automatic nodes arrangement support for organization chart layout, mind map layout, hierarchical tree layout, and complex hierarchical layout.
• Serialization: Save the Blazor diagram state in JSON format and load it back later for further editing using the serializer.
• Symbol palette: Includes a gallery of stencils, reusable symbols, and nodes that can be dragged onto the surface of a Blazor diagram.
• Overview control: Displays a small preview of the entire diagram page for easier navigation.
• Localization: Localizes every static text in the control to any supported language.
• DrawingTool: Draw all kinds of built-in nodes and connect them with connectors interactively by just clicking and dragging on the drawing area.
• Printing: Print diagrams from the browser. Users can also customize the page size, orientation, and page margin, and fit a diagram to a single page.
• Exporting: You can export a diagram to different image files such as PNG, JPEG, and SVG.
• Tooltip: Use tooltips to provide additional information about a node and connector.
• Context menu: Customize the context menu with frequently used commands for easier access.
• Gridlines: Gridlines provide guidance when trying to align objects.
• Data binding: Create and position nodes and connectors in Blazor diagrams based on data from data sources. Furthermore, data in any format can be easily converted, mapped, and consumed in the Blazor diagram by simply changing a few properties without writing any code. Loading data from a list or an IEnumerable collection is also supported by the Blazor Diagram library.
• Spacing Commands: Spacing commands allow you to place selected objects on the diagram at equal intervals.
• Sizing Commands: Use sizing commands to proportionally size selected nodes in relation to the first selected object.
• Alignment Commands: All nodes or connectors in the selection list can be aligned horizontally to the left, right, or centre, or vertically to the top, bottom, or middle.
• UserHandle: The user handles are customizable handles that can be used to perform custom and default clipboard actions.
• Group: The NodeGroup element is used to group together multiple nodes and connectors into a single element. It serves as a container for its children (nodes, nodegroups, and connectors). Every modification to the node group has an impact on the children. Individual child elements can be edited.
• Ruler: Added horizontal and vertical guides for precise measuring in the Diagram control. The ruler ensures accuracy when placing, sizing, and aligning shapes and objects within a diagram.