SfDiagramComponent Overview

25 Aug 20233 minutes to read

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.

SfDiagramComponent Overview

Key features of SfDiagramComponent are as follows:

  • Flowchart: 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.
  • Ports: Connect connectors to specific locations on a node using various types of ports or connecting points.
  • Nodes: Visualize any graphical object using nodes that can be arranged and manipulated on a Blazor diagram page at the same time.
  • Connectors: A connector represents a connection between two nodes.
  • Built-in Shapes: Provided built-in shapes such as basic and flow shapes.
  • 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: Allows you to pan, zoom in or out of your current diagram.
  • 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: Allows you to trigger the diagramming features using 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 full diagram page, which allows you to improve the 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.
  • Context menu: Easily map frequently used commands to the context menu.
  • 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.