Class SfDiagramComponent

Renders the diagram. It contains all the properties of the diagram to be rendered.

Inheritance
System.Object
SfBaseComponent
SfDiagramComponent
Implements
System.ICloneable
Inherited Members
Namespace: Syncfusion.Blazor.Diagram
Assembly: Syncfusion.Blazor.dll
Syntax
public class SfDiagramComponent : SfBaseComponent, IDiagramObject, ICloneable

Constructors

SfDiagramComponent()

Declaration
public SfDiagramComponent()

Properties

BridgeDirection

Defines the direction of the bridge that is inserted when the connector segments are intersected.

Declaration
public Direction BridgeDirection { get; set; }
Property Value
Type Description
Direction

An enumeration value of the type Direction that represents the direction of bridge in Diagram component. The default value will be Top.
Remarks
The following options are used to define the direction of the bridge.
1. Left - Sets the direction of the bridge to Left.
2. Right - Sets the direction of bridge to Right.
3. Top - Sets the direction of bridge to Top.
4. Bottom - Sets the direction of bridge to Bottom.
Examples
<SfDiagramComponent Height="900px" BridgeDirection="Direction.Right" Connectors="@connectors">
</SfDiagramComponent>

BridgeDirectionChanged

Specifies the callback to trigger when the bridge direction changes.

Declaration
public EventCallback<Direction> BridgeDirectionChanged { get; set; }
Property Value
Type Description
Microsoft.AspNetCore.Components.EventCallback<Direction>

An event callback function.

ChildContent

Sets the child content of the diagram component.

Declaration
public RenderFragment ChildContent { get; set; }
Property Value
Type Description
Microsoft.AspNetCore.Components.RenderFragment

Accepts a RenderFragment that defines the content of the UI element.

Click

Triggers when a node, connector or diagram is clicked.

Declaration
public EventCallback<ClickEventArgs> Click { get; set; }
Property Value
Type
Microsoft.AspNetCore.Components.EventCallback<ClickEventArgs>
Examples
<SfDiagramComponent Width = "1000px" Height="1000px" Click="click">
</SfDiagramComponent>
@code
{
    private void click(ClickEventArgs args)
    {
        if (args.ActualObject != null)
        {
            Console.WriteLine("Clicked");
        }
    }
}

CollectionChanged

Triggers when the node/connector is added or removed from the diagram.

Declaration
public EventCallback<CollectionChangedEventArgs> CollectionChanged { get; set; }
Property Value
Type Description
Microsoft.AspNetCore.Components.EventCallback<CollectionChangedEventArgs>

An event callback function.
Examples
<SfDiagramComponent Width="1000px" Height="1000px" CollectionChanged="@collection">
</SfDiagramComponent>
@code
{
    private void collection(CollectionChangedEventArgs args)
    {
        if (args.Element != null)
        {
            Console.WriteLine("CollectionChanged");
        }
    }
}

CollectionChanging

Triggers before the node/connector is add or remove from the diagram.

Declaration
public EventCallback<CollectionChangingEventArgs> CollectionChanging { get; set; }
Property Value
Type Description
Microsoft.AspNetCore.Components.EventCallback<CollectionChangingEventArgs>

An event callback function.
Examples
<SfDiagramComponent Width="1000px" Height="1000px" CollectionChanging="@collection">
</SfDiagramComponent>
@code
{
    private void collection(CollectionChangingEventArgs args)
    {
        if (args.Element != null)
        {
            Console.WriteLine("CollectionChanging");
        }
    }
}

CommandManager

Defines a set of custom commands and binds them with a set of desired key gestures.

Declaration
public CommandManager CommandManager { get; set; }
Property Value
Type Description
CommandManager

The custom commands and their corresponding key gestures are specified through this property.
Examples
<SfDiagramComponent  Height="600px" >
    <CommandManager Commands = "@command" >
    </CommandManager>
</SfDiagramComponent>
@code
{
    DiagramObjectCollection<KeyboardCommand> command = new DiagramObjectCollection<KeyboardCommand>()
    {
        new Command()
        {
            Name = "CustomGroup",
            Gesture = new KeyGesture() { Key = DiagramKeys.G, Modifiers = ModifierKeys.Control }
        },
        new Command()
        {
            Name = "CustomUngroup",
            Gesture = new KeyGesture() { Key = DiagramKeys.U, Modifiers = ModifierKeys.Control }
        },
    };
}

ConnectionChanged

Triggers when the connector’s source or target point is connected or disconnected from the source or target.

Declaration
public EventCallback<ConnectionChangedEventArgs> ConnectionChanged { get; set; }
Property Value
Type Description
Microsoft.AspNetCore.Components.EventCallback<ConnectionChangedEventArgs>

An event callback function.
Examples
<SfDiagramComponent  ConnectionChanged="ConnectionChanged">
</SfDiagramComponent>
 private void ConnectionChanged(ConnectionChangedEventArgs args)
{
   args.Cancel = true;
}

ConnectionChanging

Triggers before the connector’s source or target point is connect or disconnect from the source or target.

Declaration
public EventCallback<ConnectionChangingEventArgs> ConnectionChanging { get; set; }
Property Value
Type Description
Microsoft.AspNetCore.Components.EventCallback<ConnectionChangingEventArgs>

An event callback function.
Examples
<SfDiagramComponent  ConnectionChanging="ConnectionChanging">
</SfDiagramComponent>
 private void ConnectionChanging(ConnectionChangingEventArgs args)
{
   args.Cancel = true;
}

ConnectorCreating

Helps to assign the default properties of the connector.

Declaration
public EventCallback<IDiagramObject> ConnectorCreating { get; set; }
Property Value
Type Description
Microsoft.AspNetCore.Components.EventCallback<IDiagramObject>

An event callback function.
Examples
<SfDiagramComponent  ConnectorCreating="@ConnectorCreating">
</SfDiagramComponent>
@code
{
    private void ConnectorCreating(IDiagramObject obj)
    {

    }
}

Connectors

Defines a collection of connector objects, used to create links between two points, nodes or ports to represent the relationships between them.

Declaration
public DiagramObjectCollection<Connector> Connectors { get; set; }
Property Value
Type
DiagramObjectCollection<Connector>
Examples
<SfDiagramComponent Height="900px" Connectors="@connectors">
</SfDiagramComponent>
@code
{
  public DiagramObjectCollection<Connector> connectors = new DiagramObjectCollection<Connector>();
  protected override void OnInitialized()
  {
    Connector connector = new Connector()
    {
       ID="straight",
       SourcePoint = new DiagramPoint() { X = 100, Y = 200 },
       TargetPoint = new DiagramPoint() { X = 300, Y = 200 },
       Segments = new DiagramObjectCollection<ConnectorSegment>()
       {
           //Create a new straight segment 
           new StraightSegment(){Point=new DiagramPoint(420,300)},
        }
    };
   connectors.Add(connector);
  }
 }

ConnectorsChanged

Specifies the callback to trigger when the connector changes.

Declaration
public EventCallback<DiagramObjectCollection<Connector>> ConnectorsChanged { get; set; }
Property Value
Type Description
Microsoft.AspNetCore.Components.EventCallback<DiagramObjectCollection<Connector>>

An event callback function.

ConnectorSegmentThumb

Gets or sets the settings for customizing the segment thumbs for connector segments. The segment thumbs allow you to adjust the length of adjacent segments by clicking and dragging them. Segments are rendered with the Rhombus shape for Orthogonal Segment and Circle shape for Bezier Segment connectors by default. Segment thumbs are enabled by adding connector constraints as DragSegmentThumb.

Declaration
public SegmentThumbSettings ConnectorSegmentThumb { get; set; }
Property Value
Type
SegmentThumbSettings
Remarks

If you wish to show the ConnectorSegmentThumb for SfDiagramComponent, you need to add the InheritSegmentThumbShape for the connector constraints.

Examples
 

<SfDiagramComponent ConnectorSegmentThumb="@connectorSegmentThumb"  
   Connectors="@connectors"/> 
@code { 
    SegmentThumbSettings connectorSegmentThumb = new SegmentThumbSettings() 
    { 
        Shape = SegmentThumbShapes.Square 
    }; 
public DiagramObjectCollection<Connector> connectors = new ///DiagramObjectCollection<Connector>(); 
protected override void OnInitialized() 
{ 
    Connector connector = new Connector() 
    { 
       ID = "connector1", 
         Type = ConnectorSegmentType.Orthogonal, 
         SourcePoint = new DiagramPoint() { X = 100, Y = 100 }, 
         TargetPoint = new DiagramPoint() { X = 200, Y = 200 }, 
         Constraints |= ConnectorConstraints.DragSegmentThumb | ConnectorConstraints.InheritSegmentThumbShape; 
     }; 
     connectors.Add(connector);  
} 
}

ConnectorSegmentThumbChanged

Declaration
public EventCallback<SegmentThumbSettings> ConnectorSegmentThumbChanged { get; set; }
Property Value
Type
Microsoft.AspNetCore.Components.EventCallback<SegmentThumbSettings>

Constraints

Enables/disables certain behaviors of the diagram.

Declaration
public DiagramConstraints Constraints { get; set; }
Property Value
Type Description
DiagramConstraints

An enumeration value of DiagramConstraints that represents the constraints of Diagram. The default value is Default.
Examples
<SfDiagramComponent @bind-Constraints="@diagramConstraints"  />
 @code
 {
   DiagramConstraints diagramConstraints = DiagramConstraints.Default;
}

ConstraintsChanged

Specifies the callback to trigger when the constraint changes.

Declaration
public EventCallback<DiagramConstraints> ConstraintsChanged { get; set; }
Property Value
Type Description
Microsoft.AspNetCore.Components.EventCallback<DiagramConstraints>

An event callback function.

ContextMenuSettings

Represents a shortcut menu

Declaration
public ContextMenuSettings ContextMenuSettings { get; set; }
Property Value
Type Description
ContextMenuSettings

Represents the items for the context menu that appears when you perform a right-click operation.
Examples
<SfDiagramComponent >
<ContextMenuSettings @bind-Show="@show" @bind-ShowCustomMenuOnly="@customMenuOnly" @bind-Items="@Items" ContextMenuOpening="@BeforeOpen" ContextMenuItemClicked="@ItemClicked">
</ContextMenuSettings>
</SfDiagramComponent>
@code {
SfDiagramComponent diagram;
DiagramObjectCollection<Node> nodes = new DiagramObjectCollection<Node>();
ContextMenuSettings ContextMenuSettings;
List<ContextMenuItem> Items;
bool customMenuOnly = false;
bool show = true;
protected override void OnInitialized()
{

   Items = new List<ContextMenuItem>()
   {
            new ContextMenuItem()
           {
               Text = "Save As...",
               Id = "save",
               IconCss = "e-save",
           },
           new ContextMenuItem()
           {
               Text = "Group",
               Id = "load",
               IconCss = "e-group"
           }
   };

Created

Triggers when Diagram component is rendered.

Declaration
public EventCallback<object> Created { get; set; }
Property Value
Type Description
Microsoft.AspNetCore.Components.EventCallback<System.Object>

An event callback function.
Remarks

The Created event notifies to perform the actions after the control is rendered in a page.

Examples
<SfDiagramComponent @ref="@Diagram"
Width="100%"
Height="700px"
Nodes="nodes"
Created="OnCreated">
</SfDiagramComponent>
@code
{
SfDiagramComponent Diagram;
private void OnCreated(object args)
{
Diagram.Select(new ObservableCollection<IDiagramObject>() { Diagram.Nodes[2] });
}
}

DataLoaded

Triggers when the diagram layout is rendered completely.

Declaration
public EventCallback<object> DataLoaded { get; set; }
Property Value
Type Description
Microsoft.AspNetCore.Components.EventCallback<System.Object>

An event callback function.
Examples
<SfDiagramComponent  DataLoaded="@DataLoaded">
</SfDiagramComponent>
@code
{
    private void DataLoaded(object args)
    {

    }
}

DataSourceSettings

Configures the data source that is to be bound with the diagram.

Declaration
public DataSourceSettings DataSourceSettings { get; set; }
Property Value
Type Description
DataSourceSettings

The settings for binding the diagram to a data source.
Examples
<SfDiagramComponent>
    <DataSourceSettings ID = "Id" ParentID="Team" DataSource="@DataSource"></DataSourceSettings>   
    <Layout Type = "LayoutType.OrganizationalChart">
    </Layout>
</SfDiagramComponent>
@code
{
   public class OrgChartDataModel 
   {
       public string Id  { get; set; }
       public string Team { get; set; }
       public string Role { get; set; }
   }
   public object DataSource = new List<object>()
   {
       new OrgChartDataModel() { Id= "1", Role= "General Manager" },
   };
}

DiagramTemplates

Represents the template of the diagram element.

Declaration
public DiagramTemplates DiagramTemplates { get; set; }
Property Value
Type Description
DiagramTemplates

The templates for the elements in the Diagram component are specified through the property.
Examples
<SfDiagramComponent  />
<DiagramTemplates>
 <NodeTemplate>
  @{ var id = (context as Node).ID;
 <div style="height: 100%; width: 100%; background:green">
  <input type="button" value="Button1" @onclick="@OnClick" />
  </div>
  }
 </NodeTemplate>
 </DiagramTemplates>

DragDrop

Triggers when a symbol is dragged and dropped from the symbol palette to the drawing area.

Declaration
public EventCallback<DropEventArgs> DragDrop { get; set; }
Property Value
Type Description
Microsoft.AspNetCore.Components.EventCallback<DropEventArgs>

An event callback function.
Examples
<SfDiagramComponent  DragDrop="DragDrop">
</SfDiagramComponent>
private void DragDrop(DropEventArgs args)
{
    if (args.Element is Node)
    {
        string id = (args.Element as NodeBase).ID;
    }
}

Dragging

Triggers when an element drags over another diagram element.

Declaration
public EventCallback<DraggingEventArgs> Dragging { get; set; }
Property Value
Type Description
Microsoft.AspNetCore.Components.EventCallback<DraggingEventArgs>

An event callback function.

DragLeave

Triggers when a symbol is dragged outside of the diagram.

Declaration
public EventCallback<DragLeaveEventArgs> DragLeave { get; set; }
Property Value
Type Description
Microsoft.AspNetCore.Components.EventCallback<DragLeaveEventArgs>

An event callback function.

DragStart

Triggers when a symbol is dragged into the diagram from the symbol palette

Declaration
public EventCallback<DragStartEventArgs> DragStart { get; set; }
Property Value
Type Description
Microsoft.AspNetCore.Components.EventCallback<DragStartEventArgs>

An event callback function.

DrawingObject

Defines the object to be drawn using a drawing tool.

Declaration
public IDiagramObject DrawingObject { get; set; }
Property Value
Type Description
IDiagramObject

The object that represents the drawing operation in Diagram component.
Examples
<SfDiagramComponent Height="600px" InteractionController="Tools" @bind-DrawingObject="@DrawingObject" Nodes="@nodes" />
 @code
 {
    DiagramObjectCollection<Node> nodes = new DiagramObjectCollection<Node>();
    DiagramInteractions Tools =  DiagramInteractions.ContinuousDraw;
     IDiagramObject DrawingObject { get; set; }
    protected override void OnInitialized()
    {
        Node node = new Node()
        {
            ID = "node1",
            //Size of the node
            Height = 100,
            Width = 100,
            //Position of the node
            OffsetX = 100,
            OffsetY = 100,
        };
        DrawingObject = node;
    }
}

DrawingObjectChanged

Specifies the callback to trigger when the drawing object changes.

Declaration
public EventCallback<IDiagramObject> DrawingObjectChanged { get; set; }
Property Value
Type Description
Microsoft.AspNetCore.Components.EventCallback<IDiagramObject>

An event callback function.

EnableChunkMessages

Gets or sets a boolean value indicating whether to enable support for chunk messages. Chunk messages allow measurement of path, image, text and SVG data without increasing the maximum message size of a single incoming hub message (MaximumReceiveMessageSize 32KB). The default value is false.

Declaration
public bool EnableChunkMessages { get; set; }
Property Value
Type Description
System.Boolean

True if chunk message support can be enabled; otherwise, false.
Remarks

By default, the EnableChunkMessages is set to false. Chunk message support can be enabled by setting EnableChunkMessages to true.

Examples
<SfDiagramComponent EnableChunkMessages="true" />

EnableConnectorSplitting

Gets or sets a value indicating whether to enable automatic splitting of connectors when dropping a new node onto an existing connector.

Declaration
public bool EnableConnectorSplitting { get; set; }
Property Value
Type Description
System.Boolean

true if automatic splitting of connectors is enabled; otherwise, false.
Remarks

When set to true, the connector is automatically split between two nodes upon dropping a new node onto an existing connector,
creating a connection between the new node and existing nodes.

Examples
  

    <SfDiagramComponent EnableConnectorSplitting="true" />

FixedUserHandleClick

Triggers when a Fixed User Handle item is clicked.

Declaration
public EventCallback<FixedUserHandleClickEventArgs> FixedUserHandleClick { get; set; }
Property Value
Type Description
Microsoft.AspNetCore.Components.EventCallback<FixedUserHandleClickEventArgs>

An event callback function.
Examples
<SfDiagramComponent Width="1000px" Height="1000px" FixedUserHandleClick="@fixedhandle">
</SfDiagramComponent>
public void fixedhandle(FixedUserHandleClickEventArgs args)
{

}

GetCustomCursor

This method allows users to create their own cursor.

Declaration
public Func<DiagramElementAction, bool, string, string> GetCustomCursor { get; set; }
Property Value
Type Description
System.Func<DiagramElementAction, System.Boolean, System.String, System.String>

A function that allows users to customize the cursor displayed when interacting with the diagram.
Examples
<SfDiagramComponent  @bind-Nodes="Nodes" GetCustomCursor="@cursor" >
</SfDiagramComponent>
@code
{ 
  public string cursor(DiagramElementAction action, bool active, string handle)
  {

  }
}

GetCustomTool

This method allows users to customize the tool.

Declaration
public Func<DiagramElementAction, string, InteractionControllerBase> GetCustomTool { get; set; }
Property Value
Type Description
System.Func<DiagramElementAction, System.String, InteractionControllerBase>

A function that allows users to customize the tool used when interacting with the diagram.
Examples
<SfDiagramComponent @bind-Nodes="Nodes" GetCustomTool="@GetCustomTool">
</SfDiagramComponent>
@code
{ 
  public InteractionControllerBase GetCustomTool(DiagramElementAction action, string id)
  {

  }
}

Height

Defines the height of the diagram.

Declaration
public string Height { get; set; }
Property Value
Type Description
System.String

Accepts the string value. The default value is 100%.
Examples
<SfDiagramComponent Height="900px">
</SfDiagramComponent>

HeightChanged

Specifies the callback to trigger when the height changes.

Declaration
public EventCallback<string> HeightChanged { get; set; }
Property Value
Type
Microsoft.AspNetCore.Components.EventCallback<System.String>

HistoryChanged

Triggers when a change is reverted or restored(undo/redo).

Declaration
public EventCallback<HistoryChangedEventArgs> HistoryChanged { get; set; }
Property Value
Type
Microsoft.AspNetCore.Components.EventCallback<HistoryChangedEventArgs>

HistoryManager

Notifies when a change is reverted or restored.

Declaration
public DiagramHistoryManager HistoryManager { get; set; }
Property Value
Type Description
DiagramHistoryManager

An object of type DiagramHistoryManager that represents the history manager for the Diagram component.
Examples
<SfDiagramComponent Width="800px" Height="800px">
    <DiagramHistoryManager Redo="onCustomRedo"></DiagramHistoryManager>
</SfDiagramComponent>
@code
{
    private void onCustomRedo(HistoryEntryBase entry)
    {
        Node current = entry.UndoObject.Clone() as Node;
        (entry.UndoObject as Node).AdditionalInfo[(entry.UndoObject as Node).ID] = "Description";
        entry.RedoObject = current;
    }
}

ID

Get or sets the unique ID of the diagram.

Declaration
public string ID { get; set; }
Property Value
Type Description
System.String

The unique string value represented as ID of the diagram component. The default value will be the randomly generated string.
Examples
<SfDiagramComponent Height="900px" ID="diagram">
</SfDiagramComponent>

InteractionController

Defines the precedence of the interactive tools.

Declaration
public DiagramInteractions InteractionController { get; set; }
Property Value
Type Description
DiagramInteractions

An enumeration value of DiagramInteractions that represents the precedence of interactive tools. The default value is Default.
Examples
<SfDiagramComponent InteractionController="DiagramInteractions.SingleSelect"  />

InteractionControllerChanged

Specifies the callback to trigger when the tool changes.

Declaration
public EventCallback<DiagramInteractions> InteractionControllerChanged { get; set; }
Property Value
Type
Microsoft.AspNetCore.Components.EventCallback<DiagramInteractions>

KeyDown

Triggers when a user presses a key.

Declaration
public EventCallback<KeyEventArgs> KeyDown { get; set; }
Property Value
Type
Microsoft.AspNetCore.Components.EventCallback<KeyEventArgs>
Examples
<SfDiagramComponent Width = "1000px" Height="1000px" KeyDown="@OnKeyDown">
</SfDiagramComponent>
@code
{
    private void OnKeyDown(KeyEventArgs args)
    {

    }
}

KeyUp

Triggers when a user releases a key.

Declaration
public EventCallback<KeyEventArgs> KeyUp { get; set; }
Property Value
Type
Microsoft.AspNetCore.Components.EventCallback<KeyEventArgs>
Examples
<SfDiagramComponent Width = "1000px" Height="1000px" KeyUp="@OnKeyUp">
</SfDiagramComponent>
@code
{
    private void OnKeyUp(KeyEventArgs args)
    {

    }
}

Layout

Layout is used to auto-arrange the nodes in the Diagram area.

Declaration
public Layout Layout { get; set; }
Property Value
Type Description
Layout

The Layout used to arrange the node elements in the Diagram.
Examples
<SfDiagramComponent Height = "600px" >
    <DataSourceSettings ID = "Id" ParentID="Team" DataSource="@DataSource"></DataSourceSettings>   
    <Layout Type = "LayoutType.OrganizationalChart">
    </Layout>
</SfDiagramComponent>

LineRoutingSettings

Gets or sets the line routing settings, which enable customization of the routing type and distance for the routing connector.

Declaration
public LineRoutingSettings LineRoutingSettings { get; set; }
Property Value
Type
LineRoutingSettings
Remarks

This property allows customization of the type and obstacle padding of the diagram's line routing.

Examples
<SfDiagramComponent>
    <LineRoutingSettings RoutingType="RoutingTypes.Advanced" ObstaclePadding="12">
    </LineRoutingSettings>
</SfDiagramComponent>

MouseEnter

Triggers when the mouse enters a node/connector.

Declaration
public EventCallback<DiagramElementMouseEventArgs> MouseEnter { get; set; }
Property Value
Type Description
Microsoft.AspNetCore.Components.EventCallback<DiagramElementMouseEventArgs>

An event callback function.
Examples
<SfDiagramComponent Width="1000px" Height="1000px"  MouseEnter="@MouseEnter">
</SfDiagramComponent>
@code
{
  private void MouseEnter(DiagramElementMouseEventArgs args)
  {
    if ((args != null) && (args.ActualObject != null))
    {
        Console.WriteLine("Mouse Entered");
    }
  }
}

MouseHover

Triggers when the mouse pointer rests on the node/connector.

Declaration
public EventCallback<DiagramElementMouseEventArgs> MouseHover { get; set; }
Property Value
Type Description
Microsoft.AspNetCore.Components.EventCallback<DiagramElementMouseEventArgs>

An event callback function.
Examples
<SfDiagramComponent Width="1000px" Height="1000px"  MouseHover="@MouseHover">
</SfDiagramComponent>
@code
{
  private void MouseHover(DiagramElementMouseEventArgs args)
  {
    if ((args != null) && (args.ActualObject != null))
    {
        Console.WriteLine("MouseHover");
    }
  }
}

MouseLeave

Triggers when the mouse leaves a node/connector.

Declaration
public EventCallback<DiagramElementMouseEventArgs> MouseLeave { get; set; }
Property Value
Type Description
Microsoft.AspNetCore.Components.EventCallback<DiagramElementMouseEventArgs>

An event callback function.
Examples
<SfDiagramComponent Width="1000px" Height="1000px"  MouseLeave="@MouseLeave">
</SfDiagramComponent>
@code
{
  private void MouseLeave(DiagramElementMouseEventArgs args)
  {
    if ((args != null) && (args.ActualObject != null))
    {
        Console.WriteLine("MouseLeave");
    }
  }
}

NodeCreating

Helps to assign the default properties of nodes.

Declaration
public EventCallback<IDiagramObject> NodeCreating { get; set; }
Property Value
Type Description
Microsoft.AspNetCore.Components.EventCallback<IDiagramObject>

An event callback function.
Examples
<SfDiagramComponent  NodeCreating="@NodeCreating">
</SfDiagramComponent>
@code
{
    private void NodeCreating(IDiagramObject obj)
    {

    }
}

Nodes

Defines a collection of node objects, used to visualize the geometrical information.

Declaration
public DiagramObjectCollection<Node> Nodes { get; set; }
Property Value
Type Description
DiagramObjectCollection<Node>

The collection of nodes objects that are used to visualize the geometrical information is specified through this property.
Examples
<SfDiagramComponent Height="600px" Nodes="@nodes" />
 @code
 {
    DiagramObjectCollection<Node> nodes = new DiagramObjectCollection<Node>();
    protected override void OnInitialized()
    {
        Node node = new Node()
        {
            ID = "node1",
            //Size of the node
            Height = 100,
            Width = 100,
            //Position of the node
            OffsetX = 100,
            OffsetY = 100,
        };
        nodes.Add(node);
    }
}

NodesChanged

Specifies the callback to trigger when the node changes.

Declaration
public EventCallback<DiagramObjectCollection<Node>> NodesChanged { get; set; }
Property Value
Type Description
Microsoft.AspNetCore.Components.EventCallback<DiagramObjectCollection<Node>>

An event callback function.

OnAutoScrollChange

Occurs when changes are detected to the scroll position, extent, or viewport size by perform auto scrolling for diagram elements.

Declaration
public EventCallback<AutoScrollChangeEventArgs> OnAutoScrollChange { get; set; }
Property Value
Type
Microsoft.AspNetCore.Components.EventCallback<AutoScrollChangeEventArgs>
Examples
<SfDiagramComponent OnAutoScrollChange="@OnAutoScrollChange">
    <ScrollSettings EnableAutoScroll="true"></ScrollSettings>
</SfDiagramComponent>
@code
{
    private void OnAutoScrollChange(AutoScrollChangeEventArgs args)
    {
      args.Cancel = true;
    }
}

PageSettings

Page settings enable you to customize the appearance, width, and height of the Diagram page.

Declaration
public PageSettings PageSettings { get; set; }
Property Value
Type Description
PageSettings

The appearance, width and height of the diagram page can be customized through this property.
Examples
<SfDiagramComponent @ref="diagram" Width="100%" Height="500px" Nodes="@nodes" Connectors="@connectors">
    <PageSettings Width = "80px" Height="300px" >
        <PageMargin Left = "10" Right="10" Top="10" Bottom="10"></PageMargin>
    </PageSettings>
</SfDiagramComponent>

PositionChanged

Triggers when the node's/connector's position is changed.

Declaration
public EventCallback<PositionChangedEventArgs> PositionChanged { get; set; }
Property Value
Type Description
Microsoft.AspNetCore.Components.EventCallback<PositionChangedEventArgs>

An event callback function.
Examples
<SfDiagramComponent  PositionChanged="@changed">
</SfDiagramComponent>
private void changed(PositionChangedEventArgs args)
{
    if (args.NewValue != null && args.OldValue != null && args.Element != null)
    {
        Console.WriteLine("Changed");
    }
}

PositionChanging

Triggers while dragging the elements in the diagram.

Declaration
public EventCallback<PositionChangingEventArgs> PositionChanging { get; set; }
Property Value
Type Description
Microsoft.AspNetCore.Components.EventCallback<PositionChangingEventArgs>

An event callback function.
Examples
<SfDiagramComponent  PositionChanging="@changed">
</SfDiagramComponent>
private void changed(PositionChangingEventArgs args)
{
    if (args.NewValue != null && args.OldValue != null && args.Element != null)
    {
        Console.WriteLine("Changing");
    }
}

PropertyChanged

Triggers when the node or connector property changes.

Declaration
public EventCallback<PropertyChangedEventArgs> PropertyChanged { get; set; }
Property Value
Type Description
Microsoft.AspNetCore.Components.EventCallback<PropertyChangedEventArgs>

An event callback function.

RotationChanged

Triggers when the diagram elements are rotated.

Declaration
public EventCallback<RotationChangedEventArgs> RotationChanged { get; set; }
Property Value
Type Description
Microsoft.AspNetCore.Components.EventCallback<RotationChangedEventArgs>

An event callback function.
Examples
<SfDiagramComponent  RotationChanged="@RotationChanged">
</SfDiagramComponent>
@code
{
    private void RotationChanged(RotationChangedEventArgs args)
    {

    }
}

RotationChanging

Triggers before the diagram elements are rotate.

Declaration
public EventCallback<RotationChangingEventArgs> RotationChanging { get; set; }
Property Value
Type Description
Microsoft.AspNetCore.Components.EventCallback<RotationChangingEventArgs>

An event callback function.
Examples
<SfDiagramComponent RotationChanging="@RotationChanging">
</SfDiagramComponent>
@code
{
    private void RotationChanging(RotationChangingEventArgs args)
    {

    }
}

RulerSettings

Controls the visibility of horizontal and vertical rulers and allows customization of their appearance.

Declaration
public RulerSettings RulerSettings { get; set; }
Property Value
Type Description
RulerSettings

an object of RulerSettings that controls the horizontal ruler/vertical ruler in diagram
Remarks

It manages the visibility of horizontal and vertical rulers within the diagram. Additionally, it provides options to customize the appearance of those rulers.

Examples
    <SfDiagramComponent Height="600px">
        <RulerSettings>
            <HorizontalRuler Interval = "6">
            </HorizontalRuler>
            <VerticalRuler Interval = "7">
            </VerticalRuler>
        </RulerSettings>
    </SfDiagramComponent>

ScrollChanged

Triggers when the scrollbar is updated.

Declaration
public EventCallback<ScrollChangedEventArgs> ScrollChanged { get; set; }
Property Value
Type Description
Microsoft.AspNetCore.Components.EventCallback<ScrollChangedEventArgs>

An event callback function.
Examples
<SfDiagramComponent Width = "1000px" Height="1000px" ScrollChanged="ScrollChanged">
</SfDiagramComponent>
@code
{
   private void ScrollChanged(ScrollChangedEventArgs args)
    {

    }
}

ScrollSettings

Defines the current zoom value, zoom factor, scroll status, and view port size of the diagram.

Declaration
public ScrollSettings ScrollSettings { get; set; }
Property Value
Type Description
ScrollSettings

The current zoom value, zoom factor, scroll status, and view port size of diagram are specified through this property.
Examples
<SfDiagramComponent Width="1000px" Height="1000px">
    <ScrollSettings VerticalOffset="900px" HorizontalOffset="800px" >
    </ScrollSettings>
</SfDiagramComponent>

SegmentCollectionChange

Triggers when the connector’s segment collection is updated.

Declaration
public EventCallback<SegmentCollectionChangeEventArgs> SegmentCollectionChange { get; set; }
Property Value
Type Description
Microsoft.AspNetCore.Components.EventCallback<SegmentCollectionChangeEventArgs>

An event callback function.
Examples
<SfDiagramComponent Width = "1000px" Height="1000px" SegmentCollectionChange="@OnSegmentCollectionChange">
</SfDiagramComponent>
@code
{
     private void OnSegmentCollectionChange(SegmentCollectionChangeEventArgs args)
    {

    }
}

SelectionChanged

Triggers when the selection is changed in the diagram.

Declaration
public EventCallback<SelectionChangedEventArgs> SelectionChanged { get; set; }
Property Value
Type Description
Microsoft.AspNetCore.Components.EventCallback<SelectionChangedEventArgs>

An event callback function.

SelectionChanging

Triggers before the selection is change in the diagram.

Declaration
public EventCallback<SelectionChangingEventArgs> SelectionChanging { get; set; }
Property Value
Type Description
Microsoft.AspNetCore.Components.EventCallback<SelectionChangingEventArgs>

An event callback function.

SelectionSettings

Defines the collection of selected items, the size and position of the selector.

Declaration
public DiagramSelectionSettings SelectionSettings { get; set; }
Property Value
Type Description
DiagramSelectionSettings

The collection of selected items, the size, and position of the selector are specified through this property.
Examples
<SfDiagramComponent ref="@diagram" SelectionSettings="@select" Height="600px"  />
 @code
 {
        DiagramSelectionSettings select = new DiagramSelectionSettings() { Width =100, Height=150 };
    }
}

SelectionSettingsChanged

Specifies the callback to trigger when the selection settings changes.

Declaration
public EventCallback<DiagramSelectionSettings> SelectionSettingsChanged { get; set; }
Property Value
Type Description
Microsoft.AspNetCore.Components.EventCallback<DiagramSelectionSettings>

An event callback function.

SetNodeTemplate

Customizes the node template.

Declaration
public Func<IDiagramObject, CommonElement> SetNodeTemplate { get; set; }
Property Value
Type
System.Func<IDiagramObject, CommonElement>
Examples
<SfDiagramComponent  @bind-Nodes="Nodes" SetNodeTemplate="SetTemplate">
</SfDiagramComponent>
@code
{ 
  DiagramObjectCollection<Node> Nodes = new DiagramObjectCollection<Node>();
  protected override void OnInitialized()
  {
     StackPanel stackPanel = SetTemplate(null) as StackPanel;
      stackPanel.Orientation = Orientation.Horizontal;
      basicElements.Add(stackPanel);
  }
}

SizeChanged

Triggers when a node is resized.

Declaration
public EventCallback<SizeChangedEventArgs> SizeChanged { get; set; }
Property Value
Type Description
Microsoft.AspNetCore.Components.EventCallback<SizeChangedEventArgs>

An event callback function.
Examples
<SfDiagramComponent Height="600px" Nodes="@nodes" SizeChanged="@SizeChanged" />
@code
{
    // To define the node collection
    DiagramObjectCollection<Node> nodes;
    protected override void OnInitialized()
    {
        nodes = new DiagramObjectCollection<Node>();
        // A node is created and stored in the nodes collection.
        Node node = new Node()
        {
            // Position of the node
            OffsetX = 250,
            OffsetY = 250,
            // Size of the node
            Width = 100,
            Height = 100,
            Style = new ShapeStyle() { Fill = "#6BA5D7", StrokeColor = "white" }
        };
        // Add a node
        nodes.Add(node);
    }
    // Size change event for the diagram
    public void SizeChanged(SizeChangedEventArgs args)
    {
        Console.WriteLine(args.NewValue.Nodes[0].ID);
    }
}

SizeChanging

Triggers before a node is resize.

Declaration
public EventCallback<SizeChangingEventArgs> SizeChanging { get; set; }
Property Value
Type Description
Microsoft.AspNetCore.Components.EventCallback<SizeChangingEventArgs>

An event callback function.
Examples
<SfDiagramComponent Height="600px" Nodes="@nodes" SizeChanging="@OnSizeChange" />
@code
{
    DiagramObjectCollection<Node> nodes;
    protected override void OnInitialized()
    {
        nodes = new DiagramObjectCollection<Node>();
        Node node = new Node()
        {
            // Position of the node
            OffsetX = 250,
            OffsetY = 250,
            // Size of the node
            Width = 100,
            Height = 100,
        };
        nodes.Add(node);
    }
    // Size change event for the diagram
    public void OnSizeChange(SizeChangingEventArgs args)
    {
        Console.WriteLine(args.NewValue.Nodes[0].ID);
    }
}

SnapSettings

Defines the grid lines and specifies how and when objects must be snapped.

Declaration
public SnapSettings SnapSettings { get; set; }
Property Value
Type Description
SnapSettings

An object of SnapSettings that represents the grid lines and snapping behavior in diagram.
Examples
<SfDiagramComponent Height="500px">
    // Shows the horizontal grid lines
    <SnapSettings Constraints ="SnapConstraints.ShowLines" SnapAngle="10">
        <HorizontalGridLines LineColor = "blue" LineDashArray="2,2">
        </HorizontalGridLines>
        <VerticalGridLines LineColor = "blue" LineDashArray="2,2">
        </VerticalGridLines>
    </SnapSettings>
</SfDiagramComponent>

SourcePointChanged

Triggers when the connector’s source point is changed.

Declaration
public EventCallback<EndPointChangedEventArgs> SourcePointChanged { get; set; }
Property Value
Type Description
Microsoft.AspNetCore.Components.EventCallback<EndPointChangedEventArgs>

An event callback function.
Examples
<SfDiagramComponent Width="1000px" Height="1000px" SourcePointChanged="@OnSourcePointChanged">
</SfDiagramComponent>
private void OnSourcePointChanged(EndPointChangedEventArgs args)
{
    if (args.Connector != null)
    {
        Connector connector = args.Connector;
    }
}

SourcePointChanging

Triggers while dragging the connector’s source end in the diagram.

Declaration
public EventCallback<EndPointChangingEventArgs> SourcePointChanging { get; set; }
Property Value
Type Description
Microsoft.AspNetCore.Components.EventCallback<EndPointChangingEventArgs>

An event callback function.
Examples
<SfDiagramComponent Width="1000px" Height="1000px" SourcePointChanging="@OnSourcePointChanging">
</SfDiagramComponent>
private void OnSourcePointChanging(EndPointChangingEventArgs args)
{
    if (args.Connector != null)
    {
        Connector connector = args.Connector;
    }
}

Swimlanes

Gets or sets the collection of swimlanes in the diagram.

Declaration
public DiagramObjectCollection<Swimlane> Swimlanes { get; set; }
Property Value
Type Description
DiagramObjectCollection<Swimlane>

A collection of Swimlane objects representing the swimlanes in the diagram.
Remarks

Use this property to access and manipulate the swimlanes in the SfDiagramComponent. Swimlanes are used to visually organize and group related shapes and connectors within the diagram.

Examples
 

   <SfDiagramComponent Height = "600px" Width="90%" Swimlanes="@SwimlaneCollections"> 
    </SfDiagramComponent> 
@code {
   DiagramObjectCollection<Swimlane> SwimlaneCollections = new DiagramObjectCollection<Swimlane>(); 
   protected override void OnInitialized() 
   { 
       Node node1 = new Node() 
       { 
           ID = "node1", 
           Height = 100, 
           Width = 100, 
           OffsetX = 100, 
           OffsetY = 100, 
       }; 
       Node node2 = new Node() 
       { 
           ID = "node2", 
           Height = 100, 
           Width = 100, 
           OffsetX = 300, 
           OffsetY = 100, 
       }; 
       SwimlaneCollections = new DiagramObjectCollection<Swimlane>() 
       { 
           new Swimlane() 
           { 
               ID = "swimlane1", 
               Orientation = Orientation.Horizontal, 
               Height = 200, Width = 450, 
               Header = new SwimlaneHeader(){ Annotation = new Annotation(){Content = "Header of swimlane" }, Height = 30 }, 
               Phases = new DiagramObjectCollection<Phase>() 
               { 
                   new Phase(){Header = new SwimlaneHeader(){Annotation = new Annotation(){Content = "Header of phase"}}, Width= 450} 
               }, 
               Lanes = new DiagramObjectCollection<Lane>() 
               { 
                   new Lane(){Header = new SwimlaneHeader (){Annotation = new Annotation(){Content = "Header of lane"}}, Height = 100, 
                   Children = new DiagramObjectCollection<Node>() 
                   { 
                          node1, node2 
                   }, 
               } 
           } 
           } 
       }; 
   } 
}

SwimlanesChanged

Specifies the callback to trigger when the swimlane changes.

Declaration
public EventCallback<DiagramObjectCollection<Swimlane>> SwimlanesChanged { get; set; }
Property Value
Type Description
Microsoft.AspNetCore.Components.EventCallback<DiagramObjectCollection<Swimlane>>

An event callback function.

TargetPointChanged

Triggers when the connector’s target point is changed.

Declaration
public EventCallback<EndPointChangedEventArgs> TargetPointChanged { get; set; }
Property Value
Type Description
Microsoft.AspNetCore.Components.EventCallback<EndPointChangedEventArgs>

An event callback function.
Examples
<SfDiagramComponent Width="1000px" Height="1000px" TargetPointChanged="@OnTargetPointChanged">
</SfDiagramComponent>
private void OnTargetPointChanged(EndPointChangedEventArgs args)
{
    if (args.Connector != null)
    {
        Connector connector = args.Connector;
    }
}

TargetPointChanging

Triggers while dragging the connector’s target end in the diagram.

Declaration
public EventCallback<EndPointChangingEventArgs> TargetPointChanging { get; set; }
Property Value
Type Description
Microsoft.AspNetCore.Components.EventCallback<EndPointChangingEventArgs>

An event callback function.
Examples
<SfDiagramComponent Width="1000px" Height="1000px" TargetPointChanging="@OnTargetPointChanging">
</SfDiagramComponent>
private void OnTargetPointChanging(EndPointChangingEventArgs args)
{
    if (args.Connector != null)
    {
        Connector connector = args.Connector;
    }
}

TextChanged

Triggers when the node’s/connector's label is changed in the diagram.

Declaration
public EventCallback<TextChangeEventArgs> TextChanged { get; set; }
Property Value
Type Description
Microsoft.AspNetCore.Components.EventCallback<TextChangeEventArgs>

An event callback function.
Examples
<SfDiagramComponent  TextChanged="@textedit">
</SfDiagramComponent>
private void textedit(TextChangeEventArgs args)
{

}

TextChanging

An event that is raised when the node and connector's label is changing in the diagram.

Declaration
public EventCallback<TextChangeEventArgs> TextChanging { get; set; }
Property Value
Type Description
Microsoft.AspNetCore.Components.EventCallback<TextChangeEventArgs>

An event callback function.
Examples
<SfDiagramComponent  TextChanging="@OnLabelTextChanging">
</SfDiagramComponent>
private void OnLabelTextChanging(TextChangeEventArgs args)
{
   args.Cancel = true;
}

Tooltip

Gets or set the value of tooltip that should be shown when the mouse hovers over a node or connector. For nodes and connectors, the diagram tooltip is enabled when the constraints values are set to "InheritTooltip".

Declaration
public DiagramTooltip Tooltip { get; set; }
Property Value
Type Description
DiagramTooltip

The default value will be null
Examples
  

<SfDiagramComponent @ref="diagram” Width="1000px" Height="500px" Tooltip="@tooltip" @bind- Nodes="@nodes"></SfDiagramComponent>  
@code{  
SfDiagramComponent diagram;  
DiagramObjectCollection<Node> nodes = new DiagramObjectCollection<Node>();  
DiagramObjectCollection<Connector> connectors= new DiagramObjectCollection<Connector>(); 
DiagramTooltip tooltip = new DiagramTooltip(){Content="Diagram Tooltip"};
protected override void OnInitialized()  
{  
    Node node1 = new Node() { ID = "node1", OffsetX = 100, OffsetY = 100, Tooltip=new DiagramTooltip(){Content="node1"} };  
    nodes.Add(node1);  
}  
}

Width

Defines the width of the diagram.

Declaration
public string Width { get; set; }
Property Value
Type Description
System.String

Accepts the string value, The default value is 100%
Examples
<SfDiagramComponent Width="900px" Connectors="@connectors">
</SfDiagramComponent>

WidthChanged

Specifies the callback to trigger when the width changes.

Declaration
public EventCallback<string> WidthChanged { get; set; }
Property Value
Type Description
Microsoft.AspNetCore.Components.EventCallback<System.String>

An event callback function.

Methods

AddChild(NodeGroup, NodeBase)

This method is used for adding child to the selected group node.

Declaration
public Task AddChild(NodeGroup group, NodeBase child)
Parameters
Type Name Description
NodeGroup group

it contains group node
NodeBase child

it contains node/connector
Returns
Type
System.Threading.Tasks.Task

AddChildAsync(NodeGroup, NodeBase)

This method is used for adding child to the selected group node.

Declaration
public Task AddChildAsync(NodeGroup group, NodeBase child)
Parameters
Type Name Description
NodeGroup group

it contains group node
NodeBase child

it contains node/connector
Returns
Type
System.Threading.Tasks.Task

AddDiagramElements(DiagramObjectCollection<NodeBase>)

It is used for adding nodes collection to the diagram.

Declaration
public Task AddDiagramElements(DiagramObjectCollection<NodeBase> items)
Parameters
Type Name Description
DiagramObjectCollection<NodeBase> items

An DiagramObjectCollection that contain Node and connectors and group
Returns
Type Description
System.Threading.Tasks.Task

Task

AddDiagramElementsAsync(DiagramObjectCollection<NodeBase>)

It is used for adding nodes collection to the diagram.

Declaration
public Task AddDiagramElementsAsync(DiagramObjectCollection<NodeBase> items)
Parameters
Type Name Description
DiagramObjectCollection<NodeBase> items

An DiagramObjectCollection that contain Node and connectors and group
Returns
Type Description
System.Threading.Tasks.Task

Task

AddHistoryEntry(HistoryEntryBase)

Adds the given change in the diagram control to the track

Declaration
public void AddHistoryEntry(HistoryEntryBase entry)
Parameters
Type Name Description
HistoryEntryBase entry

Defines the entry/information about a change in diagram

BeginUpdate()

This method locks the diagram to prevent its visual updates until the EndUpdate() method is called.

Declaration
public void BeginUpdate()

BringForward()

Visually moves the selected Node, Connector and Group over the nearest overlapping Node or connector or group.

Declaration
public void BringForward()
Examples
 

<SfDiagramComponent @ref="diagram"  Width="1000px" Height="500px" @bind-Nodes="@nodes"></SfDiagramComponent> 
@code{ 
SfDiagramComponent diagram; 
DiagramObjectCollection<Node> nodes = new DiagramObjectCollection<Node>(); 
protected override void OnInitialized() 
{ 
    Node node1 = new Node() { ID = "node1", Width = 90, Height = 60, OffsetX = 100, OffsetY = 100}; 
    nodes.Add(node1); 
    Node node2 = new Node() { ID = "node2", Width = 90, Height = 60, OffsetX = 240, OffsetY = 100 }; 
    nodes.Add(node2); 
    Node node3 = new Node() { ID = "node3", Width = 90, Height = 60, OffsetX = 160, OffsetY = 90 }; 
    nodes.Add(node3); 
} 
private void BringForward() 
{ 
    diagram.Select(new ObservableCollection<IDiagramObject>() { diagram.Nodes[0] });     
    diagram.BringForward(); 
} 
}

BringIntoCenter(DiagramRect)

Bring the specified bounds into center of the view port of the diagram.

Declaration
public void BringIntoCenter(DiagramRect bound)
Parameters
Type Name Description
DiagramRect bound

Specified size of the element that should also be brought into center of the viewport.
Examples
<SfDiagramComponent @ref="diagram" Width="1000px" Height="500px" @bind-Nodes="@nodes"><PageSettings @bind-Orientation="@pageOrientation" @bind-MultiplePage="@IsMultiplePage"></PageSettings>
</SfDiagramComponent>
@code{
        SfDiagramComponent diagram;

       DiagramObjectCollection<Node> nodes;     
       DiagramObjectCollection<Connector> connectors;
       Create a node with out of the view port to check bring into view and bring center functionalities
       protected override void OnInitialized()
       {
           nodes = new DiagramObjectCollection<Node>(){
           new Node { ID = "node1", Width = 150, Height = 100, OffsetX = 1100, OffsetY = 900, Annotations =
           new DiagramObjectCollection<ShapeAnnotation>() { new ShapeAnnotation() { Content = "Node1" } } },
       };
       }
       Brings the specified bounds into the center of the view port of the diagram
       private void BringIntoCenter()
       {
       DiagramRect bound = new DiagramRect(950,800,500,500);
       diagram.BringIntoCenter(bound);
       }
       }

BringIntoView(DiagramRect)

Bring the specified bounds into the view port of the diagram.

Declaration
public void BringIntoView(DiagramRect bounds)
Parameters
Type Name Description
DiagramRect bounds

Specified size of the element that should also be brought into view.
Examples
<SfDiagramComponent @ref="diagram" Width="1000px" Height="500px" @bind-Nodes="@nodes"><PageSettings @bind-Orientation="@pageOrientation" @bind-MultiplePage="@IsMultiplePage"></PageSettings>
</SfDiagramComponent>
@code{
        SfDiagramComponent diagram;

       DiagramObjectCollection<Node> nodes;     
       DiagramObjectCollection<Connector> connectors;
       Create a node with out of the view port to check bring into view and bring center functionalities
       protected override void OnInitialized()
       {
           nodes = new DiagramObjectCollection<Node>(){
           new Node { ID = "node1", Width = 150, Height = 100, OffsetX = 1100, OffsetY = 900, Annotations =
           new DiagramObjectCollection<ShapeAnnotation>() { new ShapeAnnotation() { Content = "Node1" } } },
       };
       }
       Brings the specified bounds into the view port of the diagram
       private void BringIntoView()
       {
       DiagramRect bounds = new DiagramRect(950,800,500,500);
       diagram.BringIntoView(bounds);
       }
       }

BringToFront()

Visually brings the selected Node, connector and group to the front over all other overlapped Nodes, Connectors and Groups.

Declaration
public void BringToFront()
Examples
 

<SfDiagramComponent @ref="diagram"  Width="1000px" Height="500px" @bind-Nodes="@nodes"></SfDiagramComponent> 
@code{ 
SfDiagramComponent diagram; 
DiagramObjectCollection<Node> nodes = new DiagramObjectCollection<Node>(); 
protected override void OnInitialized() 
{ 
    Node node1 = new Node() { ID = "node1", Width = 90, Height = 60, OffsetX = 100,     OffsetY = 100}; 
    nodes.Add(node1); 
    Node node2 = new Node() { ID = "node2", Width = 90, Height = 60, OffsetX = 240, OffsetY = 100 }; 
    nodes.Add(node2);
    Node node3 = new Node() { ID = "node3", Width = 90, Height = 60, OffsetX = 160, OffsetY = 90 }; 
    nodes.Add(node3);             
} 
private void BringToFront() 
{ 
    diagram.Select(new ObservableCollection<IDiagramObject>() { diagram.Nodes[0] });     
    diagram.BringToFront(); 
} 
}

BuildRenderTree(RenderTreeBuilder)

Declaration
protected override void BuildRenderTree(RenderTreeBuilder __builder)
Parameters
Type Name Description
Microsoft.AspNetCore.Components.Rendering.RenderTreeBuilder __builder

Clear()

Clear all nodes, connectors and groups in the diagram

Declaration
public void Clear()

ClearHistory()

This method is used to clear the history.

Declaration
public void ClearHistory()

ClearSelection()

It allows the user to clear the selected nodes/connectors in the diagram.

Declaration
public void ClearSelection()

Clone()

This method helps to clone the diagram.

Declaration
public virtual object Clone()
Returns
Type Description
System.Object

Diagram

Copy()

It copies the selected nodes/connectors to the clipboard.

Declaration
public void Copy()
Examples
<SfDiagramComponent @ref="diagram">
</SfDiagramComponent>
@code
{
   SfDiagramComponent diagram;
    private void copy()
    {
     diagram.Copy(); 

    }
}

Cut()

It removes the selected nodes/connectors and moves them to the clipboard.

Declaration
public void Cut()
Examples
<SfDiagramComponent @ref="diagram">
</SfDiagramComponent>
@code
{
   SfDiagramComponent diagram;
    private void Cut()
    {
     diagram.Cut(); 

    }
}

Delete(DiagramObjectCollection<NodeBase>)

Deletes diagram elements. When diagram elements are not passed, then the selected diagram elements will be deleted.

Declaration
public void Delete(DiagramObjectCollection<NodeBase> DiagramElements = null)
Parameters
Type Name Description
DiagramObjectCollection<NodeBase> DiagramElements

Specifies the collections of diagram elements (nodes, connectors and groups) to be deleted.
Remarks

When this method is called without any parameter or with null parameter, then the selected diagram elements are deleted. Otherwise, collections of diagram elements passed in the parameter alone will be deleted. When a diagram is created by binding external data source, then you can delete elements by directly removing data objects in the data source itself. Deleting ram elements using this method will not update in the data source collection.

Examples
 

<SfDiagramComponent @ref="@Diagram" Width="1200px" Height="600px" Nodes="@nodes" Connectors="@connectors" > 
</SfDiagramComponent> 
@code 
{ 
private void Delete() 
{ 
var<NodeBase> diagramelements=new DiagramObjectCollection<NodeBase>(); 
diagramelements.Add(Diagram.Nodes[0]); 
diagramelements.Add(Diagram.Connectors[0]); 
diagram.Delete(diagramelements); 
} 
}

DeleteDataAsync(String, Object, String, Query)

Deletes data from the data source asynchronously based on the specified key field and value. This operation modifies the data set by removing the identified records.

Declaration
public Task DeleteDataAsync(string keyField, object value, string tableName = null, Query query = null)
Parameters
Type Name Description
System.String keyField

The key field to identify the data to delete.
System.Object value

The value of the key field to identify the data to delete.
System.String tableName

The name of the table from which the data will be deleted. Optional.
Query query

The query which can be executed against data source. Optional.
Returns
Type Description
System.Threading.Tasks.Task

A task that represents the asynchronous operation.
Examples
  

<button class="btn btn-primary" @onclick="Delete">Delete</button>
<SfDiagramComponent ID="diagram" @ref="@diagram" Width="100%" Height="690px" ConnectorCreating="@ConnectorCreating" NodeCreating="@NodeCreating">
    <DataSourceSettings ID = "EmployeeID" ParentID="ReportsTo">
        <SfDataManager Url = "api/Data" Adaptor="Syncfusion.Blazor.Adaptors.WebApiAdaptor"></SfDataManager>
    </DataSourceSettings>
    <Layout Type = "Syncfusion.Blazor.Diagram.LayoutType.HierarchicalTree" VerticalSpacing="75" HorizontalSpacing="75" GetLayoutInfo="GetLayoutInfo"></Layout>
</SfDiagramComponent>
@code{  
SfDiagramComponent diagram;       
public async void Delete()
{
    await diagram.DeleteDataAsync("EmployeeID", 6);
}
}

DoLayout()

It allows the user to refresh the layout at runtime.

Declaration
public Task DoLayout()
Returns
Type Description
System.Threading.Tasks.Task

Task

DoLayoutAsync()

It allows the user to refresh the layout at runtime.

Declaration
public Task DoLayoutAsync()
Returns
Type Description
System.Threading.Tasks.Task

Task

Drag(IDiagramObject, Double, Double)

It drags the given object by the specified pixels.

Declaration
public void Drag(IDiagramObject obj, double tx, double ty)
Parameters
Type Name Description
IDiagramObject obj

Defines the nodes/connectors to be dragged
System.Double tx

Defines the distance by which the given objects have to be horizontally moved
System.Double ty

Defines the distance by which the given objects have to be vertically moved

EndGroupAction()

It closes the grouping of actions that will be undone/restored as a whole.

Declaration
public void EndGroupAction()

EndUpdate()

This method unlocks the diagram after a call to the BeginUpdate(Boolean) method and causes an immediate visual update.

Declaration
public Task EndUpdate()
Returns
Type Description
System.Threading.Tasks.Task

Task

EndUpdateAsync()

This method unlocks the diagram after a call to the BeginUpdate(Boolean) method and causes an immediate visual update.

Declaration
public Task EndUpdateAsync()
Returns
Type Description
System.Threading.Tasks.Task

Task

ExportAsync(DiagramExportFormat, DiagramExportSettings)

Exports the diagram to base64 string. Exported string can be returned.

Declaration
public Task<string[]> ExportAsync(DiagramExportFormat fileFormat, DiagramExportSettings exportSettings)
Parameters
Type Name Description
DiagramExportFormat fileFormat

Specifies the export type for the rendered diagram.
DiagramExportSettings exportSettings

Specifies the configutation settings to export the diagram
Returns
Type Description
System.Threading.Tasks.Task<System.String[]>

The exported diagram as base64 string of the specified file type
Examples
  DiagramExportSettings export = new DiagramExportSettings();
  export.Region = DiagramPrintExportRegion.PageSettings;
  export.PageWidth = 816;
  export.PageHeight = 1054;
  export.Orientation = PageOrientation.Landscape;
  export.FitToPage = true;
  export.Margin = new DiagramThickness() { Left = 10, Top = 10, Right = 10, Bottom = 10 };
  export.ClipBounds = new DiagramRect() { X = 0, Y = 0, Width = 0, Height = 0 };
  //To export the diagram
   string[] base64 = await diagram.ExportAsync(DiagramExportFormat.PNG, export);

ExportAsync(String, DiagramExportFormat, DiagramExportSettings)

Exports the rendered diagram to various file types. It supports jpeg, png, svg ,bmp and pdf file types. Exported file will get download at client machine.

Declaration
public Task ExportAsync(string fileName, DiagramExportFormat fileFormat, DiagramExportSettings exportSettings)
Parameters
Type Name Description
System.String fileName

Specifies the filename without extension.
DiagramExportFormat fileFormat

Specifies the export type for the rendered diagram
DiagramExportSettings exportSettings

Specifies the configutation settings to export the diagram
Returns
Type
System.Threading.Tasks.Task
Remarks

Diagram supports jepg, png and svg file types.

Examples
  DiagramExportSettings export = new DiagramExportSettings();
  export.Region = DiagramPrintExportRegion.PageSettings;
  export.PageWidth = 816;
  export.PageHeight = 1054;
  export.Orientation = PageOrientation.Landscape;
  export.FitToPage = true;
  export.Margin = new DiagramThickness() { Left = 10, Top = 10, Right = 10, Bottom = 10 };
  export.ClipBounds = new DiagramRect() { X = 0, Y = 0, Width = 0, Height = 0 };
  //To export the diagram
  await diagram.ExportAsync("diagram", format, print);

FitToPage(FitOptions)

Fit the diagram pages based on FitOptions

Declaration
public void FitToPage(FitOptions options = null)
Parameters
Type Name Description
FitOptions options

Specifies the configuration settings to fit the diagram
Examples
<SfDiagramComponent Width="1000px" Height="1000px">
</SfDiagramComponent>
@code
{
   SfDiagramComponent Diagram;
   FitOptions Options = new FitOptions(){
   Mode = FitMode.Both,
   Region = DiagramRegion.PageSetting,

   Diagram.FitToPage(Options);
}

GetObject(String)

This method returns the object based on the given id.

Declaration
public IDiagramObject GetObject(string name)
Parameters
Type Name Description
System.String name

An string that contain id of node/connector.
Returns
Type Description
IDiagramObject

It return IDiagramObject

GetPageBounds(Nullable<Double>, Nullable<Double>)

Represents a method used to get the bounds of the page.

Declaration
public DiagramRect GetPageBounds(Nullable<double> originX = null, Nullable<double> originY = null)
Parameters
Type Name Description
System.Nullable<System.Double> originX

it store page bounds height value
System.Nullable<System.Double> originY

it store page bounds width value
Returns
Type Description
DiagramRect

It returns DiagramRect

Group()

Group the selected nodes and connectors in the diagram.

Declaration
public void Group()

HideTooltip(NodeBase)

The method is used to hide the tooltip in the tooltip open mode as in custom.

Declaration
public void HideTooltip(NodeBase element)
Parameters
Type Name Description
NodeBase element
Examples
  

<SfDiagramComponent @ref="diagram” Width="1000px" Height="500px" @bind-  Nodes="@nodes"></SfDiagramComponent>  
@code{  
SfDiagramComponent diagram;  
DiagramObjectCollection<Node> nodes = new DiagramObjectCollection<Node>();  
DiagramObjectCollection<Connector> nodes = new DiagramObjectCollection<Connector>();  
protected override void OnInitialized()  
{  
    Node node1 = new Node() { ID = "node1", OffsetX = 100, OffsetY = 100, Tooltip=new DiagramTooltip(){Content="node1", OpensOn = “Auto”,} };  
    nodes.Add(node1);  
    Node node2 = new Node() { ID = "node2", OffsetX = 240, OffsetY = 100, Tooltip=new DiagramTooltip(){Content="node2", OpensOn = “Custom”,} };  
    nodes.Add(node2);  
    Connector connector1=new Connector{ ID="Connector1" , Tooltip=new DiagramTooltip(){Content="connector1"} }
}  
public async void HideTooltip()
{
   await diagram.HideTooltipAsync(diagram.nodes[1] as NodeBase);
}
}

HideTooltipAsync(IDiagramObject)

The method is used to hide the tooltip in the tooltip open mode as in custom.

Declaration
public Task HideTooltipAsync(IDiagramObject element)
Parameters
Type Name Description
IDiagramObject element
Returns
Type
System.Threading.Tasks.Task
Examples
  

<SfDiagramComponent @ref="diagram” Width="1000px" Height="500px" @bind-  Nodes="@nodes"></SfDiagramComponent>  
@code{  
SfDiagramComponent diagram;  
DiagramObjectCollection<Node> nodes = new DiagramObjectCollection<Node>();  
DiagramObjectCollection<Connector> nodes = new DiagramObjectCollection<Connector>();  
protected override void OnInitialized()  
{  
    Node node1 = new Node() { ID = "node1", OffsetX = 100, OffsetY = 100, Tooltip=new DiagramTooltip(){Content="node1", OpensOn = “Auto”,} };  
    nodes.Add(node1);  
    Node node2 = new Node() { ID = "node2", OffsetX = 240, OffsetY = 100, Tooltip=new DiagramTooltip(){Content="node2", OpensOn = “Custom”,} };  
    nodes.Add(node2);  
    Connector connector1=new Connector{ ID="Connector1" , Tooltip=new DiagramTooltip(){Content="connector1"} }
}  
public async void HideTooltip()
{
   await diagram.HideTooltipAsync(diagram.nodes[1] as NodeBase);
}
}

InsertDataAsync(Object, String, Query, Int32)

Inserts data into the data source asynchronously, allowing users to add new records to a specified table. This operation modifies the data set by expanding it with new entries.

Declaration
public Task InsertDataAsync(object data, string tableName = null, Query query = null, int position = 0)
Parameters
Type Name Description
System.Object data

The data to insert.
System.String tableName

The name of the table where the data will be inserted. Optional.
Query query

The query which can be executed against data source. Optional.
System.Int32 position

The position at which to insert the data. Optional.
Returns
Type Description
System.Threading.Tasks.Task

A task that represents the asynchronous operation.
Examples
  

<button class="btn btn-primary" @onclick="Insert">Insert</button>
<SfDiagramComponent ID="diagram" @ref="@diagram" Width="100%" Height="690px" ConnectorCreating="@ConnectorCreating" NodeCreating="@NodeCreating">
    <DataSourceSettings ID = "EmployeeID" ParentID="ReportsTo">
        <SfDataManager Url = "api/Data" Adaptor="Syncfusion.Blazor.Adaptors.WebApiAdaptor"></SfDataManager>
    </DataSourceSettings>
    <Layout Type = "Syncfusion.Blazor.Diagram.LayoutType.HierarchicalTree" VerticalSpacing="75" HorizontalSpacing="75" GetLayoutInfo="GetLayoutInfo"></Layout>
</SfDiagramComponent>
@code{  
SfDiagramComponent diagram;       
public async void Insert()
{
    EmployeeDetails employeeDetails = new EmployeeDetails()
    {
        EmployeeID = 6,
        Name = "Michael",
        Designation = "Team Lead",
        ReportsTo = "5",
        Colour = "Orange"
    };
    await diagram.InsertDataAsync(employeeDetails);

}
}

LoadDiagram(String, Boolean)

Used to generate a SfDiagramComponent from the given json data.

Declaration
public Task LoadDiagram(string data, bool isClassicData = false)
Parameters
Type Name Description
System.String data

Json data of the SfDiagramComponent or "Syncfusion.Blazor.Diagrams.SfDiagram".
System.Boolean isClassicData

true if the json data is "Syncfusion.Blazor.Diagrams.SfDiagram"; otherwise, false.
Returns
Type Description
System.Threading.Tasks.Task

Diagram

LoadDiagramAsync(String, Boolean)

Used to generate a SfDiagramComponent from the given json data.

Declaration
public Task LoadDiagramAsync(string data, bool isClassicData = false)
Parameters
Type Name Description
System.String data

Json data of the SfDiagramComponent or "Syncfusion.Blazor.Diagrams.SfDiagram".
System.Boolean isClassicData

true if the json data is "Syncfusion.Blazor.Diagrams.SfDiagram"; otherwise, false.
Returns
Type Description
System.Threading.Tasks.Task

Diagram

LoadDiagramFromMermaidAsync(String)

Loads and generates a SfDiagramComponent from the given Mermaid text data.

Declaration
public Task LoadDiagramFromMermaidAsync(string mermaidText)
Parameters
Type Name Description
System.String mermaidText

The Mermaid text data used to generate the SfDiagramComponent.
Returns
Type Description
System.Threading.Tasks.Task

A System.Threading.Tasks.Task representing the asynchronous operation of loading the diagram.
Remarks

This method is supported only for diagrams that use the MindMap or Flowchart layout types.

Examples
The following example demonstrates how to use the method to load a diagram from Mermaid text format and save it. 
<SfDiagramComponent @ref="diagram" Width="100%" Height="800px" Nodes="@nodes" Connectors="@connectors">
    <Layout Type="LayoutType.MindMap">
    </Layout>
</SfDiagramComponent>
@code {
    string data;
    private void SaveAsMermaid()
    {
        data = diagram.SaveDiagramAsMermaid();
    }
    private async void LoadMermaidDiagram()
    {
        await diagram.LoadDiagramFromMermaidAsync(data);
    }
}

Nudge(Direction, Nullable<Int32>)

Repositions the selected object by the specified delta in the given direction.

Declaration
public void Nudge(Direction direction, Nullable<int> nudgeDelta = null)
Parameters
Type Name Description
Direction direction

Nudge command moves the selected elements towards the specified Direction.
System.Nullable<System.Int32> nudgeDelta

The amount in delta by which to reposition the selected objects.
Remarks

The nudge commands move the selected elements towards up, down, left, or right by 1 pixel, by default.

Examples
private void Nudge()
 {
   //Repositions the selected objects by 50 towards down direction.
   diagram.Nudge(NudgeDirection.Down, 50);
 }

OnAfterRenderAsync(Boolean)

Method invoked after each time the component has been rendered.

Declaration
protected override Task OnAfterRenderAsync(bool firstRender)
Parameters
Type Name Description
System.Boolean firstRender

Set to true for the first time component rendering; otherwise gets false.
Returns
Type Description
System.Threading.Tasks.Task

A System.Threading.Tasks.Task representing any asynchronous operation.
Overrides

OnInitializedAsync()

Method invoked when the component is ready to start.

Declaration
protected override Task OnInitializedAsync()
Returns
Type Description
System.Threading.Tasks.Task

A System.Threading.Tasks.Task representing any asynchronous operation.
Overrides

OnParametersSetAsync()

Method invoked when any changes in component state occur.

Declaration
protected override Task OnParametersSetAsync()
Returns
Type Description
System.Threading.Tasks.Task

="Task".

OnPropertyChanged(String, Object, Object, IDiagramObject)

Allows the user to update all the properties.

Declaration
public void OnPropertyChanged(string propertyName, object newVal, object oldVal, IDiagramObject parent)
Parameters
Type Name Description
System.String propertyName

string that contains the propertyname.
System.Object newVal

An object that contain newvalue, which means new value of property
System.Object oldVal

An object that contain oldvalue, which means old value of property
IDiagramObject parent

An IDiagramObject that contain IDiagramObject

Pan(Double, Double, DiagramPoint)

It is used to pan the diagram control to the horizontal and vertical offsets.

Declaration
public void Pan(double horizontalOffset, double verticalOffset, DiagramPoint focusedPoint = null)
Parameters
Type Name Description
System.Double horizontalOffset

Defines the horizontal distance to which the diagram has to be scrolled
System.Double verticalOffset

Defines the vertical distance to which the diagram has to be scrolled
DiagramPoint focusedPoint

Provide the focusedPoint value

Paste(DiagramObjectCollection<NodeBase>)

Pastes diagram elements which are clones of existing elements.

Declaration
public void Paste(DiagramObjectCollection<NodeBase> DiagramElements = null)
Parameters
Type Name Description
DiagramObjectCollection<NodeBase> DiagramElements

The collection of diagram elements to perform paste action. If null or empty, the cloned copy of elements from the internal clipboard are pasted.
Remarks

During copy or cut operation, the diagram keeps cloned elements in its internal clipboard. If this method is called without any arguments, the diagram clipboard elements are pasted onto the diagram after a copy (Ctrl+C) or cut (Ctrl+X) operation. Otherwise, the collection of diagram elements passed in the argument, which are clones of existing elements, are pasted.

Examples
<SfDiagramComponent @ref="diagram">
</SfDiagramComponent>
@code
{
    SfDiagramComponent diagram;
    private void Paste()
    {
        DiagramObjectCollection<NodeBase> nodes = new DiagramObjectCollection<NodeBase>();;
        nodes.add(diagram.Nodes[0].Clone());
        nodes.add(diagram.Nodes[1].Clone());
        diagram.Paste(nodes); 
    }
}

PrintAsync(DiagramPrintSettings)

Prints the diagram pages based on DiagramPrintSettings.

Declaration
public Task PrintAsync(DiagramPrintSettings printSettings)
Parameters
Type Name Description
DiagramPrintSettings printSettings

Specifies the configuration settings to print the diagram.
Returns
Type Description
System.Threading.Tasks.Task

The System.Threading.Tasks.Task that completes when the diagram is sent to browser print preview window for printing.
Examples
 DiagramPrintSettings print = new DiagramPrintSettings();
 print.PageWidth = 816;
 print.PageHeight = 1054;
 print.Region = DiagramPrintExportRegion.PageSettings;
 print.FitToPage = true;
 print.Orientation = PageOrientation.Landscape;
 print.Margin = new DiagramThickness() { Left = 10, Top = 10, Right = 10, Bottom = 10 };
 await diagram.PrintAsync(print);

ReadDataAsync(Query)

Reads data from the data source based on the specified query. If no query is specified, a default query will be used to fetch the data.

Declaration
public Task<IEnumerable<object>> ReadDataAsync(Query query = null)
Parameters
Type Name Description
Query query

The query to fetch the data.
Returns
Type Description
System.Threading.Tasks.Task<System.Collections.Generic.IEnumerable<System.Object>>

A task that represents the asynchronous operation. The task result contains an IEnumerable of objects from the data source.
Examples
  

<button class="btn btn-primary" @onclick="Read">Read</button>
<SfDiagramComponent ID="diagram" @ref="@diagram" Width="100%" Height="690px" ConnectorCreating="@ConnectorCreating" NodeCreating="@NodeCreating">
    <DataSourceSettings ID = "EmployeeID" ParentID="ReportsTo">
        <SfDataManager Url = "api/Data" Adaptor="Syncfusion.Blazor.Adaptors.WebApiAdaptor"></SfDataManager>
    </DataSourceSettings>
    <Layout Type = "Syncfusion.Blazor.Diagram.LayoutType.HierarchicalTree" VerticalSpacing="75" HorizontalSpacing="75" GetLayoutInfo="GetLayoutInfo"></Layout>
</SfDiagramComponent>
@code{  
SfDiagramComponent diagram;       
public async void Read()
{
    List<object> Details = (List<object>)await diagram.ReadDataAsync();
}
}

Redo()

It is used to restore the last undo action.

Declaration
public void Redo()

RefreshDataSource()

This method will refresh the layout based on the changes in the data source.

Declaration
public Task RefreshDataSource()
Returns
Type Description
System.Threading.Tasks.Task

RefreshDataSource

RefreshDataSourceAsync()

This method will refresh the layout based on the changes in the data source.

Declaration
public Task RefreshDataSourceAsync()
Returns
Type Description
System.Threading.Tasks.Task

RefreshDataSource

RemoveChild(NodeGroup, NodeBase)

It is used to remove the child from the selected group node.

Declaration
public void RemoveChild(NodeGroup group, NodeBase child)
Parameters
Type Name Description
NodeGroup group

It contains group node
NodeBase child

It contains node/connector

ResetZoom()

Clears all the panning operations and removes all the panning relations of diagram control. Restores the panning position to origin of the diagram control by zoom level of One.

Declaration
public void ResetZoom()
Examples
<SfDiagramComponent @ref = "diagram" Width="600px" Height="600px" Nodes="nodes">
<SnapSettings Constraints = "@SnapConstraints.ShowLines" ></ SnapSettings >
</ SfDiagramComponent >
@code{
   protected override void OnInitialized()
   {
       Node node = new Node()
       {
           ID = "node6",
           Width = 50,
           Height = 50,
           OffsetX = 150,
           OffsetY = 100,
       };
       Node node2 = new Node()
       {
           ID = "node7",
           Width = 50,
           Height = 50,
           OffsetX = 150,
           OffsetY = 170
      };
       nodes.Add(node);
       nodes.Add(node2);
   }
   public void ZoomIn()
   {
       diagram.Zoom(1.2, new DiagramPoint { X = 100, Y = 100 });
   }
   public void ZoomOut()
   {
       diagram.Zoom(1 / 1.2, new DiagramPoint { X = 100, Y = 100 });
   }
   private void ResetZoom()
   {
       diagram.ResetZoom();
   }
}

Rotate(IDiagramObject, Double, DiagramPoint)

Rotates the given nodes/connectors at the given angle.

Declaration
public bool Rotate(IDiagramObject obj, double angle, DiagramPoint pivot = null)
Parameters
Type Name Description
IDiagramObject obj

Defines the objects to be rotated
System.Double angle

Defines the angle by which the objects have to be rotated
DiagramPoint pivot

Defines the reference point with reference to which the objects have to be rotated
Returns
Type
System.Boolean

SaveDiagram()

Serializes the diagram control as a string.

Declaration
public string SaveDiagram()
Returns
Type Description
System.String

jsonData

SaveDiagramAsMermaid()

Serializes the current diagram into Mermaid text format.

Declaration
public string SaveDiagramAsMermaid()
Returns
Type Description
System.String

A string representation of the diagram in Mermaid text format.
Remarks

This method is supported only for diagrams that use the MindMap or Flowchart layout types.

Examples
The following example demonstrates how to use the method to save a diagram and then load it using Mermaid text format. 
<SfDiagramComponent @ref="diagram" Width="100%" Height="800px" Nodes="@nodes" Connectors="@connectors">
    <Layout Type="LayoutType.MindMap">
    </Layout>
</SfDiagramComponent>
@code {
    string data;
    private void SaveAsMermaid()
    {
        data = diagram.SaveDiagramAsMermaid();
    }
    private async void LoadMermaidDiagram()
    {
        await diagram.LoadDiagramFromMermaidAsync(data);
    }
}

Scale(IDiagramObject, Double, Double, DiagramPoint)

Scales the given objects by the given ratio.

Declaration
public bool Scale(IDiagramObject obj, double sx, double sy, DiagramPoint pivot)
Parameters
Type Name Description
IDiagramObject obj

Defines the objects to be resized
System.Double sx

Defines the ratio by which the objects have to be horizontally scaled
System.Double sy

efines the ratio by which the objects have to be vertically scaled
DiagramPoint pivot

Defines the reference point with respect to which the objects will be resized
Returns
Type Description
System.Boolean

checkBoundaryConstraints

Select(ObservableCollection<IDiagramObject>, Nullable<Boolean>)

Selects the given collection of objects.

Declaration
public void Select(ObservableCollection<IDiagramObject> objects, Nullable<bool> multipleSelection)
Parameters
Type Name Description
System.Collections.ObjectModel.ObservableCollection<IDiagramObject> objects

Defines the collection of nodes and connectors to be selected
System.Nullable<System.Boolean> multipleSelection

Defines whether the existing selection has to be cleared or not

SelectAll()

Select all the objects.

Declaration
public void SelectAll()

SendBackward()

Visually moves the selected Node, connector and group behind the underlying Node or Connector or Group.

Declaration
public void SendBackward()
Examples
 

<SfDiagramComponent @ref="diagram"  Width="1000px" Height="500px" @bind-Nodes="@nodes"></SfDiagramComponent> 
@code{ 
SfDiagramComponent diagram; 
DiagramObjectCollection<Node> nodes = new DiagramObjectCollection<Node>(); 
protected override void OnInitialized() 
{ 
    Node node1 = new Node() { ID = "node1", Width = 90, Height = 60, OffsetX = 100,     OffsetY = 100}; 
    nodes.Add(node1); 
    Node node2 = new Node() { ID = "node2", Width = 90, Height = 60, OffsetX = 240, OffsetY = 100 }; 
    nodes.Add(node2); 
    Node node3 = new Node() { ID = "node3", Width = 90, Height = 60, OffsetX = 160, OffsetY = 90 }; 
    nodes.Add(node3); 
} 
private void SendBackward() 
{ 
    diagram.Select(new ObservableCollection<IDiagramObject>() { diagram.Nodes[2] });     
    diagram.SendBackward(); 
} 
}

SendToBack()

Visually moves the selected Node, connector and group behind all the other overlapped Nodes, Connectors and Group.

Declaration
public void SendToBack()
Examples
 

<SfDiagramComponent @ref="diagram"  Width="1000px" Height="500px" @bind-Nodes="@nodes"></SfDiagramComponent> 
@code { 
SfDiagramComponent diagram; 
DiagramObjectCollection<Node> nodes = new DiagramObjectCollection<Node>(); 
protected override void OnInitialized() 
{ 
    Node node1 = new Node() { ID = "node1", Width = 90, Height = 60, OffsetX = 100, OffsetY = 100}; 
    nodes.Add(node1); 
    Node node2 = new Node() { ID = "node2", Width = 90, Height = 60, OffsetX = 240, OffsetY = 100 }; 
    nodes.Add(node2); 
    Node node3 = new Node() { ID = "node3", Width = 90, Height = 60, OffsetX = 160, OffsetY = 90 }; 
    nodes.Add(node3); 
} 
private void SendToBack() 
{ 
    diagram.Select(new ObservableCollection<IDiagramObject>() { diagram.Nodes[2] });     
    diagram.SendToBack(); 
} 
}

SetAlign(AlignmentOptions, DiagramObjectCollection<NodeBase>, AlignmentMode)

Aligns the group of objects with reference to the first object in the group.

Declaration
public void SetAlign(AlignmentOptions alignmentOptions, DiagramObjectCollection<NodeBase> objects = null, AlignmentMode alignmentMode)
Parameters
Type Name Description
AlignmentOptions alignmentOptions

It define alignment options.
DiagramObjectCollection<NodeBase> objects

It defines nodes,connector collection
AlignmentMode alignmentMode

It define alignment mode.

SetDistribute(DistributeOptions, DiagramObjectCollection<NodeBase>)

It arranges the group of nodes/connectors at equal intervals within the group of nodes/connectors.

Declaration
public void SetDistribute(DistributeOptions option, DiagramObjectCollection<NodeBase> objects = null)
Parameters
Type Name Description
DistributeOptions option

It defines distribution options
DiagramObjectCollection<NodeBase> objects

It defines nodes,connector collection

SetSameSize(SizingMode, DiagramObjectCollection<NodeBase>)

Scales the given objects to the size of the first object in the group.

Declaration
public void SetSameSize(SizingMode sizingType, DiagramObjectCollection<NodeBase> objects = null)
Parameters
Type Name Description
SizingMode sizingType

It defines sizing mode
DiagramObjectCollection<NodeBase> objects

It defines nodes,connector collection

ShouldRender()

This method returns a boolean to indicate if a component’s UI can be rendered.

Declaration
protected override bool ShouldRender()
Returns
Type Description
System.Boolean

bool

ShowTooltip(NodeBase)

The method is used to show the tooltip in the tooltip open mode as in custom.

Declaration
public void ShowTooltip(NodeBase obj)
Parameters
Type Name Description
NodeBase obj
Examples
  

<SfDiagramComponent @ref="diagram” Width="1000px" Height="500px" @bind-  Nodes="@nodes"></SfDiagramComponent>  
@code{  
SfDiagramComponent diagram;  
DiagramObjectCollection<Node> nodes = new DiagramObjectCollection<Node>();  
DiagramObjectCollection<Connector> nodes = new DiagramObjectCollection<Connector>();  
protected override void OnInitialized()  
{  
    Node node1 = new Node() { ID = "node1",OffsetX = 100, OffsetY = 100, Tooltip=new DiagramTooltip(){Content="node1", OpensOn = “Auto”,} };  
    nodes.Add(node1);  
    Node node2 = new Node() { ID = "node2", OffsetX = 240, OffsetY = 100, Tooltip=new DiagramTooltip(){Content="node2", OpensOn = “Custom”,} };  
    nodes.Add(node2);  
    Connector connector1=new Connector{ ID="Connector1" , Tooltip=new DiagramTooltip(){Content="connector1"} }
}  
public async void ShowTooltip()
{
   await diagram.ShowTooltipAsync(diagram.nodes[1] as NodeBase);
}
}

ShowTooltipAsync(IDiagramObject)

The method is used to show the tooltip in the tooltip open mode as in custom.

Declaration
public Task ShowTooltipAsync(IDiagramObject obj)
Parameters
Type Name Description
IDiagramObject obj
Returns
Type
System.Threading.Tasks.Task
Examples
  

<SfDiagramComponent @ref="diagram” Width="1000px" Height="500px" @bind-  Nodes="@nodes"></SfDiagramComponent>  
@code{  
SfDiagramComponent diagram;  
DiagramObjectCollection<Node> nodes = new DiagramObjectCollection<Node>();  
DiagramObjectCollection<Connector> nodes = new DiagramObjectCollection<Connector>();  
protected override void OnInitialized()  
{  
    Node node1 = new Node() { ID = "node1",OffsetX = 100, OffsetY = 100, Tooltip=new DiagramTooltip(){Content="node1", OpensOn = “Auto”,} };  
    nodes.Add(node1);  
    Node node2 = new Node() { ID = "node2", OffsetX = 240, OffsetY = 100, Tooltip=new DiagramTooltip(){Content="node2", OpensOn = “Custom”,} };  
    nodes.Add(node2);  
    Connector connector1=new Connector{ ID="Connector1" , Tooltip=new DiagramTooltip(){Content="connector1"} }
}  
public async void ShowTooltip()
{
   await diagram.ShowTooltipAsync(diagram.nodes[1] as NodeBase);
}
}

StartGroupAction()

Starts the grouping of actions that will be undone/restored as a whole.

Declaration
public void StartGroupAction()

StartTextEdit(IDiagramObject, String)

Edits the annotation of the node/connector.

Declaration
public void StartTextEdit(IDiagramObject diagramObject, string id = null)
Parameters
Type Name Description
IDiagramObject diagramObject

Defines node/connector that contains the annotation to be edited
System.String id

Defines annotation id to be edited in the node

Undo()

Restores the last action that is performed.

Declaration
public void Undo()

Ungroup()

Ungroup the selected nodes and connectors in the diagram.

Declaration
public void Ungroup()

UnSelect(IDiagramObject)

Removes the given object from the selection list.

Declaration
public void UnSelect(IDiagramObject obj)
Parameters
Type Name Description
IDiagramObject obj

Removes the given object from selection list

UpdateDataAsync(String, Object, String, Query, Object, IDictionary<String, Object>)

Updates data in the data source asynchronously based on the specified key field and updated data. This operation modifies the data set by altering the identified records.

Declaration
public Task UpdateDataAsync(string keyField, object data, string tableName = null, Query query = null, object original = null, IDictionary<string, object> updateProperties = null)
Parameters
Type Name Description
System.String keyField

The key field to identify the data to update.
System.Object data

The updated data.
System.String tableName

The name of the table where the data will be updated. Optional.
Query query

The query which can be executed against data source. Optional.
System.Object original

The original data. Uses this original data for sending changed items alone to the server. Optional.
System.Collections.Generic.IDictionary<System.String, System.Object> updateProperties

The properties to update. Optional.
Returns
Type Description
System.Threading.Tasks.Task

A task that represents the asynchronous operation.
Examples
  

<button class="btn btn-primary" @onclick="Update">Update</button>
<SfDiagramComponent ID="diagram" @ref="@diagram" Width="100%" Height="690px" ConnectorCreating="@ConnectorCreating" NodeCreating="@NodeCreating">
    <DataSourceSettings ID = "EmployeeID" ParentID="ReportsTo">
        <SfDataManager Url = "api/Data" Adaptor="Syncfusion.Blazor.Adaptors.WebApiAdaptor"></SfDataManager>
    </DataSourceSettings>
    <Layout Type = "Syncfusion.Blazor.Diagram.LayoutType.HierarchicalTree" VerticalSpacing="75" HorizontalSpacing="75" GetLayoutInfo="GetLayoutInfo"></Layout>
</SfDiagramComponent>
@code{  
SfDiagramComponent diagram;       
public async void Update()
{
    EmployeeDetails employeeDetails = new EmployeeDetails()
    {
        EmployeeID = 6,
        Name = "Michael",
        Designation = "Product Manager",
        ReportsTo = "1",
        Colour = "Green"
    };
    await diagram.UpdateDataAsync("EmployeeID", employeeDetails);
}
}

Zoom(Double, DiagramPoint)

Allows the user to zoom in or zoom out.

Declaration
public void Zoom(double factor, DiagramPoint focusPoint)
Parameters
Type Name Description
System.Double factor

Defines the factor by which the diagram is zoomed
DiagramPoint focusPoint

Defines the point with respect to which the diagram has to be zoomed

Implements

System.ICloneable