Migrating from SfDiagram(Classic) to SfDiagram Component Control

23 Jun 202524 minutes to read

This comprehensive guide outlines the step-by-step API migration process for transitioning from the classic SfDiagram to the modern SfDiagramComponent in Blazor applications. It provides detailed instructions, code examples, and best practices to ensure a smooth upgrade experience.

NuGet Packages

Package for SfDiagram Package for SfDiagramComponent
Syncfusion.Blazor.Diagrams Syncfusion.Blazor.Diagram

Namespace Changes

Control Namespace for SfDiagram Namespace for SfDiagramComponent
Diagram Syncfusion.Blazor.Diagrams Syncfusion.Blazor.Diagram
SymbolPalette Syncfusion.Blazor.Diagrams Syncfusion.Blazor.Diagram.SymbolPalette
Overview Syncfusion.Blazor.Diagrams Syncfusion.Blazor.Diagram.Overview

Advantages

The SfDiagramComponent Blazor component offers superior performance compared to the SfDiagram Blazor control, especially in Blazor WebAssembly applications.

  • Users who need to programmatically interact with diagram elements for their business logic or specific requirements often prefer C# code for these operations. However, the Syncfusion® EJ2 Diagram is primarily written in TypeScript. In Blazor applications, synchronizing each interaction from the client browser to C# code requires JSInterop calls, which can significantly impact performance. To overcome this performance bottleneck, a separate native Blazor diagram component has been developed, eliminating the need for frequent JSInterop calls and enhancing overall efficiency.

Feature wise API difference between SfDiagram(classic) and SfDiagram Component

Node

Behavior API in SfDiagram API in SfDiagramComponent
Defines a collection of shapes to be rendered in the diagram Property: Nodes

<SfDiagram Nodes="@NodeCollection" />
@code
{
 public ObservableCollection<DiagramNode> NodeCollection = new ObservableCollection<DiagramNode>();
 protected override void OnInitialized()
 {
  DiagramNode node1 = new DiagramNode()
  {
   Id = "node",
   OffsetX = 300,
   OffsetY = 288,
   Width = 100,
   Height = 100,
   Annotations = new ObservableCollection<DiagramNodeAnnotation>()
   {
    new DiagramNodeAnnotation()
    {
     Content = "node",
    }
   }
  };
  NodeCollection.Add(node1);
 }
} 		Property: Nodes

<SfDiagramComponent Nodes="@NodeCollection" />
@code
{
 public DiagramObjectCollection<Node> NodeCollection = new DiagramObjectCollection<Node>();
 protected override void OnInitialized()
 {
  Node node1 = new Node()
  {
   Height = 100,
   Width = 100,
   ID = "node",
   OffsetX = 300,
   OffsetY = 288,
   Annotations = new DiagramObjectCollection<ShapeAnnotation>()
   {
    new ShapeAnnotation()
    {
     Content="node",
    }
   }
  };
  NodeCollection.Add(node1);
 }
}
Defines a unique id for the node Property: Nodes[i].Id

<SfDiagram Nodes="@NodeCollection" />
@code
{
 public ObservableCollection<DiagramNode> NodeCollection = new ObservableCollection<DiagramNode>();
 protected override void OnInitialized()
 {
  DiagramNode node1 = new DiagramNode()
  {
   Id = "node1",
   OffsetX = 300,
   OffsetY = 288,
   Width = 100,
   Height = 100,
  };
  NodeCollection.Add(node1);
 }
} 		Property: Nodes[i].ID

<SfDiagramComponent Nodes="@NodeCollection" />
@code
{
 public DiagramObjectCollection<Node> NodeCollection = new DiagramObjectCollection<Node>();
 protected override void OnInitialized()
 {
  Node node1 = new Node()
  {
   Height = 100,
   Width = 100,
   ID = "node1",
   OffsetX = 300,
   OffsetY = 288,
   };
  NodeCollection.Add(node1);
 }
}
Sets the RotateAngle property for the node Property: Nodes[i].RotateAngle

<SfDiagram Nodes="@NodeCollection" />
@code
{
 public ObservableCollection<DiagramNode> NodeCollection = new ObservableCollection<DiagramNode>();
 protected override void OnInitialized()
 {
  DiagramNode node1 = new DiagramNode()
  {
   RotateAngle = 50,
   OffsetX = 300,
   OffsetY = 288,
   Width = 100,
   Height = 100,
  };
  NodeCollection.Add(node1);
 }
} 		Property: Nodes[i].RotationAngle

<SfDiagramComponent Nodes="@NodeCollection" />
@code
{
 public DiagramObjectCollection<Node> NodeCollection = new DiagramObjectCollection<Node>();
 protected override void OnInitialized()
 {
  Node node1 = new Node()
  {
   Height = 100,
   Width = 100,
   RotationAngle = 50,
   OffsetX = 300,
   OffsetY = 288,
   };
  NodeCollection.Add(node1);
 }
}
Sets the AddInfo property for the node Property: Nodes[i].AddInfo

<SfDiagram Nodes="@NodeCollection" />
@code
{
 public ObservableCollection<DiagramNode> NodeCollection = new ObservableCollection<DiagramNode>();
 protected override void OnInitialized()
 {
  DiagramNode node1 = new DiagramNode()
  {
   AddInfo = "Node's Addition Information",
   OffsetX = 300,
   OffsetY = 288,
   Width = 100,
   Height = 100,
  };
  NodeCollection.Add(node1);
 }
} 		Property: Nodes[i].AdditionalInfo

<SfDiagramComponent Nodes="@NodeCollection" />
@code
{
 public DiagramObjectCollection<Node> NodeCollection = new DiagramObjectCollection<Node>();
 protected override void OnInitialized()
 {
  Dictionary<string, object> NodeInfo = new Dictionary<string, object>();
  NodeInfo.Add("NodeInfo", "Node's Addition Information");
  Node node1 = new Node()
  {
   Height = 100,
   Width = 100,
   AdditionalInfo=NodeInfo,
   OffsetX = 300,
   OffsetY = 288,
   };
  NodeCollection.Add(node1);
 }
}
Sets the border color of the node Not supported Property: Nodes[i].BorderColor

<SfDiagramComponent Nodes="@NodeCollection" />
@code
{
 public DiagramObjectCollection<Node> NodeCollection = new DiagramObjectCollection<Node>();
 protected override void OnInitialized()
 {
  Node node1 = new Node()
  {
   Height = 100,
   Width = 100,
   BorderColor="blue",
   OffsetX = 300,
   OffsetY = 288,
   };
  NodeCollection.Add(node1);
 }
}
Sets the border width of the node Not supported Property: Nodes[i].BorderWidth

<SfDiagramComponent Nodes="@NodeCollection" />
@code
{
 public DiagramObjectCollection<Node> NodeCollection = new DiagramObjectCollection<Node>();
 protected override void OnInitialized()
 {
  Node node1 = new Node()
  {
   Height = 100,
   Width = 100,
   BorderWidth=5,
   OffsetX = 300,
   OffsetY = 288,
   };
  NodeCollection.Add(node1);
 }
}
Sets the branch base on the parent for Mind map layout Property: Nodes[i].Branch

<SfDiagram Nodes="@NodeCollection" />
@code
{
 public ObservableCollection<DiagramNode> NodeCollection = new ObservableCollection<DiagramNode>();
 protected override void OnInitialized()
 {
  DiagramNode node1 = new DiagramNode()
  {
   Branch = BranchTypes.Left,
   OffsetX = 300,
   OffsetY = 288,
   Width = 100,
   Height = 100,
  };
  NodeCollection.Add(node1);
 }
} 		Property: Layout.GetBranch

<SfDiagramComponent Width="100%" Height="810px">
 <DataSourceSettings ID="Name" ParentID="Category" DataSource="DataSource"></DataSourceSettings>
 <Layout Type="LayoutType.MindMap" Orientation="LayoutOrientation.TopToBottom" GetBranch="GetBranch">
  <LayoutMargin Left="30" Right="30" Top="30" Bottom="30"></LayoutMargin>
 </Layout>
</SfDiagramComponent>
@code
{
 public class HierarchicalDetails
 {
  public string Name { get; set; }
  public string FillColor { get; set; }
  public string Category { get; set; }

 }
 public List<object> DataSource = new List<object>()
 {
  new HierarchicalDetails(){ Name ="Diagram", Category="",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Layout", Category="Diagram",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Tree layout", Category="Layout",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Organizational chart", Category="Layout",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Hierarchical tree", Category="Tree layout",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Radial tree", Category="Tree layout",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Mind map", Category="Hierarchical tree",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Family tree", Category="Hierarchical tree",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Management", Category="Organizational chart",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Human resources", Category="Management",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="University", Category="Management",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Business", Category="#Management",FillColor="#659be5"}
 };
 private BranchType GetBranch(IDiagramObject obj)
 {
  if((obj as Node).ID == "node3"){ return BranchType.Root; }
  return BranchType.Right;
 }
}
Positioning the node automatically or not. Applicable if the layout option is enabled Property: Nodes[i].ExcludeFromLayout

<SfDiagram Nodes="@NodeCollection" />
@code
{
 public ObservableCollection<DiagramNode> NodeCollection = new ObservableCollection<DiagramNode>();
 protected override void OnInitialized()
 {
  DiagramNode node1 = new DiagramNode()
  {
   ExcludeFromLayout = true,
   OffsetX = 300,
   OffsetY = 288,
   Width = 100,
   Height = 100,
  };
  NodeCollection.Add(node1);
 }
} 		Property: Nodes[i].CanAutoLayout

<SfDiagramComponent Nodes="@NodeCollection" />
@code
{
 public DiagramObjectCollection<Node> NodeCollection = new DiagramObjectCollection<Node>();
 protected override void OnInitialized()
 {
  Node node1 = new Node()
  {
   Height = 100,
   Width = 100,
   CanAutoLayout=false,
   OffsetX = 300,
   OffsetY = 288,
   };
  NodeCollection.Add(node1);
 }
}
Defines the index of the column in the grid Property: Nodes[i].ColumnIndex

<SfDiagram Nodes="@NodeCollection" />
@code
{
 public ObservableCollection<DiagramNode> NodeCollection = new ObservableCollection<DiagramNode>();
 protected override void OnInitialized()
 {
  DiagramNode node1 = new DiagramNode()
  {
   ColumnIndex=2,
   OffsetX = 300,
   OffsetY = 288,
   Width = 100,
   Height = 100,
  };
  NodeCollection.Add(node1);
 }
} 		You can add the node to a swimlane by utilizing the children property of the lane within the swimlane. For further details on Swimlane functionality, please refer to the Swimlane documentation.
Defines how many columns to be merged in the grid Property: Nodes[i].ColumnSpan

<SfDiagram Nodes="@NodeCollection" />
@code
{
 public ObservableCollection<DiagramNode> NodeCollection = new ObservableCollection<DiagramNode>();
 protected override void OnInitialized()
 {
  DiagramNode node1 = new DiagramNode()
  {
   ColumnSpan=3,
   OffsetX = 300,
   OffsetY = 288,
   Width = 100,
   Height = 100,
  };
  NodeCollection.Add(node1);
 }
} 		You can add the node to a swimlane by utilizing the children property of the lane within the swimlane. For further details on Swimlane functionality, please refer to the Swimlane documentation.
Defines the index of the row in the grid Property: Nodes[i].RowIndex

<SfDiagram Nodes="@NodeCollection" />
@code
{
 public ObservableCollection<DiagramNode> NodeCollection = new ObservableCollection<DiagramNode>();
 protected override void OnInitialized()
 {
  DiagramNode node1 = new DiagramNode()
  {
   RowIndex=2,
   OffsetX = 300,
   OffsetY = 288,
   Width = 100,
   Height = 100,
  };
  NodeCollection.Add(node1);
 }
} 		You can add the node to a swimlane by utilizing the children property of the lane within the swimlane. For further details on Swimlane functionality, please refer to the Swimlane documentation.
Defines how many rows to be merged in the grid Property: Nodes[i].RowSpan

<SfDiagram Nodes="@NodeCollection" />
@code
{
 public ObservableCollection<DiagramNode> NodeCollection = new ObservableCollection<DiagramNode>();
 protected override void OnInitialized()
 {
  DiagramNode node1 = new DiagramNode()
  {
   RowSpan=3,
   OffsetX = 300,
   OffsetY = 288,
   Width = 100,
   Height = 100,
  };
  NodeCollection.Add(node1);
 }
} 		You can add the node to a swimlane by utilizing the children property of the lane within the swimlane. For further details on Swimlane functionality, please refer to the Swimlane documentation.
Defines space around the node Property: Nodes[i].Margin

<SfDiagram Nodes="@NodeCollection" />
@code
{
 public ObservableCollection<DiagramNode> NodeCollection = new ObservableCollection<DiagramNode>();
 protected override void OnInitialized()
 {
  DiagramNode node1 = new DiagramNode()
  {
   Margin=new NodeMargin(){ Left = 10 }
   OffsetX = 300,
   OffsetY = 288,
   Width = 100,
   Height = 100,
  };
  NodeCollection.Add(node1);
 }
} 		Property: Nodes[i].Margin

<SfDiagramComponent Nodes="@NodeCollection" />
@code
{
 public DiagramObjectCollection<Node> NodeCollection = new DiagramObjectCollection<Node>();
 protected override void OnInitialized()
 {
  Node node1 = new Node()
  {
   Height = 100,
   Width = 100,
   Margin = new DiagramThickness() { Left = 10 },
   OffsetX = 300,
   OffsetY = 288,
   };
  NodeCollection.Add(node1);
 }
}
Defines reference point(Pivot) of the node Property: Nodes[i].Pivot

<SfDiagram Nodes="@NodeCollection" />
@code
{
 public ObservableCollection<DiagramNode> NodeCollection = new ObservableCollection<DiagramNode>();
 protected override void OnInitialized()
 {
  DiagramNode node1 = new DiagramNode()
  {
   Pivot = new NodePivotPoint() { X = 0, Y=0 },
   OffsetX = 300,
   OffsetY = 288,
   Width = 100,
   Height = 100,
  };
  NodeCollection.Add(node1);
 }
} 		Property: Nodes[i].Pivot

<SfDiagramComponent Nodes="@NodeCollection" />
@code
{
 public DiagramObjectCollection<Node> NodeCollection = new DiagramObjectCollection<Node>();
 protected override void OnInitialized()
 {
  Node node1 = new Node()
  {
   Height = 100,
   Width = 100,
   Pivot = new DiagramPoint(){ X=0, Y =0 },
   OffsetX = 300,
   OffsetY = 288,
   };
  NodeCollection.Add(node1);
 }
}
Defines the visibility of the node Property: Nodes[i].Visible

<SfDiagram Nodes="@NodeCollection" />
@code
{
 public ObservableCollection<DiagramNode> NodeCollection = new ObservableCollection<DiagramNode>();
 protected override void OnInitialized()
 {
  DiagramNode node1 = new DiagramNode()
  {
   Visible = false,
   OffsetX = 300,
   OffsetY = 288,
   Width = 100,
   Height = 100,
  };
  NodeCollection.Add(node1);
 }
} 		Property: Nodes[i].IsVisible

<SfDiagramComponent Nodes="@NodeCollection" />
@code
{
 public DiagramObjectCollection<Node> NodeCollection = new DiagramObjectCollection<Node>();
 protected override void OnInitialized()
 {
  Node node1 = new Node()
  {
   Height = 100,
   Width = 100,
   IsVisible = false,
   OffsetX = 300,
   OffsetY = 288,
   };
  NodeCollection.Add(node1);
 }
}
Defines the shadow appearance of a node Property: Nodes[i].Shadow

<SfDiagram Nodes="@NodeCollection" />
@code
{
 public ObservableCollection<DiagramNode> NodeCollection = new ObservableCollection<DiagramNode>();
 protected override void OnInitialized()
 {
  DiagramNode node1 = new DiagramNode()
  {
   Shadow = new DiagramShadow(){ Angle = 5, Color = "red", Distance = 10, Opacity = 6 },
   OffsetX = 300,
   OffsetY = 288,
   Width = 100,
   Height = 100,
  };
  NodeCollection.Add(node1);
 }
} 		Property: Nodes[i].Shadow

<SfDiagramComponent Nodes="@NodeCollection" />
@code
{
 public DiagramObjectCollection<Node> NodeCollection = new DiagramObjectCollection<Node>();
 protected override void OnInitialized()
 {
  Node node1 = new Node()
  {
   Height = 100,
   Width = 100,
   Shadow = new Shadow(){ Angle = 6, Color = "red", Distance =10, Opacity = 7 },
   OffsetX = 300,
   OffsetY = 288,
   };
  NodeCollection.Add(node1);
 }
}
Control the behavior of the flip object Not supported Property: Nodes[i].FlipMode

<SfDiagramComponent Nodes="@NodeCollection" />
@code
{
 public DiagramObjectCollection<Node> NodeCollection = new DiagramObjectCollection<Node>();
 protected override void OnInitialized()
 {
  Node node1 = new Node()
  {
   Height = 100,
   Width = 100,
   FlipMode = DiagramFlipMode.None,
   OffsetX = 300,
   OffsetY = 288,
   };
  NodeCollection.Add(node1);
 }
}
Sets the layout properties using the node property Property: Nodes[i].LayoutInfo

<SfDiagram Nodes="@NodeCollection" />
@code
{
 public ObservableCollection<DiagramNode> NodeCollection = new ObservableCollection<DiagramNode>();
 protected override void OnInitialized()
 {
  DiagramNode node1 = new DiagramNode()
  {
   LayoutInfo = new DiagramNodeLayoutInfo() { Type = SubTreeAlignments.Balanced },
   OffsetX = 300,
   OffsetY = 288,
   Width = 100,
   Height = 100,
  };
  NodeCollection.Add(node1);
 }
} 		Property: Layout.GetLayoutInfo

<SfDiagramComponent Width="100%" Height="810px">
 <DataSourceSettings ID="Name" ParentID="Category" DataSource="DataSource"></DataSourceSettings>
 <Layout Type="LayoutType.HierarchicalTree" HorizontalSpacing="30" VerticalSpacing="30" GetLayoutInfo="GetLayoutInfo" />
</SfDiagramComponent>
@code
{
 private TreeInfo GetLayoutInfo(IDiagramObject obj, TreeInfo options)
 {
  if (!options.HasSubTree)
  {
   options.AlignmentType = SubTreeAlignmentType.Left;
   options.Orientation = Orientation.Vertical;
   options.Offset = -30;
  }
  }
 public class HierarchicalDetails
 {
  public string Name { get; set; }
  public string FillColor { get; set; }
  public string Category { get; set; }

 }
 public List<object> DataSource = new List<object>()
 {
  new HierarchicalDetails(){ Name ="Diagram", Category="",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Layout", Category="Diagram",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Tree layout", Category="Layout",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Organizational chart", Category="Layout",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Hierarchical tree", Category="Tree layout",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Radial tree", Category="Tree layout",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Mind map", Category="Hierarchical tree",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Family tree", Category="Hierarchical tree",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Management", Category="Organizational chart",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Human resources", Category="Management",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="University", Category="Management",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Business", Category="#Management",FillColor="#659be5"}
 };
}
Defines the size of the symbol preview Property: Nodes[i].PreviewSize

<SfDiagram Nodes="@NodeCollection" />
@code
{
 public ObservableCollection<DiagramNode> NodeCollection = new ObservableCollection<DiagramNode>();
 protected override void OnInitialized()
 {
  DiagramNode node1 = new DiagramNode()
  {
   PreviewSize = new SymbolSizeModel() { Height=100, Width=100 },
   OffsetX = 300,
   OffsetY = 288,
   Width = 100,
   Height = 100,
  };
  NodeCollection.Add(node1);
 }
} 		Property: SymbolPalette.SymbolDragPreviewSize

<SfSymbolPaletteComponent Height="300px" Width="200px" Palettes="@Palettes" SymbolDragPreviewSize="@symbolDragPreviewSize"></SfSymbolPaletteComponent>
@code
{
 DiagramObjectCollection<Palette> Palettes = new DiagramObjectCollection<Palette>();
 DiagramSize symbolDragPreviewSize;
 DiagramObjectCollection<NodeBase> PaletteNodes = new DiagramObjectCollection<NodeBase>();
 DiagramObjectCollection<NodeBase> PaletteConnectors = new DiagramObjectCollection<NodeBase>();
 protected override void OnInitialized()
 {
  InitPaletteModel();
 }

 private void InitPaletteModel()
 {
  symbolDragPreviewSize = new DiagramSize() {Width = 100, Height = 100 };
  CreatePaletteNode(NodeFlowShapes.Terminator, "Terminator");
  CreatePaletteConnector("Link1", ConnectorSegmentType.Orthogonal, DecoratorShape.Arrow);
  Palettes = new DiagramObjectCollection<Palette>()
  {
   new Palette(){Symbols =PaletteNodes, Title="Flow Shapes", ID="Flow Shapes" },
   new Palette(){Symbols = PaletteConnectors, Title = "Connectors" , IsExpanded = true},
  };
 }

 private void CreatePaletteNode(NodeFlowShapes flowShape, string id)
 {
  Node node = new Node()
  {
   ID = id,
   Shape = new FlowShape() { Type = NodeShapes.Flow, Shape = flowShape },
   Style = new ShapeStyle() {Fill="#6495ED", StrokeColor = "#757575" },
  };
  PaletteNodes.Add(node);
 }

 private void CreatePaletteConnector(string id, ConnectorSegmentType type, DecoratorShape decoratorShape)
 {
  Connector connector = new Connector()
  {
   ID = id,
   Type = type,
   SourcePoint = new DiagramPoint() { X = 0, Y = 0 },
   TargetPoint = new DiagramPoint() { X = 100, Y = 100 },
   Style = new ShapeStyle() { StrokeWidth = 1, StrokeColor = "#6495ED" },
   TargetDecorator = new DecoratorSettings()
   {
    Shape = decoratorShape,
    Style = new ShapeStyle() { StrokeColor = "#6495ED", Fill = "#6495ED" }
   }
  };
  PaletteConnectors.Add(connector);
 }
}
Defines the size of the drop symbol from palette Property: Nodes[i].DragSize

<SfDiagram Nodes="@NodeCollection" />
@code
{
 public ObservableCollection<DiagramNode> NodeCollection = new ObservableCollection<DiagramNode>();
 protected override void OnInitialized()
 {
  DiagramNode node1 = new DiagramNode()
  {
   DragSize = new SymbolSizeModel() { Height=100, Width=100 },
   OffsetX = 300,
   OffsetY = 288,
   Width = 100,
   Height = 100,
  };
  NodeCollection.Add(node1);
 }
} 		Property: SymbolPalette.SymbolDragPreviewSize

<SfSymbolPaletteComponent Height="300px" Width="200px" Palettes="@Palettes" SymbolDragPreviewSize="@symbolDragPreviewSize"></SfSymbolPaletteComponent>
@code
{
 DiagramObjectCollection<Palette> Palettes = new DiagramObjectCollection<Palette>();
 DiagramSize symbolDragPreviewSize;
 DiagramObjectCollection<NodeBase> PaletteNodes = new DiagramObjectCollection<NodeBase>();
 DiagramObjectCollection<NodeBase> PaletteConnectors = new DiagramObjectCollection<NodeBase>();
 protected override void OnInitialized()
 {
  InitPaletteModel();
 }

 private void InitPaletteModel()
 {
  symbolDragPreviewSize = new DiagramSize() {Width = 100, Height = 100 };
  CreatePaletteNode(NodeFlowShapes.Terminator, "Terminator");
  CreatePaletteConnector("Link1", ConnectorSegmentType.Orthogonal, DecoratorShape.Arrow);
  Palettes = new DiagramObjectCollection<Palette>()
  {
   new Palette(){Symbols =PaletteNodes, Title="Flow Shapes", ID="Flow Shapes" },
   new Palette(){Symbols = PaletteConnectors, Title = "Connectors" , IsExpanded = true},
  };
 }

 private void CreatePaletteNode(NodeFlowShapes flowShape, string id)
 {
  Node node = new Node()
  {
   ID = id,
   Shape = new FlowShape() { Type = NodeShapes.Flow, Shape = flowShape },
   Style = new ShapeStyle() {Fill="#6495ED", StrokeColor = "#757575" },
  };
  PaletteNodes.Add(node);
 }

 private void CreatePaletteConnector(string id, ConnectorSegmentType type, DecoratorShape decoratorShape)
 {
  Connector connector = new Connector()
  {
   ID = id,
   Type = type,
   SourcePoint = new DiagramPoint() { X = 0, Y = 0 },
   TargetPoint = new DiagramPoint() { X = 100, Y = 100 },
   Style = new ShapeStyle() { StrokeWidth = 1, StrokeColor = "#6495ED" },
   TargetDecorator = new DecoratorSettings()
   {
    Shape = decoratorShape,
    Style = new ShapeStyle() { StrokeColor = "#6495ED", Fill = "#6495ED" }
   }
  };
  PaletteConnectors.Add(connector);
 }
}
Defines the information of the symbol Property: Nodes[i].SymbolInfo

<SfDiagram Nodes="@NodeCollection" />
@code
{
 public ObservableCollection<DiagramNode> NodeCollection = new ObservableCollection<DiagramNode>();
 protected override void OnInitialized()
 {
  DiagramNode node1 = new DiagramNode()
  {
   SymbolInfo = new SymbolInfo() { Fit = true, Height= 50, Width = 50 },
   OffsetX = 300,
   OffsetY = 288,
   Width = 100,
   Height = 100,
  };
  NodeCollection.Add(node1);
 }
} 		Property: SymbolPalette.GetSymbolInfo

<SfSymbolPaletteComponent Height="300px" Width="200px" Palettes="@Palettes" GetSymbolInfo="GetSymbolInfo"></SfSymbolPaletteComponent>
@code
{
 DiagramObjectCollection<Palette> Palettes = new DiagramObjectCollection<Palette>();
 DiagramObjectCollection<NodeBase> PaletteNodes = new DiagramObjectCollection<NodeBase>();
 DiagramObjectCollection<NodeBase> PaletteConnectors = new DiagramObjectCollection<NodeBase>();
 protected override void OnInitialized()
 {
  InitPaletteModel();
 }

 private void InitPaletteModel()
 {
  CreatePaletteNode(NodeFlowShapes.Terminator, "Terminator");
  CreatePaletteConnector("Link1", ConnectorSegmentType.Orthogonal, DecoratorShape.Arrow);
  Palettes = new DiagramObjectCollection<Palette>()
  {
   new Palette(){Symbols =PaletteNodes, Title="Flow Shapes", ID="Flow Shapes" },
   new Palette(){Symbols = PaletteConnectors, Title = "Connectors" , IsExpanded = true},
  };
 }

 private void CreatePaletteNode(NodeFlowShapes flowShape, string id)
 {
  Node node = new Node()
  {
   ID = id,
   Shape = new FlowShape() { Type = NodeShapes.Flow, Shape = flowShape },
   Style = new ShapeStyle() {Fill="#6495ED", StrokeColor = "#757575" },
  };
  PaletteNodes.Add(node);
 }

 private void CreatePaletteConnector(string id, ConnectorSegmentType type, DecoratorShape decoratorShape)
 {
  Connector connector = new Connector()
  {
   ID = id,
   Type = type,
   SourcePoint = new DiagramPoint() { X = 0, Y = 0 },
   TargetPoint = new DiagramPoint() { X = 100, Y = 100 },
   Style = new ShapeStyle() { StrokeWidth = 1, StrokeColor = "#6495ED" },
   TargetDecorator = new DecoratorSettings()
   {
   &nbsp;Shape = decoratorShape,<br>&nbsp;&nbsp;&nbsp; Style = new ShapeStyle() { StrokeColor = "#6495ED", Fill = "#6495ED" }
   }
  };
  PaletteConnectors.Add(connector);
 }

 private SymbolInfo GetSymbolInfo(IDiagramObject symbol)
 {
  SymbolInfo SymbolInfo = new SymbolInfo();
  string text = null;
  text = (symbol as Node).ID;
  SymbolInfo.Description = new SymbolDescription() { Text = text };
  return SymbolInfo;
 }
}
Sets the style of the node Property: Nodes[i].Style

<SfDiagram Nodes="@NodeCollection" />
@code
{
 public ObservableCollection<DiagramNode> NodeCollection = new ObservableCollection<DiagramNode>();
 protected override void OnInitialized()
 {
  DiagramNode node1 = new DiagramNode()
  {
   Style = new NodeShapeStyle(){ Fill = "red", StrokeColor = "blue", StrokeDashArray = "2,2", Opacity = 0.9, StrokeWidth = 3 },
   OffsetX = 300,
   OffsetY = 288,
   Width = 100,
   Height = 100,
  };
  NodeCollection.Add(node1);
 }
} 		Property: Nodes[i].Style

<SfDiagramComponent Nodes="@NodeCollection" />
@code
{
 public DiagramObjectCollection<Node> NodeCollection = new DiagramObjectCollection<Node>();
 protected override void OnInitialized()
 {
  Node node1 = new Node()
  {
   Height = 100,
   Width = 100,
   Style = new ShapeStyle(){ Fill = "red", StrokeColor = "blue", StrokeDashArray = "2,2", Opacity = 0.9, StrokeWidth = 3 },
   OffsetX = 300,
   OffsetY = 288,
   };
  NodeCollection.Add(node1);
 }
}
Apply the linear gradient style of the node Property: Nodes[i].Style.Gradient

<SfDiagram Nodes="@NodeCollection" />
@code
{
 public ObservableCollection<DiagramNode> NodeCollection = new ObservableCollection<DiagramNode>();
 protected override void OnInitialized()
 {
  DiagramNode node1 = new DiagramNode()
  {
   Style = new NodeShapeStyle(){ Gradient = new DiagramGradient() { Type = GradientType.Linear,X1 = 0, X2 = 50, Y1 = 0, Y2 = 50, Stops = new ObservableCollection<DiagramsGradientStop>() { new DiagramsGradientStop() { Color = "red", Offset = 0, Opacity = 0.5},new DiagramsGradientStop() { Color = "green", Offset = 80, Opacity = 1} }, },
   OffsetX = 300,
   OffsetY = 288,
   Width = 100,
   Height = 100,
  };
  NodeCollection.Add(node1);
 }
} 		Property: Nodes[i].Style.Gradient

<SfDiagramComponent Nodes="@NodeCollection" />
@code
{
 public DiagramObjectCollection<Node> NodeCollection = new DiagramObjectCollection<Node>();
 protected override void OnInitialized()
 {
  Node node1 = new Node()
  {
   Height = 100,
   Width = 100,
   Style = new ShapeStyle(){ Gradient = new LinearGradientBrush() {X1 = 0, X2 = 50, Y1 = 0, Y2 = 50,GradientStops = new DiagramObjectCollection<GradientStop>() { new GradientStop() { Color = "red", Offset = 0, Opacity = 0.5},new GradientStop() { Color = "green", Offset = 80, Opacity = 1 }},} },
   OffsetX = 300,
   OffsetY = 288,
   };
  NodeCollection.Add(node1);
 }
}
Apply the radial gradient style of the node Property: Nodes[i].Style.Gradient

<SfDiagram Nodes="@NodeCollection" />
@code
{
 public ObservableCollection<DiagramNode> NodeCollection = new ObservableCollection<DiagramNode>();
 protected override void OnInitialized()
 {
  DiagramNode node1 = new DiagramNode()
  {
   Style = new NodeShapeStyle(){ Gradient = new DiagramGradient() { Type = GradientType.Radial, Cx = 0, Cy = 0, Fx = 50, Fy = 50, R = 50, Stops = new ObservableCollection<DiagramsGradientStop>() { new DiagramsGradientStop() { Color = "red", Offset = 0, Opacity = 0.5},new DiagramsGradientStop() { Color = "green", Offset = 80, Opacity = 1} }, },
   OffsetX = 300,
   OffsetY = 288,
   Width = 100,
   Height = 100,
  };
  NodeCollection.Add(node1);
 }
} 		Property: Nodes[i].Style.Gradient

<SfDiagramComponent Nodes="@NodeCollection" />
@code
{
 public DiagramObjectCollection<Node> NodeCollection = new DiagramObjectCollection<Node>();
 protected override void OnInitialized()
 {
  Node node1 = new Node()
  {
   Height = 100,
   Width = 100,
   Style = new ShapeStyle(){ Gradient = new RadialGradientBrush(){ CX = 0, CY = 0, FX = 50, FY = 50, R = 50, GradientStops = new DiagramObjectCollection<GradientStop>(){new GradientStop() { Color = "red", Offset = 0, Opacity = 0.5},new GradientStop() { Color = "green", Offset = 80, Opacity = 1 }}} },
   OffsetX = 300,
   OffsetY = 288,
   };
  NodeCollection.Add(node1);
 }
}

Shapes

Behavior API in SfDiagram API in SfDiagramComponent
Sets the Basic shapes of the Node Property: Nodes[i].Shape.BasicShape

<SfDiagram Nodes="@NodeCollection" />
@code
{
 public ObservableCollection<DiagramNode> NodeCollection = new ObservableCollection<DiagramNode>();
 protected override void OnInitialized()
 {
  DiagramNode node1 = new DiagramNode()
  {
   Id = "node",
   OffsetX = 300,
   OffsetY = 288,
   Width = 100,
   Height = 100,
   Shape=new DiagramShape(){Type=Shapes.Basic,BasicShape=BasicShapes.Ellipse}
   Annotations = new ObservableCollection<DiagramNodeAnnotation>()
   {
    new DiagramNodeAnnotation()
    {
     Content = "node",
    }
   }
  };
  NodeCollection.Add(node1);
 }
} 		Property: Nodes[i].Shape.Shape

Sets the shape as a BasicShape

<SfDiagramComponent Nodes="@NodeCollection" />
@code
{
 public DiagramObjectCollection<Node> NodeCollection = new DiagramObjectCollection<Node>();
 protected override void OnInitialized()
 {
  Node node1 = new Node()
  {
   Height = 100,
   Width = 100,
   ID = "node",
   OffsetX = 300,
   OffsetY = 288,
   Shape = new BasicShape() { Type = NodeShapes.Basic, Shape = NodeBasicShapes.Ellipse },
   Annotations = new DiagramObjectCollection<ShapeAnnotation>()
   {
    new ShapeAnnotation()
    {
     Content="node",
    }
   }
  };
  NodeCollection.Add(node1);
 }
}
Sets the corner radius property to specify the radius of the rounded rectangle. Property: Nodes[i].Shape.CornerRadius

<SfDiagram Nodes="@NodeCollection" />
@code
{
 public ObservableCollection<DiagramNode> NodeCollection = new ObservableCollection<DiagramNode>();
 protected override void OnInitialized()
 {
  DiagramNode node1 = new DiagramNode()
  {
   Id = "node",
   OffsetX = 300,
   OffsetY = 288,
   Width = 100,
   Height = 100,
   Shape=new DiagramShape(){Type=Shapes.Basic,BasicShape=BasicShapes.Rectangle, CornerRadius = 10 }
   Annotations = new ObservableCollection<DiagramNodeAnnotation>()
   {
    new DiagramNodeAnnotation()
    {
     Content = "node",
    }
   }
  };
  NodeCollection.Add(node1);
 }
} 		Property: Nodes[i].Shape.CornerRadius

Sets the shape as a BasicShape

<SfDiagramComponent Nodes="@NodeCollection" />
@code
{
 public DiagramObjectCollection<Node> NodeCollection = new DiagramObjectCollection<Node>();
 protected override void OnInitialized()
 {
  Node node1 = new Node()
  {
   Height = 100,
   Width = 100,
   ID = "node",
   OffsetX = 300,
   OffsetY = 288,
   Shape = new BasicShape() { Type = NodeShapes.Basic, Shape = NodeBasicShapes.Rectangle, CornerRadius = 10 },
   Annotations = new DiagramObjectCollection<ShapeAnnotation>()
   {
    new ShapeAnnotation()
    {
     Content="node",
    }
   }
  };
  NodeCollection.Add(node1);
 }
}
Sets the Flow shapes of the Node Property: Nodes[i].Shape.FlowShapes

<SfDiagram Nodes="@NodeCollection" />
@code
{
 public ObservableCollection<DiagramNode> NodeCollection = new ObservableCollection<DiagramNode>();
 protected override void OnInitialized()
 {
  DiagramNode node1 = new DiagramNode()
  {
   Id = "node",
   OffsetX = 300,
   OffsetY = 288,
   Width = 100,
   Height = 100,
   Shape=new DiagramShape(){Type=Shapes.Flow, FlowShape = FlowShapes.DirectData }
   Annotations = new ObservableCollection<DiagramNodeAnnotation>()
   {
    new DiagramNodeAnnotation()
    {
     Content = "node",
    }
   }
  };
  NodeCollection.Add(node1);
 }
} 		Property: Nodes[i].Shape.Shape

Sets the shape as a FlowShape

<SfDiagramComponent Nodes="@NodeCollection" />
@code
{
 public DiagramObjectCollection<Node> NodeCollection = new DiagramObjectCollection<Node>();
 protected override void OnInitialized()
 {
  Node node1 = new Node()
  {
   Height = 100,
   Width = 100,
   ID = "node",
   OffsetX = 300,
   OffsetY = 288,
   Shape = new FlowShape() { Type = NodeShapes.Flow, Shape = NodeFlowShapes.DirectData },
   Annotations = new DiagramObjectCollection<ShapeAnnotation>()
   {
    new ShapeAnnotation()
    {
     Content="node",
    }
   }
  };
  NodeCollection.Add(node1);
 }
}
Sets the Image shapes of the Node Property: Nodes[i].Shape.Source

<SfDiagram Nodes="@NodeCollection" />
@code
{
 public ObservableCollection<DiagramNode> NodeCollection = new ObservableCollection<DiagramNode>();
 protected override void OnInitialized()
 {
  DiagramNode node1 = new DiagramNode()
  {
   Id = "node",
   OffsetX = 300,
   OffsetY = 288,
   Width = 100,
   Height = 100,
   Shape=new DiagramShape(){ Type=Shapes.Image,Source="/diagram/images/syncfusion.png"}
   Annotations = new ObservableCollection<DiagramNodeAnnotation>()
   {
    new DiagramNodeAnnotation()
    {
     Content = "node",
    }
   }
  };
  NodeCollection.Add(node1);
 }
} 		Property: Nodes[i].Shape.Source

Sets the shape as a ImageShape

<SfDiagramComponent Nodes="@NodeCollection" />
@code
{
 public DiagramObjectCollection<Node> NodeCollection = new DiagramObjectCollection<Node>();
 protected override void OnInitialized()
 {
  Node node1 = new Node()
  {
   Height = 100,
   Width = 100,
   ID = "node",
   OffsetX = 300,
   OffsetY = 288,
   Shape = new ImageShape() { Type = NodeShapes.Image, Source = "/diagram/images/syncfusion.png" },
   Annotations = new DiagramObjectCollection<ShapeAnnotation>()
   {
    new ShapeAnnotation()
    {
     Content="node",
    }
   }
  };
  NodeCollection.Add(node1);
 }
}
Sets the stretch the image of the node Property: Nodes[i].Shape.Scale

<SfDiagram Nodes="@NodeCollection" />
@code
{
 public ObservableCollection<DiagramNode> NodeCollection = new ObservableCollection<DiagramNode>();
 protected override void OnInitialized()
 {
  DiagramNode node1 = new DiagramNode()
  {
   Id = "node",
   OffsetX = 300,
   OffsetY = 288,
   Width = 100,
   Height = 100,
   Shape=new DiagramShape(){ Type=Shapes.Image,Source="/diagram/images/syncfusion.png", Scale=Stretch.Meet }
   Annotations = new ObservableCollection<DiagramNodeAnnotation>()
   {
    new DiagramNodeAnnotation()
    {
     Content = "node",
    }
   }
  };
  NodeCollection.Add(node1);
 }
} 		Property: Nodes[i].Shape.Scale

Sets the shape as a ImageShape

<SfDiagramComponent Nodes="@NodeCollection" />
@code
{
 public DiagramObjectCollection<Node> NodeCollection = new DiagramObjectCollection<Node>();
 protected override void OnInitialized()
 {
  Node node1 = new Node()
  {
   Height = 100,
   Width = 100,
   ID = "node",
   OffsetX = 300,
   OffsetY = 288,
   Shape = new ImageShape() { Type = NodeShapes.Image, Source = "/diagram/images/syncfusion.png", Scale = DiagramScale.Meet, },
   Annotations = new DiagramObjectCollection<ShapeAnnotation>()
   {
    new ShapeAnnotation()
    {
     Content="node",
    }
   }
  };
  NodeCollection.Add(node1);
 }
}
Align the image based on the x and y values in the node boundary Property: Nodes[i].Shape.Align

<SfDiagram Nodes="@NodeCollection" />
@code
{
 public ObservableCollection<DiagramNode> NodeCollection = new ObservableCollection<DiagramNode>();
 protected override void OnInitialized()
 {
  DiagramNode node1 = new DiagramNode()
  {
   Id = "node",
   OffsetX = 300,
   OffsetY = 288,
   Width = 100,
   Height = 100,
   Shape=new DiagramShape(){ Type=Shapes.Image,Source="/diagram/images/syncfusion.png", Align = ImageAlignment.XMinYMin }
   Annotations = new ObservableCollection<DiagramNodeAnnotation>()
   {
    new DiagramNodeAnnotation()
    {
     Content = "node",
    }
   }
  };
  NodeCollection.Add(node1);
 }
} 		Property: Nodes[i].Shape.Align

Sets the shape as a ImageShape

<SfDiagramComponent Nodes="@NodeCollection" />
@code
{
 public DiagramObjectCollection<Node> NodeCollection = new DiagramObjectCollection<Node>();
 protected override void OnInitialized()
 {
  Node node1 = new Node()
  {
   Height = 100,
   Width = 100,
   ID = "node",
   OffsetX = 300,
   OffsetY = 288,
   Shape = new ImageShape() { Type = NodeShapes.Image, Source = "/diagram/images/syncfusion.png", ImageAlign = ImageAlignment.XMinYMax },
   Annotations = new DiagramObjectCollection<ShapeAnnotation>()
   {
    new ShapeAnnotation()
    {
     Content="node",
    }
   }
  };
  NodeCollection.Add(node1);
 }
}
Create a text node and sets the content for Text shape Property: Nodes[i].Shape.Content

<SfDiagram Nodes="@NodeCollection" />
@code
{
 public ObservableCollection<DiagramNode> NodeCollection = new ObservableCollection<DiagramNode>();
 protected override void OnInitialized()
 {
  DiagramNode node1 = new DiagramNode()
  {
   Id = "node",
   OffsetX = 300,
   OffsetY = 288,
   Width = 100,
   Height = 100,
   Shape=new DiagramShape(){Type=Shapes.Text, Content="Text Node"}
  };
  NodeCollection.Add(node1);
 }
} 		Property: Nodes[i].Shape.Content

Sets the shape as a TextShape

<SfDiagramComponent Nodes="@NodeCollection" />
@code
{
 public DiagramObjectCollection<Node> NodeCollection = new DiagramObjectCollection<Node>();
 protected override void OnInitialized()
 {
  Node node1 = new Node()
  {
   Height = 100,
   Width = 100,
   ID = "node",
   OffsetX = 300,
   OffsetY = 288,
   Shape = new TextShape() { Content = "Text Node" }
  };
  NodeCollection.Add(node1);
 }
}
Create the Path shapes and set the data for the path node Property: Nodes[i].Shape.Data

<SfDiagram Nodes="@NodeCollection" />
@code
{
 public ObservableCollection<DiagramNode> NodeCollection = new ObservableCollection<DiagramNode>();
 protected override void OnInitialized()
 {
  DiagramNode node1 = new DiagramNode()
  {
   Id = "node",
   OffsetX = 300,
   OffsetY = 288,
   Width = 100,
   Height = 100,
   Shape=new DiagramShape(){ Type=Shapes.Path, Data="M35.2441,25 L22.7161,49.9937 L22.7161,0.00657536 L35.2441,25 z M22.7167,25 L-0.00131226,25 M35.2441,49.6337 L35.2441,0.368951 M35.2441,25 L49.9981,25"}
  };
  NodeCollection.Add(node1);
 }
} 		Property: Nodes[i].Shape.Data

Sets the shape as a PathShape

<SfDiagramComponent Nodes="@NodeCollection" />
@code
{
 public DiagramObjectCollection<Node> NodeCollection = new DiagramObjectCollection<Node>();
 protected override void OnInitialized()
 {
  Node node1 = new Node()
  {
   Height = 100,
   Width = 100,
   ID = "node",
   OffsetX = 300,
   OffsetY = 288,
   Shape = new PathShape() { Type = NodeShapes.Path, Data="M35.2441,25 L22.7161,49.9937 L22.7161,0.00657536 L35.2441,25 z M22.7167,25 L-0.00131226,25 M35.2441,49.6337 L35.2441,0.368951 M35.2441,25 L49.9981,25" }
  };
  NodeCollection.Add(node1);
 }
}
Sets the HTML shapes of the Node Property: Nodes[i].Shape.Type

@using Syncfusion.Blazor.Inputs

<SfDiagram Nodes="@NodeCollection">
 <DiagramTemplates>
  <NodeTemplate>
   @{
    <SfTextBox Placeholder="My text"></SfTextBox>
   }
  </NodeTemplate>
 </DiagramTemplates>
</SfDiagram>
@code
{
 public ObservableCollection<DiagramNode> NodeCollection = new ObservableCollection<DiagramNode>();
 protected override void OnInitialized()
 {
  DiagramNode node1 = new DiagramNode()
  {
   Id = "node",
   OffsetX = 300,
   OffsetY = 288,
   Width = 100,
   Height = 100,
   Shape=new DiagramShape(){ Type=Shapes.HTML }
  };
  NodeCollection.Add(node1);
 }
} 		Property: Nodes[i].Shape.Type

@using Syncfusion.Blazor.Inputs

<SfDiagramComponent Nodes="@NodeCollection">
 <DiagramTemplates>
  <NodeTemplate>
   @{
    <SfTextBox Placeholder="My text"></SfTextBox>
   }
  </NodeTemplate>
 </DiagramTemplates>
</SfDiagramComponent>
@code
{
 public DiagramObjectCollection<Node> NodeCollection = new DiagramObjectCollection<Node>();
 protected override void OnInitialized()
 {
  Node node1 = new Node()
  {
   Height = 100,
   Width = 100,
   ID = "node",
   OffsetX = 300,
   OffsetY = 288,
   Shape = new Shape() { Type = NodeShapes.HTML }
  };
  NodeCollection.Add(node1);
 }
}
Sets the SVG shapes of the Node Property: Nodes[i].Shape.Type

@using Syncfusion.Blazor.Inputs

<SfDiagram Nodes="@NodeCollection">
 <DiagramTemplates>
  <NodeTemplate>
   @{
    if ((context as Node).Shape.Type == NodeShapes.SVG)
    {
     <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
      <g fill="white" stroke="green" stroke-width="5">
       <circle cx="40" cy="40" r="25" />
       <circle cx="60" cy="60" r="25" />
      </g>
     </svg>
    }
   }
  </NodeTemplate>
 </DiagramTemplates>
</SfDiagram>
@code
{
 public ObservableCollection<DiagramNode> NodeCollection = new ObservableCollection<DiagramNode>();
 protected override void OnInitialized()
 {
  DiagramNode node1 = new DiagramNode()
  {
   Id = "node",
   OffsetX = 300,
   OffsetY = 288,
   Width = 100,
   Height = 100,
   Shape=new DiagramShape(){ Type=Shapes.Native }
  };
  NodeCollection.Add(node1);
 }
} 		Property: Nodes[i].Shape.Type

@using Syncfusion.Blazor.Inputs

<SfDiagramComponent Nodes="@NodeCollection">
 <DiagramTemplates>
  <NodeTemplate>
   @{
    if ((context as Node).Shape.Type == NodeShapes.SVG)
    {
     <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
      <g fill="white" stroke="green" stroke-width="5">
       <circle cx="40" cy="40" r="25" />
       <circle cx="60" cy="60" r="25" />
      </g>
     </svg>
    }
   }
  </NodeTemplate>
 </DiagramTemplates>
</SfDiagramComponent>
@code
{
 public DiagramObjectCollection<Node> NodeCollection = new DiagramObjectCollection<Node>();
 protected override void OnInitialized()
 {
  Node node1 = new Node()
  {
   Height = 100,
   Width = 100,
   ID = "node",
   OffsetX = 300,
   OffsetY = 288,
   Shape = new Shape() { Type = NodeShapes.SVG }
  };
  NodeCollection.Add(node1);
 }
}
Set the BPMN events Property: Nodes[i].Shape.BpmnShape

<SfDiagram Nodes="@NodeCollection" />
@code
{
 public ObservableCollection<DiagramNode> NodeCollection = new ObservableCollection<DiagramNode>();
 protected override void OnInitialized()
 {
  DiagramNode node1 = new DiagramNode()
  {
   Id = "node",
   OffsetX = 300,
   OffsetY = 288,
   Width = 100,
   Height = 100,
   Shape=new DiagramShape(){Type = Shapes.Bpmn, BpmnShape = BpmnShapes.Event, Event = new DiagramBpmnEvent() { Event = BpmnEvents.Start }}
  };
  NodeCollection.Add(node1);
 }
} 		Property: Nodes[i].Shape

Set the shape as a BpmnEvent

<SfDiagramComponent Nodes="@NodeCollection" />
@code
{
 public DiagramObjectCollection<Node> NodeCollection = new DiagramObjectCollection<Node>();
 protected override void OnInitialized()
 {
  Node node1 = new Node()
  {
   Height = 100,
   Width = 100,
   ID = "node",
   OffsetX = 300,
   OffsetY = 288,
   Shape = new BpmnEvent() { EventType = BpmnEventType.Start }
  };
  NodeCollection.Add(node1);
 }
}
Set the event for BPMN event shape Property: Nodes[i].Shape.Event.Event

<SfDiagram Nodes="@NodeCollection" />
@code
{
 public ObservableCollection<DiagramNode> NodeCollection = new ObservableCollection<DiagramNode>();
 protected override void OnInitialized()
 {
  DiagramNode node1 = new DiagramNode()
  {
   Id = "node",
   OffsetX = 300,
   OffsetY = 288,
   Width = 100,
   Height = 100,
   Shape=new DiagramShape(){Type = Shapes.Bpmn, BpmnShape = BpmnShapes.Event, Event = new DiagramBpmnEvent() { Event = BpmnEvents.Start }}
  };
  NodeCollection.Add(node1);
 }
} 		Property: Nodes[i].Shape.EventType

<SfDiagramComponent Nodes="@NodeCollection" />
@code
{
 public DiagramObjectCollection<Node> NodeCollection = new DiagramObjectCollection<Node>();
 protected override void OnInitialized()
 {
  Node node1 = new Node()
  {
   Height = 100,
   Width = 100,
   ID = "node",
   OffsetX = 300,
   OffsetY = 288,
   Shape = new BpmnEvent() { EventType = BpmnEventType.Start }
  };
  NodeCollection.Add(node1);
 }
}
Set the BPMN events trigger Property: Nodes[i].Shape.Event.Trigger

<SfDiagram Nodes="@NodeCollection" />
@code
{
 public ObservableCollection<DiagramNode> NodeCollection = new ObservableCollection<DiagramNode>();
 protected override void OnInitialized()
 {
  DiagramNode node1 = new DiagramNode()
  {
   Id = "node",
   OffsetX = 300,
   OffsetY = 288,
   Width = 100,
   Height = 100,
   Shape=new DiagramShape()
   {
    Type = Shapes.Bpmn, BpmnShape = BpmnShapes.Event,
    Event = new DiagramBpmnEvent()
    {
     Event = BpmnEvents.NonInterruptingIntermediate,
     Trigger = BpmnTriggers.Message
    }
   }
  };
  NodeCollection.Add(node1);
 }
} 		Property: Nodes[i].Shape.Trigger

<SfDiagramComponent Nodes="@NodeCollection" />
@code
{
 public DiagramObjectCollection<Node> NodeCollection = new DiagramObjectCollection<Node>();
 protected override void OnInitialized()
 {
  Node node1 = new Node()
  {
   Height = 100,
   Width = 100,
   ID = "node",
   OffsetX = 300,
   OffsetY = 288,
   Shape = new BpmnEvent()
   {
    EventType = BpmnEventType.Start,
    Trigger = BpmnEventTrigger.Message
   }
  };
  NodeCollection.Add(node1);
 }
}
Set the BPMN Gateway Property: Nodes[i].Shape.Gateway.Type

<SfDiagram Nodes="@NodeCollection" />
@code
{
 public ObservableCollection<DiagramNode> NodeCollection = new ObservableCollection<DiagramNode>();
 protected override void OnInitialized()
 {
  DiagramNode node1 = new DiagramNode()
  {
   Id = "node",
   OffsetX = 300,
   OffsetY = 288,
   Width = 100,
   Height = 100,
   Shape=new DiagramShape()
   {
    Type = Shapes.Bpmn, BpmnShape = BpmnShapes.Gateway,
    Gateway = new DiagramBpmnGateway()
    {
     Type = BpmnGateways.None
    }
   }
  };
  NodeCollection.Add(node1);
 }
} 		Property: Nodes[i].Shape.GatewayType

<SfDiagramComponent Nodes="@NodeCollection" />
@code
{
 public DiagramObjectCollection<Node> NodeCollection = new DiagramObjectCollection<Node>();
 protected override void OnInitialized()
 {
  Node node1 = new Node()
  {
   Height = 100,
   Width = 100,
   ID = "node",
   OffsetX = 300,
   OffsetY = 288,
   Shape = new BpmnGateway()
   {
    GatewayType = BpmnGatewayType.None
   }
  };
  NodeCollection.Add(node1);
 }
}
Set the BPMN DataObject shape Property: Nodes[i].Shape.DataObject

<SfDiagram Nodes="@NodeCollection" />
@code
{
 public ObservableCollection<DiagramNode> NodeCollection = new ObservableCollection<DiagramNode>();
 protected override void OnInitialized()
 {
  DiagramNode node1 = new DiagramNode()
  {
   Id = "node",
   OffsetX = 300,
   OffsetY = 288,
   Width = 100,
   Height = 100,
   Shape=new DiagramShape()
   {
    Type = Shapes.Bpmn, BpmnShape = BpmnShapes.DataObject,
    DataObject = new DiagramBpmnDataObject()
    {
     Collection = true,
     Type = BpmnDataObjects.Input
    }
   }
  };
  NodeCollection.Add(node1);
 }
} 		Property: Nodes[i].Shape

Sets shapes as BPMNDataObject

<SfDiagramComponent Nodes="@NodeCollection" />
@code
{
 public DiagramObjectCollection<Node> NodeCollection = new DiagramObjectCollection<Node>();
 protected override void OnInitialized()
 {
  Node node1 = new Node()
  {
   Height = 100,
   Width = 100,
   ID = "node",
   OffsetX = 300,
   OffsetY = 288,
   Shape = new BpmnDataObject()
   {
    IsCollectiveData = true,
    DataObjectType = BpmnDataObjectType.None,
   }
  };
  NodeCollection.Add(node1);
 }
}
Sets the collection property for the BPMN DataObject Property: Nodes[i].Shape.DataObject.Collection

<SfDiagram Nodes="@NodeCollection" />
@code
{
 public ObservableCollection<DiagramNode> NodeCollection = new ObservableCollection<DiagramNode>();
 protected override void OnInitialized()
 {
  DiagramNode node1 = new DiagramNode()
  {
   Id = "node",
   OffsetX = 300,
   OffsetY = 288,
   Width = 100,
   Height = 100,
   Shape=new DiagramShape()
   {
    Type = Shapes.Bpmn, BpmnShape = BpmnShapes.DataObject,
    DataObject = new DiagramBpmnDataObject()
    {
     Collection = true,
     Type = BpmnDataObjects.Input
    }
   }
  };
  NodeCollection.Add(node1);
 }
} 		Property: Nodes[i].Shape.IsCollectiveData

Sets shapes as BPMNDataObject

<SfDiagramComponent Nodes="@NodeCollection" />
@code
{
 public DiagramObjectCollection<Node> NodeCollection = new DiagramObjectCollection<Node>();
 protected override void OnInitialized()
 {
  Node node1 = new Node()
  {
   Height = 100,
   Width = 100,
   ID = "node",
   OffsetX = 300,
   OffsetY = 288,
   Shape = new BpmnDataObject()
   {
    IsCollectiveData = true,
    DataObjectType = BpmnDataObjectType.None,
   }
  };
  NodeCollection.Add(node1);
 }
}
Sets the type of the BPMN DataObject Property: Nodes[i].Shape.DataObject.Type

<SfDiagram Nodes="@NodeCollection" />
@code
{
 public ObservableCollection<DiagramNode> NodeCollection = new ObservableCollection<DiagramNode>();
 protected override void OnInitialized()
 {
  DiagramNode node1 = new DiagramNode()
  {
   Id = "node",
   OffsetX = 300,
   OffsetY = 288,
   Width = 100,
   Height = 100,
   Shape=new DiagramShape()
   {
    Type = Shapes.Bpmn, BpmnShape = BpmnShapes.DataObject,
    DataObject = new DiagramBpmnDataObject()
    {
     Collection = true,
     Type = BpmnDataObjects.Input
    }
   }
  };
  NodeCollection.Add(node1);
 }
} 		Property: Nodes[i].Shape.DataObjectType

Sets shapes as BPMNDataObject

<SfDiagramComponent Nodes="@NodeCollection" />
@code
{
 public DiagramObjectCollection<Node> NodeCollection = new DiagramObjectCollection<Node>();
 protected override void OnInitialized()
 {
  Node node1 = new Node()
  {
   Height = 100,
   Width = 100,
   ID = "node",
   OffsetX = 300,
   OffsetY = 288,
   Shape = new BpmnDataObject()
   {
    IsCollectiveData = true,
    DataObjectType = BpmnDataObjectType.None,
   }
  };
  NodeCollection.Add(node1);
 }
}
Set the BPMN DataSource shape Property: Nodes[i].Shape.BpmnShape

<SfDiagram Nodes="@NodeCollection" />
@code
{
 public ObservableCollection<DiagramNode> NodeCollection = new ObservableCollection<DiagramNode>();
 protected override void OnInitialized()
 {
  DiagramNode node1 = new DiagramNode()
  {
   Id = "node",
   OffsetX = 300,
   OffsetY = 288,
   Width = 100,
   Height = 100,
   Shape=new DiagramShape()
   {
    Type = Shapes.Bpmn, BpmnShape = BpmnShapes.DataSource
   }
  };
  NodeCollection.Add(node1);
 }
} 		Property: Nodes[i].Shape

Sets a shape as a BpmnDataStore

<SfDiagramComponent Nodes="@NodeCollection" />
@code
{
 public DiagramObjectCollection<Node> NodeCollection = new DiagramObjectCollection<Node>();
 protected override void OnInitialized()
 {
  Node node1 = new Node()
  {
   Height = 100,
   Width = 100,
   ID = "node",
   OffsetX = 300,
   OffsetY = 288,
   Shape = new BpmnDataStore()
  };
  NodeCollection.Add(node1);
 }
}
Sets the BPMN Activity Task shape Property: Nodes[i].Shape.Activity.Activity

<SfDiagram Nodes="@NodeCollection" />
@code
{
 public ObservableCollection<DiagramNode> NodeCollection = new ObservableCollection<DiagramNode>();
 protected override void OnInitialized()
 {
  DiagramNode node1 = new DiagramNode()
  {
   Id = "node",
   OffsetX = 100,
   OffsetY = 100,
   Width = 100,
   Height = 100,
   Shape=new DiagramShape()
   {
    Type = Shapes.Bpmn, BpmnShape = BpmnShapes.Activity,Activity = new DiagramBpmnActivity() { Activity = BpmnActivities.Task },
   }
  };
  NodeCollection.Add(node1);
 }
} 		Property: Nodes[i].Shape.ActivityType

Sets a shape as a BpmnActivity

<SfDiagramComponent Nodes="@NodeCollection" />
@code
{
 public DiagramObjectCollection<Node> NodeCollection = new DiagramObjectCollection<Node>();
 protected override void OnInitialized()
 {
  Node node1 = new Node()
  {
   Height = 100,
   Width = 100,
   ID = "node",
   OffsetX = 300,
   OffsetY = 288,
   Shape = new BpmnActivity(){ ActivityType = BpmnActivityType.Task }
  };
  NodeCollection.Add(node1);
 }
}
Sets the task property of the BPMN Activity Property: Nodes[i].Shape.Activity.Task.Type

<SfDiagram Nodes="@NodeCollection" />
@code
{
 public ObservableCollection<DiagramNode> NodeCollection = new ObservableCollection<DiagramNode>();
 protected override void OnInitialized()
 {
  DiagramNode node1 = new DiagramNode()
  {
   Id = "node",
   OffsetX = 100,
   OffsetY = 100,
   Width = 100,
   Height = 100,
   Shape=new DiagramShape()
   {
    Type = Shapes.Bpmn, BpmnShape = BpmnShapes.Activity,
    Activity = new DiagramBpmnActivity() {
      Activity = BpmnActivities.Task,
     Task = new DiagramBpmnTask() { Type = BpmnTasks.Send }
    }
   }
  };
  NodeCollection.Add(node1);
 }
} 		Property: Nodes[i].Shape.TaskType

Sets a shape as a BpmnActivity

<SfDiagramComponent Nodes="@NodeCollection" />
@code
{
 public DiagramObjectCollection<Node> NodeCollection = new DiagramObjectCollection<Node>();
 protected override void OnInitialized()
 {
  Node node1 = new Node()
  {
   Height = 100,
   Width = 100,
   ID = "node",
   OffsetX = 100,
   OffsetY = 1001,
   Shape = new BpmnActivity(){ ActivityType = BpmnActivityType.Task, TaskType = BpmnTaskType.Send }
  };
  NodeCollection.Add(node1);
 }
}
Sets the collapsed sub-process shape in BPMN activity Property: Nodes[i].Shape.Activity.SubProcess.Collapsed

<SfDiagram Nodes="@NodeCollection" />
@code
{
 public ObservableCollection<DiagramNode> NodeCollection = new ObservableCollection<DiagramNode>();
 protected override void OnInitialized()
 {
  DiagramNode node1 = new DiagramNode()
  {
   Id = "node",
   OffsetX = 100,
   OffsetY = 100,
   Width = 100,
   Height = 100,
   Shape=new DiagramShape()
   {
    Type = Shapes.Bpmn, BpmnShape = BpmnShapes.Activity,
    Activity = new DiagramBpmnActivity() {
      Activity = BpmnActivities.SubProcess,
     SubProcess = new DiagramBpmnSubProcess() { Collapsed = true }
    }
   }
  };
  NodeCollection.Add(node1);
 }
} 		Property: Nodes[i].Shape.ActivityType

Sets a shape as a BpmnActivity

<SfDiagramComponent Nodes="@NodeCollection" />
@code
{
 public DiagramObjectCollection<Node> NodeCollection = new DiagramObjectCollection<Node>();
 protected override void OnInitialized()
 {
  Node node1 = new Node()
  {
   Height = 100,
   Width = 100,
   ID = "node",
   OffsetX = 100,
   OffsetY = 1001,
   Shape = new BpmnActivity(){ ActivityType = BpmnActivityType.CollapsedSubProcess }
  };
  NodeCollection.Add(node1);
 }
}
Defines the Loop property in BPMN activity shape Property: Nodes[i].Shape.Activity.SubProcess.Loop

<SfDiagram Nodes="@NodeCollection" />
@code
{
 public ObservableCollection<DiagramNode> NodeCollection = new ObservableCollection<DiagramNode>();
 protected override void OnInitialized()
 {
  DiagramNode node1 = new DiagramNode()
  {
   Id = "node",
   OffsetX = 100,
   OffsetY = 100,
   Width = 100,
   Height = 100,
   Shape=new DiagramShape()
   {
    Type = Shapes.Bpmn, BpmnShape = BpmnShapes.Activity,
    Activity = new DiagramBpmnActivity() {
      Activity = BpmnActivities.SubProcess,
     SubProcess = new DiagramBpmnSubProcess() { Collapsed = true, Loop = BpmnLoops.Standard }
    }
   }
  };
  NodeCollection.Add(node1);
 }
} 		Property: Nodes[i].Shape.Loop

Sets a shape as a BpmnActivity

<SfDiagramComponent Nodes="@NodeCollection" />
@code
{
 public DiagramObjectCollection<Node> NodeCollection = new DiagramObjectCollection<Node>();
 protected override void OnInitialized()
 {
  Node node1 = new Node()
  {
   Height = 100,
   Width = 100,
   ID = "node",
   OffsetX = 100,
   OffsetY = 1001,
   Shape = new BpmnActivity(){ ActivityType = BpmnActivityType.CollapsedSubProcess, Loop = BpmnLoopCharacteristic.Standard }
  };
  NodeCollection.Add(node1);
 }
}
Defines the Compensation property in BPMN activity shape Property: Nodes[i].Shape.Activity.SubProcess.Compensation

<SfDiagram Nodes="@NodeCollection" />
@code
{
 public ObservableCollection<DiagramNode> NodeCollection = new ObservableCollection<DiagramNode>();
 protected override void OnInitialized()
 {
  DiagramNode node1 = new DiagramNode()
  {
   Id = "node",
   OffsetX = 100,
   OffsetY = 100,
   Width = 100,
   Height = 100,
   Shape=new DiagramShape()
   {
    Type = Shapes.Bpmn, BpmnShape = BpmnShapes.Activity,
    Activity = new DiagramBpmnActivity() {
      Activity = BpmnActivities.SubProcess,
     SubProcess = new DiagramBpmnSubProcess() { Collapsed = true, Compensation = true }
    }
   }
  };
  NodeCollection.Add(node1);
 }
} 		Property: Nodes[i].Shape.IsCompensation

Sets a shape as a BpmnActivity

<SfDiagramComponent Nodes="@NodeCollection" />
@code
{
 public DiagramObjectCollection<Node> NodeCollection = new DiagramObjectCollection<Node>();
 protected override void OnInitialized()
 {
  Node node1 = new Node()
  {
   Height = 100,
   Width = 100,
   ID = "node",
   OffsetX = 100,
   OffsetY = 1001,
   Shape = new BpmnActivity(){ ActivityType = BpmnActivityType.CollapsedSubProcess, IsCompensation = true }
  };
  NodeCollection.Add(node1);
 }
}
Defines the Compensation property in BPMN activity shape Property: Nodes[i].Shape.Activity.SubProcess.Compensation

<SfDiagram Nodes="@NodeCollection" />
@code
{
 public ObservableCollection<DiagramNode> NodeCollection = new ObservableCollection<DiagramNode>();
 protected override void OnInitialized()
 {
  DiagramNode node1 = new DiagramNode()
  {
   Id = "node",
   OffsetX = 100,
   OffsetY = 100,
   Width = 100,
   Height = 100,
   Shape=new DiagramShape()
   {
    Type = Shapes.Bpmn, BpmnShape = BpmnShapes.Activity,
    Activity = new DiagramBpmnActivity() {
      Activity = BpmnActivities.SubProcess,
     SubProcess = new DiagramBpmnSubProcess() { Collapsed = true, Compensation = true }
    }
   }
  };
  NodeCollection.Add(node1);
 }
} 		Property: Nodes[i].Shape.IsCompensation

Sets a shape as a BpmnActivity

<SfDiagramComponent Nodes="@NodeCollection" />
@code
{
 public DiagramObjectCollection<Node> NodeCollection = new DiagramObjectCollection<Node>();
 protected override void OnInitialized()
 {
  Node node1 = new Node()
  {
   Height = 100,
   Width = 100,
   ID = "node",
   OffsetX = 100,
   OffsetY = 1001,
   Shape = new BpmnActivity(){ ActivityType = BpmnActivityType.CollapsedSubProcess, IsCompensation = true }
  };
  NodeCollection.Add(node1);
 }
}
Defines the Call property in BPMN activity shape Property: Nodes[i].Shape.Activity.SubProcess.Call

<SfDiagram Nodes="@NodeCollection" />
@code
{
 public ObservableCollection<DiagramNode> NodeCollection = new ObservableCollection<DiagramNode>();
 protected override void OnInitialized()
 {
  DiagramNode node1 = new DiagramNode()
  {
   Id = "node",
   OffsetX = 100,
   OffsetY = 100,
   Width = 100,
   Height = 100,
   Shape=new DiagramShape()
   {
    Type = Shapes.Bpmn, BpmnShape = BpmnShapes.Activity,
    Activity = new DiagramBpmnActivity() {
      Activity = BpmnActivities.SubProcess,
     SubProcess = new DiagramBpmnSubProcess() { Collapsed = true, Call = true }
    }
   }
  };
  NodeCollection.Add(node1);
 }
} 		Property: Nodes[i].Shape.IsCall

Sets a shape as a BpmnActivity

<SfDiagramComponent Nodes="@NodeCollection" />
@code
{
 public DiagramObjectCollection<Node> NodeCollection = new DiagramObjectCollection<Node>();
 protected override void OnInitialized()
 {
  Node node1 = new Node()
  {
   Height = 100,
   Width = 100,
   ID = "node",
   OffsetX = 100,
   OffsetY = 1001,
   Shape = new BpmnActivity(){ ActivityType = BpmnActivityType.CollapsedSubProcess, IsCall = true }
  };
  NodeCollection.Add(node1);
 }
}
Defines the Boundary property in BPMN subprocess activity shape Property: Nodes[i].Shape.Activity.SubProcess.Boundary

<SfDiagram Nodes="@NodeCollection" />
@code
{
 public ObservableCollection<DiagramNode> NodeCollection = new ObservableCollection<DiagramNode>();
 protected override void OnInitialized()
 {
  DiagramNode node1 = new DiagramNode()
  {
   Id = "node",
   OffsetX = 100,
   OffsetY = 100,
   Width = 100,
   Height = 100,
   Shape=new DiagramShape()
   {
    Type = Shapes.Bpmn, BpmnShape = BpmnShapes.Activity,
    Activity = new DiagramBpmnActivity() {
      Activity = BpmnActivities.SubProcess,
     SubProcess = new DiagramBpmnSubProcess() { Collapsed = true, Boundary = BpmnBoundary.Call }
    }
   }
  };
  NodeCollection.Add(node1);
 }
} 		Property: Nodes[i].Shape.SubProcessType

Sets a shape as a BpmnActivity

<SfDiagramComponent Nodes="@NodeCollection" />
@code
{
 public DiagramObjectCollection<Node> NodeCollection = new DiagramObjectCollection<Node>();
 protected override void OnInitialized()
 {
  Node node1 = new Node()
  {
   Height = 100,
   Width = 100,
   ID = "node",
   OffsetX = 100,
   OffsetY = 1001,
   Shape = new BpmnActivity(){ ActivityType = BpmnActivityType.CollapsedSubProcess, SubProcessType = BpmnSubProcessType.Event }
  };
  NodeCollection.Add(node1);
 }
}
Sets the Event sub process of bpmn activity Property: Nodes[i].Shape.Activity.SubProcess.Events

<SfDiagram Nodes="@NodeCollection" />
@code
{
 public ObservableCollection<DiagramNode> NodeCollection = new ObservableCollection<DiagramNode>();
 protected override void OnInitialized()
 {
  DiagramNode node1 = new DiagramNode()
  {
   Id = "node",
   OffsetX = 100,
   OffsetY = 100,
   Width = 100,
   Height = 100,
   Shape=new DiagramShape()
   {
    Type = Shapes.Bpmn, BpmnShape = BpmnShapes.Activity,
    Activity = new DiagramBpmnActivity() {
      Activity = BpmnActivities.SubProcess,
     SubProcess = new DiagramBpmnSubProcess() { Collapsed = true, Type = BpmnSubProcessTypes.Event,
      Events = new ObservableCollection<DiagramBpmnSubEvent>()
      {
      new DiagramBpmnSubEvent()
      {
      Event = BpmnEvents.Start, Trigger = BpmnTriggers.Message
      }
      }
     }
    }
   }
  };
  NodeCollection.Add(node1);
 }
} 		Not supported
Sets the Transaction sub process of bpmn activity Property: Nodes[i].Shape.Activity.SubProcess.Transaction

<SfDiagram Nodes="@NodeCollection" />
@code
{
 public ObservableCollection<DiagramNode> NodeCollection = new ObservableCollection<DiagramNode>();
 protected override void OnInitialized()
 {
  DiagramNode node1 = new DiagramNode()
  {
   Id = "node",
   OffsetX = 100,
   OffsetY = 100,
   Width = 100,
   Height = 100,
   Shape=new DiagramShape()
   {
    Type = Shapes.Bpmn, BpmnShape = BpmnShapes.Activity,
    Activity = new DiagramBpmnActivity()
    {
      Activity = BpmnActivities.SubProcess,
      SubProcess = new DiagramBpmnSubProcess()
      {
        Collapsed = true, Type = BpmnSubProcessTypes.Event,
        Transaction = new DiagramBpmnTransactionSubProcess()
        {
         Cancel = new CancelSubEvent(){ Visible = true,Offset = new BpmnSubEventOffset() { X = 0.25, Y = 1 } }
         Failure = new FailureSubEvent(){ Offset = new BpmnSubEventOffset() { X = 0.75, Y = 1 }}
        }
      }
     }
    }
   };
  NodeCollection.Add(node1);
 }
} 		Not supported
Defines the children of the BPMN sub process using the Processes property Property: Nodes[i].Shape.Activity.SubProcess.Processes

<SfDiagram Nodes="@NodeCollection" />
@code
{
 public ObservableCollection<DiagramNode> NodeCollection = new ObservableCollection<DiagramNode>();
 protected override void OnInitialized()
 {
  DiagramNode startNode = new DiagramNode()
  {
   Id = "Start",
   Margin = new NodeMargin() { Left = 10, Top = 50 },
   Width = 50,
   Height = 50,
   Shape=new DiagramShape()
   {
    Type = Shapes.Bpmn, BpmnShape = BpmnShapes.Event,
    Event = new DiagramBpmnEvent() { Event = BpmnEvents.Start }
   }
  };
  NodeCollection.Add(startNode);

  DiagramNode node1 = new DiagramNode()
  {
   Id = "ActivityProcessNode",
   OffsetX = 200,OffsetY = 200,
   Constraints = NodeConstraints.AllowDrop,
   Width = 300,
   Height = 300,
   Shape=new DiagramShape()
   {
    Type = Shapes.Bpmn, BpmnShape = BpmnShapes.Activity,
    Activity = new DiagramBpmnActivity()
    {
      Activity = BpmnActivities.SubProcess,
      SubProcess = new DiagramBpmnSubProcess()
      {
        Collapsed = false, Type = BpmnSubProcessTypes.Event,
        Processes = new string[] { "Start" }
      }
     }
    }
   };
  NodeCollection.Add(node1);
 }
} 		Property: Nodes[i].Shape.Children

Sets the shape as BpmnExpandedSubProcess

<SfDiagramComponent Nodes="@NodeCollection" />
@code
{
 public DiagramObjectCollection<Node> NodeCollection = new DiagramObjectCollection<Node>();
 protected override void OnInitialized()
 {
  Node startNode = new Node()
  {
   ID = "Start",
   Margin = new DiagramMargin() { Left = 10, Top = 50 },
   Width = 50,
   Height = 50,
   Shape = new BpmnActivity() { ActivityType = BpmnActivityType.Task }
   }
  };
  NodeCollection.Add(startNode);

  Node node1 = new Node()
  {
   Id = "ActivityProcessNode",
   OffsetX = 200,OffsetY = 200,
   Constraints = NodeConstraints.AllowDrop,
   Width = 300,
   Height = 300,
   Shape = new BpmnExpandedSubProcess()
   {
    Children = new DiagramObjectCollection<string>() { "node1" }
    }
   };
  NodeCollection.Add(node1);
 }
}
Create a BPMN group node Property: Nodes[i].Shape.BpmnShape

<SfDiagram Nodes="@NodeCollection" />
@code
{
 public ObservableCollection<DiagramNode> NodeCollection = new ObservableCollection<DiagramNode>();
 protected override void OnInitialized()
 {
  DiagramNode node1 = new DiagramNode()
  {
   Id = "node1",
   OffsetX = 100,
   OffsetY = 100,
   Width = 100,
   Height = 100,
   Shape=new DiagramShape(){Type = Shapes.Bpmn, BpmnShape = BpmnShapes.Group }
  };
  NodeCollection.Add(node1);
 }
} 		Not supported
Create a BPMN Text annotation and set the direction of the text annotation shape Property: Nodes[i].Shape.Annotations

<SfDiagram Nodes="@NodeCollection" />
@code
{
 public ObservableCollection<DiagramNode> NodeCollection = new ObservableCollection<DiagramNode>();
 protected override void OnInitialized()
 {
  DiagramNode node1 = new DiagramNode()
  {
   Id = "node",
   OffsetX = 300,
   OffsetY = 288,
   Width = 100,
   Height = 100,
   Shape=new DiagramShape()
   {
    Type = Shapes.Bpmn, BpmnShape = BpmnShapes.DataObject,
    DataObject = new DiagramBpmnDataObject()
    {
     Collection = true,
     Type = BpmnDataObjects.Input
    },
   Annotations = new ObservableCollection<DiagramBpmnAnnotation>() { new DiagramBpmnAnnotation() { Text = "BPMNShape", Angle=60, Length=50, Width=50, Height=50 } }
   }
  };
  NodeCollection.Add(node1);
 }
} 		Property: Nodes[i].Shape.TextAnnotationDirection

Set the shape as a BpmnTextAnnotation

<SfDiagramComponent Nodes="@NodeCollection" />
@code
{
 public DiagramObjectCollection<Node> NodeCollection = new DiagramObjectCollection<Node>();
 protected override void OnInitialized()
 {
  Node node1 = new Node()
  {
   Height = 100,
   Width = 100,
   ID = "node",
   OffsetX = 300,
   OffsetY = 288,
   Shape = new BpmnTextAnnotation() { TextAnnotationDirection = TextAnnotationDirection.Auto }
  };
  NodeCollection.Add(node1);
 }
}
Sets the Target of the text annotation shape Property: Nodes[i].Shape.Annotations

<SfDiagram Nodes="@NodeCollection" />
@code
{
 public ObservableCollection<DiagramNode> NodeCollection = new ObservableCollection<DiagramNode>();
 protected override void OnInitialized()
 {
  DiagramNode node1 = new DiagramNode()
  {
   Id = "node",
   OffsetX = 300,
   OffsetY = 288,
   Width = 100,
   Height = 100,
   Shape=new DiagramShape()
   {
    Type = Shapes.Bpmn, BpmnShape = BpmnShapes.DataObject,
    DataObject = new DiagramBpmnDataObject()
    {
     Collection = true,
     Type = BpmnDataObjects.Input
    },
   Annotations = new ObservableCollection<DiagramBpmnAnnotation>() { new DiagramBpmnAnnotation() { Text = "BPMNShape", Angle=60, Length=50, Width=50, Height=50 } }
   }
  };
  NodeCollection.Add(node1);
 }
} 		Property: Nodes[i].Shape.TextAnnotationTarget

Set the shape as a BpmnTextAnnotation

<SfDiagramComponent Nodes="@NodeCollection" />
@code
{
 public DiagramObjectCollection<Node> NodeCollection = new DiagramObjectCollection<Node>();
 protected override void OnInitialized()
 {
  Node node1 = new Node()
  {
   ID = "node1",
   OffsetX = 500,OffsetY = 500,
   Width = 100,
   Height = 100,
   Shape = new BpmnActivity() { ActivityType = BpmnActivityType.Task }
   }
  };
  NodeCollection.Add(node1);

  Node node2 = new Node()
  {
   Height = 100,
   Width = 100,
   ID = "node2",
   OffsetX = 600,
   OffsetY = 350,
   Shape = new BpmnTextAnnotation() { TextAnnotationDirection = TextAnnotationDirection.Bottom, TextAnnotationTarget = "node1" }
  };
  NodeCollection.Add(node2);
 }
}
Sets a UML classifier shape Property: Nodes[i].Shape.Classifier

<SfDiagram Nodes="@NodeCollection" />
@code
{
 public ObservableCollection<DiagramNode> NodeCollection = new ObservableCollection<DiagramNode>();
 protected override void OnInitialized()
 {
  DiagramNode node1 = new DiagramNode()
  {
   Id = "node",
   OffsetX = 300,
   OffsetY = 288,
   Width = 100,
   Height = 100,
   Shape=new DiagramShape()
   {
    Type = Shapes.UmlClassifier, Classifier = ClassifierShape.Class
   }
  };
  NodeCollection.Add(node1);
 }
} 		Not supported
Sets a UML activity shape Property: Nodes[i].Shape.UmlActivityShape

<SfDiagram Nodes="@NodeCollection" />
@code
{
 public ObservableCollection<DiagramNode> NodeCollection = new ObservableCollection<DiagramNode>();
 protected override void OnInitialized()
 {
  DiagramNode node1 = new DiagramNode()
  {
   Id = "node",
   OffsetX = 300,
   OffsetY = 288,
   Width = 100,
   Height = 100,
   Shape=new DiagramShape()
   {
    Type = Shapes.UmlActivity, UmlActivityShape = UmlActivityShapes.Action
   }
  };
  NodeCollection.Add(node1);
 }
} 		Not supported

Annotation for Node

Behavior API in SfDiagram API in SfDiagramComponent
Defines a collection of annotation to be render in the node Property: Nodes[i].Annotations

Sets a annotation property as ObservableCollection<DiagramNodeAnnotation>

<SfDiagram Nodes="@NodeCollection" />
@code
{
 public ObservableCollection<DiagramNode> NodeCollection = new ObservableCollection<DiagramNode>();
 protected override void OnInitialized()
 {
  DiagramNode node1 = new DiagramNode()
  {
   Id = "node",
   OffsetX = 300,
   OffsetY = 288,
   Width = 100,
   Height = 100,
   Annotations = new ObservableCollection<DiagramNodeAnnotation>()
   {
    new DiagramNodeAnnotation()
    {
     Content = "node",
    }
   }
  };
  NodeCollection.Add(node1);
 }
} 		Property: Nodes[i].Annotations

Sets a annotation property as DiagramObjectCollection<ShapeAnnotation>

<SfDiagramComponent Nodes="@NodeCollection" />
@code
{
 public DiagramObjectCollection<Node> NodeCollection = new DiagramObjectCollection<Node>();
 protected override void OnInitialized()
 {
  Node node1 = new Node()
  {
   Height = 100,
   Width = 100,
   ID = "node",
   OffsetX = 300,
   OffsetY = 288,
   Annotations = new DiagramObjectCollection<ShapeAnnotation>()
   {
    new ShapeAnnotation()
    {
     Content="node",
    }
   }
  };
  NodeCollection.Add(node1);
 }
}
Sets the AddInfo property for the annotation Property: Nodes[i].Annotations[i].AddInfo

<SfDiagram Nodes="@NodeCollection" />
@code
{
 public ObservableCollection<DiagramNode> NodeCollection = new ObservableCollection<DiagramNode>();
 protected override void OnInitialized()
 {
  DiagramNode node1 = new DiagramNode()
  {
   Id = "node",
   OffsetX = 300,
   OffsetY = 288,
   Width = 100,
   Height = 100,
   Annotations = new ObservableCollection<DiagramNodeAnnotation>()
   {
    new DiagramNodeAnnotation()
    {
     AddInfo = "Node's Addition Information", Content = "node",
    }
   }
  };
  NodeCollection.Add(node1);
 }
} 		Property: Nodes[i].Annotations[i].AdditionalInfo

<SfDiagramComponent Nodes="@NodeCollection" />
@code
{
 public DiagramObjectCollection<Node> NodeCollection = new DiagramObjectCollection<Node>();
 protected override void OnInitialized()
 {
  Dictionary<string, object> AnnotationInfo = new Dictionary<string, object>();
  AnnotationInfo.Add("AnnotationInfo", "Annotation's Addition Information");
  Node node1 = new Node()
  {
   Height = 100,
   Width = 100,
   ID = "node",
   OffsetX = 300,
   OffsetY = 288,
   Annotations = new DiagramObjectCollection<ShapeAnnotation>()
   {
    new ShapeAnnotation()
    {
     AdditionalInfo=AnnotationInfo,Content="node",
    }
   }
  };
  NodeCollection.Add(node1);
 }
}
Sets the AnnotationType property for the annotation Property: Nodes[i].Annotations[i].AnnotationType

<SfDiagram Nodes="@NodeCollection" />
@code
{
 public ObservableCollection<DiagramNode> NodeCollection = new ObservableCollection<DiagramNode>();
 protected override void OnInitialized()
 {
  DiagramNode node1 = new DiagramNode()
  {
   Id = "node",
   OffsetX = 300,
   OffsetY = 288,
   Width = 100,
   Height = 100,
   Annotations = new ObservableCollection<DiagramNodeAnnotation>()
   {
    new DiagramNodeAnnotation()
    {
     AnnotationType = AnnotationType.String, Content = "node",
    }
   }
  };
  NodeCollection.Add(node1);
 }
} 		Property: Nodes[i].Annotations[i].UseTemplate

Gets or sets a value indicating whether annotation should be rendered as a template using value defined in AnnotationTemplate property.



<SfDiagramComponent Width="1200px" Height="700px" Nodes="@nodes">
 <DiagramTemplates>
  <AnnotationTemplate>
    @if (context is Annotation annotation)
     {
      if (annotation.ID.Contains("TemplateAnnotation1"))
      {
       string ID = annotation.ID + "TemplateContent";
       <div id="@ID" style="height: 100%; width: 100%; display: flex; justify-content: center; align-items: center;"><button>Button</button></div>
      }
     }
   </AnnotationTemplate>
 </DiagramTemplates>
</SfDiagramComponent>
@code {
 private DiagramObjectCollection<Node> nodes = new DiagramObjectCollection<Node>();
 protected override void OnInitialized()
 {
  Node node1 = new Node()
  {
   ID = "node1",OffsetX = 100,OffsetY = 100,Width = 70,Height = 70,
    Annotations = new DiagramObjectCollection<ShapeAnnotation>()
    {
    new ShapeAnnotation()
    {
    ID = "TemplateAnnotation1", UseTemplate = true, Height = 30,Width = 60, Content = "Annotation", Offset = new DiagramPoint(){ X = 0.5,Y = 1.5}
    }
   },
    Shape = new BasicShape() { Type = NodeShapes.Basic, Shape = NodeBasicShapes.Star }
   };
  nodes.Add(node1);
 }
}
Sets the DragLimit property for the annotation Property: Nodes[i].Annotations[i].DragLimit

<SfDiagram Nodes="@NodeCollection" />
@code
{
 public ObservableCollection<DiagramNode> NodeCollection = new ObservableCollection<DiagramNode>();
 protected override void OnInitialized()
 {
  DiagramNode node1 = new DiagramNode()
  {
   Id = "node",
   OffsetX = 300,
   OffsetY = 288,
   Width = 100,
   Height = 100,
   Annotations = new ObservableCollection<DiagramNodeAnnotation>()
   {
    new DiagramNodeAnnotation()
    {
     DragLimit = new NodeAnnotationDragLimit() { Left = 10 }, Content = "node",
    }
   }
  };
  NodeCollection.Add(node1);
 }
} 		Not supported
Sets the Id property for the annotation Property: Nodes[i].Annotations[i].Id

<SfDiagram Nodes="@NodeCollection" />
@code
{
 public ObservableCollection<DiagramNode> NodeCollection = new ObservableCollection<DiagramNode>();
 protected override void OnInitialized()
 {
  DiagramNode node1 = new DiagramNode()
  {
   Id = "node",
   OffsetX = 300,
   OffsetY = 288,
   Width = 100,
   Height = 100,
   Annotations = new ObservableCollection<DiagramNodeAnnotation>()
   {
    new DiagramNodeAnnotation()
    {
     Id = "Label1", Content = "node",
    }
   }
  };
  NodeCollection.Add(node1);
 }
} 		Property: Nodes[i].Annotations[i].ID

<SfDiagramComponent Nodes="@NodeCollection" />
@code
{
 public DiagramObjectCollection<Node> NodeCollection = new DiagramObjectCollection<Node>();
 protected override void OnInitialized()
 {
  Node node1 = new Node()
  {
   Height = 100,
   Width = 100,
   ID = "node",
   OffsetX = 300,
   OffsetY = 288,
   Annotations = new DiagramObjectCollection<ShapeAnnotation>()
   {
    new ShapeAnnotation()
    {
     ID = "Label1", Content="node",
    }
   }
  };
  NodeCollection.Add(node1);
 }
}
Sets the Hyperlink property for the annotation Property: Nodes[i].Annotations[i].Hyperlink

<SfDiagram Nodes="@NodeCollection" />
@code
{
 public ObservableCollection<DiagramNode> NodeCollection = new ObservableCollection<DiagramNode>();
 protected override void OnInitialized()
 {
  DiagramNode node1 = new DiagramNode()
  {
   Id = "node",
   OffsetX = 300,
   OffsetY = 288,
   Width = 100,
   Height = 100,
   Annotations = new ObservableCollection<DiagramNodeAnnotation>()
   {
    new DiagramNodeAnnotation()
    {
     Hyperlink = new NodeHyperlink() { Color = "red", Content = "HyperlinkContent", Link = "https://blazor.syncfusion.com/" }, Content = "node",
    }
   }
  };
  NodeCollection.Add(node1);
 }
} 		Property: Nodes[i].Annotations[i].Hyperlink

<SfDiagramComponent Nodes="@NodeCollection" />
@code
{
 public DiagramObjectCollection<Node> NodeCollection = new DiagramObjectCollection<Node>();
 protected override void OnInitialized()
 {
  Node node1 = new Node()
  {
   Height = 100,
   Width = 100,
   ID = "node",
   OffsetX = 300,
   OffsetY = 288,
   Annotations = new DiagramObjectCollection<ShapeAnnotation>()
   {
    new ShapeAnnotation()
    {
     Hyperlink = new HyperlinkSettings() { Color = "red", Content = "HyperlinkContent", Url = "https://blazor.syncfusion.com/" }, Content="node",
    }
   }
  };
  NodeCollection.Add(node1);
 }
}
Sets the Style property for the annotation Property: Nodes[i].Annotations[i].Style

<SfDiagram Nodes="@NodeCollection" />
@code
{
 public ObservableCollection<DiagramNode> NodeCollection = new ObservableCollection<DiagramNode>();
 protected override void OnInitialized()
 {
  DiagramNode node1 = new DiagramNode()
  {
   Id = "node",
   OffsetX = 300,
   OffsetY = 288,
   Width = 100,
   Height = 100,
   Annotations = new ObservableCollection<DiagramNodeAnnotation>()
   {
    new DiagramNodeAnnotation()
    {
     Content = "node", Style = new AnnotationStyle() { Bold = true, Color = "orange", FontFamily = "Arial", FontSize = 20, Italic=true,TextAlign= TextAlign.Right, TextDecoration = TextDecoration.Underline,TextOverflow = TextOverflow.Ellipsis, TextWrapping = Syncfusion.Blazor.Diagrams.TextWrap.WrapWithOverflow }
    }
   }
  };
  NodeCollection.Add(node1);
 }
} 		Property: Nodes[i].Annotations[i].Style

<SfDiagramComponent Nodes="@NodeCollection" />
@code
{
 public DiagramObjectCollection<Node> NodeCollection = new DiagramObjectCollection<Node>();
 protected override void OnInitialized()
 {
  Node node1 = new Node()
  {
   Height = 100,
   Width = 100,
   ID = "node",
   OffsetX = 300,
   OffsetY = 288,
   Annotations = new DiagramObjectCollection<ShapeAnnotation>()
   {
    new ShapeAnnotation()
    {
     Content="node",Style = new TextStyle(){Bold = true, Color = "orange", FontFamily = "Arial", FontSize = 20, Italic=true,TextAlign= TextAlign.Right, TextDecoration = TextDecoration.Underline, TextOverflow = TextOverflow.Ellipsis,TextWrapping = Syncfusion.Blazor.Diagram.TextWrap.WrapWithOverflow }
    }
   }
  };
  NodeCollection.Add(node1);
 }
}
Sets the RotateAngle property for the annotation Property: Nodes[i].Annotations[i].RotateAngle

<SfDiagram Nodes="@NodeCollection" />
@code
{
 public ObservableCollection<DiagramNode> NodeCollection = new ObservableCollection<DiagramNode>();
 protected override void OnInitialized()
 {
  DiagramNode node1 = new DiagramNode()
  {
   Id = "node",
   OffsetX = 300,
   OffsetY = 288,
   Width = 100,
   Height = 100,
   Annotations = new ObservableCollection<DiagramNodeAnnotation>()
   {
    new DiagramNodeAnnotation()
    {
     Content = "node", RotateAngle = 10
    }
   }
  };
  NodeCollection.Add(node1);
 }
} 		Property: Nodes[i].Annotations[i].RotationAngle

<SfDiagramComponent Nodes="@NodeCollection" />
@code
{
 public DiagramObjectCollection<Node> NodeCollection = new DiagramObjectCollection<Node>();
 protected override void OnInitialized()
 {
  Node node1 = new Node()
  {
   Height = 100,
   Width = 100,
   ID = "node",
   OffsetX = 300,
   OffsetY = 288,
   Annotations = new DiagramObjectCollection<ShapeAnnotation>()
   {
    new ShapeAnnotation()
    {
     Content="node", RotationAngle = 10
    }
   }
  };
  NodeCollection.Add(node1);
 }
}
Sets the Margin property for the annotation Property: Nodes[i].Annotations[i].Margin

<SfDiagram Nodes="@NodeCollection" />
@code
{
 public ObservableCollection<DiagramNode> NodeCollection = new ObservableCollection<DiagramNode>();
 protected override void OnInitialized()
 {
  DiagramNode node1 = new DiagramNode()
  {
   Id = "node",
   OffsetX = 300,
   OffsetY = 288,
   Width = 100,
   Height = 100,
   Annotations = new ObservableCollection<DiagramNodeAnnotation>()
   {
    new DiagramNodeAnnotation()
    {
     Content = "node", Margin = new NodeAnnotationMargin() { Bottom = 10 }
    }
   }
  };
  NodeCollection.Add(node1);
 }
} 		Property: Nodes[i].Annotations[i].Margin

<SfDiagramComponent Nodes="@NodeCollection" />
@code
{
 public DiagramObjectCollection<Node> NodeCollection = new DiagramObjectCollection<Node>();
 protected override void OnInitialized()
 {
  Node node1 = new Node()
  {
   Height = 100,
   Width = 100,
   ID = "node",
   OffsetX = 300,
   OffsetY = 288,
   Annotations = new DiagramObjectCollection<ShapeAnnotation>()
   {
    new ShapeAnnotation()
    {
     Content="node", Margin = new DiagramThickness(){ Left = 10 }
    }
   }
  };
  NodeCollection.Add(node1);
 }
}
Sets the Offset property for the annotation Property: Nodes[i].Annotations[i].Offset

<SfDiagram Nodes="@NodeCollection" />
@code
{
 public ObservableCollection<DiagramNode> NodeCollection = new ObservableCollection<DiagramNode>();
 protected override void OnInitialized()
 {
  DiagramNode node1 = new DiagramNode()
  {
   Id = "node",
   OffsetX = 300,
   OffsetY = 288,
   Width = 100,
   Height = 100,
   Annotations = new ObservableCollection<DiagramNodeAnnotation>()
   {
    new DiagramNodeAnnotation()
    {
     Content = "node", Offset = new NodeAnnotationOffset() { X =0.5, Y = 1 }
    }
   }
  };
  NodeCollection.Add(node1);
 }
} 		Property: Nodes[i].Annotations[i].Offset

<SfDiagramComponent Nodes="@NodeCollection" />
@code
{
 public DiagramObjectCollection<Node> NodeCollection = new DiagramObjectCollection<Node>();
 protected override void OnInitialized()
 {
  Node node1 = new Node()
  {
   Height = 100,
   Width = 100,
   ID = "node",
   OffsetX = 300,
   OffsetY = 288,
   Annotations = new DiagramObjectCollection<ShapeAnnotation>()
   {
    new ShapeAnnotation()
    {
     Content="node", Offset = new DiagramPoint() { X=0.5, Y =1}
    }
   }
  };
  NodeCollection.Add(node1);
 }
}
Sets the Template property for the annotation Property: Nodes[i].Annotations[i].Template

<SfDiagram Nodes="@NodeCollection" />
@code
{
 public ObservableCollection<DiagramNode> NodeCollection = new ObservableCollection<DiagramNode>();
 protected override void OnInitialized()
 {
  DiagramNode node1 = new DiagramNode()
  {
   Id = "node",
   OffsetX = 300,
   OffsetY = 288,
   Width = 100,
   Height = 100,
   Annotations = new ObservableCollection<DiagramNodeAnnotation>()
   {
    new DiagramNodeAnnotation()
    {
     Content = "node", Template = "<div>"
    }
   }
  };
  NodeCollection.Add(node1);
 }
} 		Property: Nodes[i].Annotations[i].UseTemplate

Gets or sets a value indicating whether annotation should be rendered as a template using value defined in AnnotationTemplate property.



<SfDiagramComponent Width="1200px" Height="700px" Nodes="@nodes">
 <DiagramTemplates>
  <AnnotationTemplate>
    @if (context is Annotation annotation)
     {
      if (annotation.ID.Contains("TemplateAnnotation1"))
      {
       string ID = annotation.ID + "TemplateContent";
       <div id="@ID" style="height: 100%; width: 100%; display: flex; justify-content: center; align-items: center;"><button>Button</button></div>
      }
     }
   </AnnotationTemplate>
 </DiagramTemplates>
</SfDiagramComponent>
@code {
 private DiagramObjectCollection<Node> nodes = new DiagramObjectCollection<Node>();
 protected override void OnInitialized()
 {
  Node node1 = new Node()
  {
   ID = "node1",OffsetX = 100,OffsetY = 100,Width = 70,Height = 70,
    Annotations = new DiagramObjectCollection<ShapeAnnotation>()
    {
    new ShapeAnnotation()
    {
    ID = "TemplateAnnotation1", UseTemplate = true, Height = 30,Width = 60, Content = "Annotation", Offset = new DiagramPoint(){ X = 0.5,Y = 1.5}
    }
   },
    Shape = new BasicShape() { Type = NodeShapes.Basic, Shape = NodeBasicShapes.Star }
   };
  nodes.Add(node1);
 }
}
Sets the Type property for the annotation Property: Nodes[i].Annotations[i].Type

<SfDiagram Nodes="@NodeCollection" />
@code
{
 public ObservableCollection<DiagramNode> NodeCollection = new ObservableCollection<DiagramNode>();
 protected override void OnInitialized()
 {
  DiagramNode node1 = new DiagramNode()
  {
   Id = "node",
   OffsetX = 300,
   OffsetY = 288,
   Width = 100,
   Height = 100,
   Annotations = new ObservableCollection<DiagramNodeAnnotation>()
   {
    new DiagramNodeAnnotation()
    {
     Content = "node", Type= AnnotationTypes.Shape
    }
   }
  };
  NodeCollection.Add(node1);
 }
} 		The annotation for both node and connector can be established through the Annotations property without specifying the type.

Ports for Node

Behavior API in SfDiagram API in SfDiagramComponent
Defines a collection of ports to be render in the node Property: Nodes[i].Ports

Sets a port property as ObservableCollection<DiagramPort>

<SfDiagram Nodes="@NodeCollection" />
@code
{
 public ObservableCollection<DiagramNode> NodeCollection = new ObservableCollection<DiagramNode>();
 protected override void OnInitialized()
 {
  DiagramNode node1 = new DiagramNode()
  {
   Id = "node",
   OffsetX = 300,
   OffsetY = 288,
   Width = 100,
   Height = 100,
   Ports = new ObservableCollection<DiagramPort>()
   {
    new DiagramPort()
    {
     Offset = new NodePortOffset(){ X = 0, Y=0 }, Visibility = PortVisibility.Visible
    }
   }
  };
  NodeCollection.Add(node1);
 }
} 		Property: Nodes[i].Ports

Sets a port property as DiagramObjectCollection<PointPort>

<SfDiagramComponent Nodes="@NodeCollection" />
@code
{
 public DiagramObjectCollection<Node> NodeCollection = new DiagramObjectCollection<Node>();
 protected override void OnInitialized()
 {
  Node node1 = new Node()
  {
   Height = 100,
   Width = 100,
   ID = "node",
   OffsetX = 300,
   OffsetY = 288,
   Ports = new DiagramObjectCollection<PointPort>()
   {
    new PointPort()
    {
     Offset = new DiagramPoint(){ X = 0, Y=0 }, Visibility = PortVisibility.Visible
    }
   }
  };
  NodeCollection.Add(node1);
 }
}
Sets a offset property for the port Property: Nodes[i].Ports[i].Offset

<SfDiagram Nodes="@NodeCollection" />
@code
{
 public ObservableCollection<DiagramNode> NodeCollection = new ObservableCollection<DiagramNode>();
 protected override void OnInitialized()
 {
  DiagramNode node1 = new DiagramNode()
  {
   Id = "node",
   OffsetX = 300,
   OffsetY = 288,
   Width = 100,
   Height = 100,
   Ports = new ObservableCollection<DiagramPort>()
   {
    new DiagramPort()
    {
     Offset = new NodePortOffset(){ X = 0, Y=0 }, Visibility = PortVisibility.Visible
    }
   }
  };
  NodeCollection.Add(node1);
 }
} 		Property: Nodes[i].Ports[i].Offset

<SfDiagramComponent Nodes="@NodeCollection" />
@code
{
 public DiagramObjectCollection<Node> NodeCollection = new DiagramObjectCollection<Node>();
 protected override void OnInitialized()
 {
  Node node1 = new Node()
  {
   Height = 100,
   Width = 100,
   ID = "node",
   OffsetX = 300,
   OffsetY = 288,
   Ports = new DiagramObjectCollection<PointPort>()
   {
    new PointPort()
    {
     Offset = new DiagramPoint(){ X = 0, Y=0 }, Visibility = PortVisibility.Visible
    }
   }
  };
  NodeCollection.Add(node1);
 }
}
Sets a id property for the port Property: Nodes[i].Ports[i].Id

<SfDiagram Nodes="@NodeCollection" />
@code
{
 public ObservableCollection<DiagramNode> NodeCollection = new ObservableCollection<DiagramNode>();
 protected override void OnInitialized()
 {
  DiagramNode node1 = new DiagramNode()
  {
   Id = "node",
   OffsetX = 300,
   OffsetY = 288,
   Width = 100,
   Height = 100,
   Ports = new ObservableCollection<DiagramPort>()
   {
    new DiagramPort()
    {
     Id = "Port1", Offset = new NodePortOffset(){ X = 0, Y=0 }, Visibility = PortVisibility.Visible
    }
   }
  };
  NodeCollection.Add(node1);
 }
} 		Property: Nodes[i].Ports[i].ID

<SfDiagramComponent Nodes="@NodeCollection" />
@code
{
 public DiagramObjectCollection<Node> NodeCollection = new DiagramObjectCollection<Node>();
 protected override void OnInitialized()
 {
  Node node1 = new Node()
  {
   Height = 100,
   Width = 100,
   ID = "node",
   OffsetX = 300,
   OffsetY = 288,
   Ports = new DiagramObjectCollection<PointPort>()
   {
    new PointPort()
    {
     ID = "Port1", Offset = new DiagramPoint(){ X = 0, Y=0 }, Visibility = PortVisibility.Visible
    }
   }
  };
  NodeCollection.Add(node1);
 }
}
Sets a AddInfo property for the port Property: Nodes[i].Ports[i].AddInfo

<SfDiagram Nodes="@NodeCollection" />
@code
{
 public ObservableCollection<DiagramNode> NodeCollection = new ObservableCollection<DiagramNode>();
 protected override void OnInitialized()
 {
  DiagramNode node1 = new DiagramNode()
  {
   Id = "node",
   OffsetX = 300,
   OffsetY = 288,
   Width = 100,
   Height = 100,
   Ports = new ObservableCollection<DiagramPort>()
   {
    new DiagramPort()
    {
     AddInfo = "Port Info", Offset = new NodePortOffset(){ X = 0, Y=0 }, Visibility = PortVisibility.Visible
    }
   }
  };
  NodeCollection.Add(node1);
 }
} 		Property: Nodes[i].Ports[i].AdditionalInfo

<SfDiagramComponent Nodes="@NodeCollection" />
@code
{
 public DiagramObjectCollection<Node> NodeCollection = new DiagramObjectCollection<Node>();
 protected override void OnInitialized()
 {
  Dictionary<string, object> NodeInfo = new Dictionary<string, object>();
  NodeInfo.Add("NodeInfo", "Node's Addition Information");
  Node node1 = new Node()
  {
   Height = 100,
   Width = 100,
   ID = "node",
   OffsetX = 300,
   OffsetY = 288,
   Ports = new DiagramObjectCollection<PointPort>()
   {
    new PointPort()
    {
     ID = "Port1", AdditionalInfo = NodeInfo, Offset = new DiagramPoint(){ X = 0, Y=0 }, Visibility = PortVisibility.Visible
    }
   }
  };
  NodeCollection.Add(node1);
 }
}
Sets a Margin property for the port Property: Nodes[i].Ports[i].Margin

<SfDiagram Nodes="@NodeCollection" />
@code
{
 public ObservableCollection<DiagramNode> NodeCollection = new ObservableCollection<DiagramNode>();
 protected override void OnInitialized()
 {
  DiagramNode node1 = new DiagramNode()
  {
   Id = "node",
   OffsetX = 300,
   OffsetY = 288,
   Width = 100,
   Height = 100,
   Ports = new ObservableCollection<DiagramPort>()
   {
    new DiagramPort()
    {
     Id = "Port1", Margin = new PortMargin(){ Bottom = 10 }, Offset = new NodePortOffset(){ X = 0, Y=0 }, Visibility = PortVisibility.Visible
    }
   }
  };
  NodeCollection.Add(node1);
 }
} 		Property: Nodes[i].Ports[i].Margin

<SfDiagramComponent Nodes="@NodeCollection" />
@code
{
 public DiagramObjectCollection<Node> NodeCollection = new DiagramObjectCollection<Node>();
 protected override void OnInitialized()
 {
  Node node1 = new Node()
  {
   Height = 100,
   Width = 100,
   ID = "node",
   OffsetX = 300,
   OffsetY = 288,
   Ports = new DiagramObjectCollection<PointPort>()
   {
    new PointPort()
    {
     ID = "Port1", Margin= new DiagramThickness(){ Bottom =10}, Offset = new DiagramPoint(){ X = 0, Y=0 }, Visibility = PortVisibility.Visible
    }
   }
  };
  NodeCollection.Add(node1);
 }
}
Sets a Style property for the port Property: Nodes[i].Ports[i].Style

<SfDiagram Nodes="@NodeCollection" />
@code
{
 public ObservableCollection<DiagramNode> NodeCollection = new ObservableCollection<DiagramNode>();
 protected override void OnInitialized()
 {
  DiagramNode node1 = new DiagramNode()
  {
   Id = "node",
   OffsetX = 300,
   OffsetY = 288,
   Width = 100,
   Height = 100,
   Ports = new ObservableCollection<DiagramPort>()
   {
    new DiagramPort()
    {
     Style = new PortShapeStyle() { Fill = "red", Opacity = 1, StrokeColor="black", StrokeDashArray="2,2", StrokeWidth = 3 }, Offset = new NodePortOffset(){ X = 0, Y=0 }, Visibility = PortVisibility.Visible
    }
   }
  };
  NodeCollection.Add(node1);
 }
} 		Property: Nodes[i].Ports[i].Style

<SfDiagramComponent Nodes="@NodeCollection" />
@code
{
 public DiagramObjectCollection<Node> NodeCollection = new DiagramObjectCollection<Node>();
 protected override void OnInitialized()
 {
  Node node1 = new Node()
  {
   Height = 100,
   Width = 100,
   ID = "node",
   OffsetX = 300,
   OffsetY = 288,
   Ports = new DiagramObjectCollection<PointPort>()
   {
    new PointPort()
    {
     ID = "Port1", Style = new ShapeStyle() { Fill = "red", Opacity = 1, StrokeColor="black", StrokeDashArray="2,2", StrokeWidth = 3 }, Offset = new DiagramPoint(){ X = 0, Y=0 }, Visibility = PortVisibility.Visible
    }
   }
  };
  NodeCollection.Add(node1);
 }
}

Fixed User Handle for Node

Behavior API in SfDiagram API in SfDiagramComponent
Defines a collection of fixed user handle to be render in the node Property: FixedUserHandles

Sets a FixedUserHandles property as ObservableCollection<DiagramNodeFixedUserHandle>

<SfDiagram Nodes="@NodeCollection" />
@code
{
 public ObservableCollection<DiagramNode> NodeCollection = new ObservableCollection<DiagramNode>();
 protected override void OnInitialized()
 {
  DiagramNode node1 = new DiagramNode()
  {
   Id = "node",
   OffsetX = 300,
   OffsetY = 288,
   Width = 100,
   Height = 100,
   FixedUserHandles = new ObservableCollection<DiagramNodeFixedUserHandle>()
   {
    new DiagramNodeFixedUserHandle()
    {
     PathData = "M60.3,18H27.5c-3,0-5.5,2.4-5.5,5.5v38.2h5.5V23.5h32.7V18z M68.5,28.9h-30c-3,0-5.5,2.4-5.5,5.5v38.2c0,3,2.4,5.5,5.5,5.5h30c3,0,5.5-2.4,5.5-5.5V34.4C73.9,31.4,71.5,28.9,68.5,28.9z M68.5,72.5h-30V34.4h30V72.5z"
    }
   }
  };
  NodeCollection.Add(node1);
 }
} 		Property: FixedUserHandles

Sets a FixedUserHandles property as DiagramObjectCollection<NodeFixedUserHandle>

<SfDiagramComponent Nodes="@NodeCollection" />
@code
{
 public DiagramObjectCollection<Node> NodeCollection = new DiagramObjectCollection<Node>();
 protected override void OnInitialized()
 {
  Node node1 = new Node()
  {
   Height = 100,
   Width = 100,
   ID = "node",
   OffsetX = 300,
   OffsetY = 288,
   FixedUserHandles = new DiagramObjectCollection<NodeFixedUserHandle>()
   {
    new NodeFixedUserHandle()
    {
     PathData = "M60.3,18H27.5c-3,0-5.5,2.4-5.5,5.5v38.2h5.5V23.5h32.7V18z M68.5,28.9h-30c-3,0-5.5,2.4-5.5,5.5v38.2c0,3,2.4,5.5,5.5,5.5h30c3,0,5.5-2.4,5.5-5.5V34.4C73.9,31.4,71.5,28.9,68.5,28.9z M68.5,72.5h-30V34.4h30V72.5z"
    }
   }
  };
  NodeCollection.Add(node1);
 }
}
Sets a IconStrokeColor property Property: Nodes[i].FixedUserHandles[i].IconStrokeColor

<SfDiagram Nodes="@NodeCollection" />
@code
{
 public ObservableCollection<DiagramNode> NodeCollection = new ObservableCollection<DiagramNode>();
 protected override void OnInitialized()
 {
  DiagramNode node1 = new DiagramNode()
  {
   Id = "node",
   OffsetX = 300,
   OffsetY = 288,
   Width = 100,
   Height = 100,
   FixedUserHandles = new ObservableCollection<DiagramNodeFixedUserHandle>()
   {
    new DiagramNodeFixedUserHandle()
    {
     PathData = "M60.3,18H27.5c-3,0-5.5,2.4-5.5,5.5v38.2h5.5V23.5h32.7V18z M68.5,28.9h-30c-3,0-5.5,2.4-5.5,5.5v38.2c0,3,2.4,5.5,5.5,5.5h30c3,0,5.5-2.4,5.5-5.5V34.4C73.9,31.4,71.5,28.9,68.5,28.9z M68.5,72.5h-30V34.4h30V72.5z", IconStrokeColor = "blue",
    }
   }
  };
  NodeCollection.Add(node1);
 }
} 		Property: Nodes[i].FixedUserHandles[i].IconStroke

<SfDiagramComponent Nodes="@NodeCollection" />
@code
{
 public DiagramObjectCollection<Node> NodeCollection = new DiagramObjectCollection<Node>();
 protected override void OnInitialized()
 {
  Node node1 = new Node()
  {
   Height = 100,
   Width = 100,
   ID = "node",
   OffsetX = 300,
   OffsetY = 288,
   FixedUserHandles = new DiagramObjectCollection<NodeFixedUserHandle>()
   {
    new NodeFixedUserHandle()
    {
     PathData = "M60.3,18H27.5c-3,0-5.5,2.4-5.5,5.5v38.2h5.5V23.5h32.7V18z M68.5,28.9h-30c-3,0-5.5,2.4-5.5,5.5v38.2c0,3,2.4,5.5,5.5,5.5h30c3,0,5.5-2.4,5.5-5.5V34.4C73.9,31.4,71.5,28.9,68.5,28.9z M68.5,72.5h-30V34.4h30V72.5z", IconStroke = "red"
    }
   }
  };
  NodeCollection.Add(node1);
 }
}
Sets a IconStrokeWidth property Property: Nodes[i].FixedUserHandles[i].IconStrokeWidth

<SfDiagram Nodes="@NodeCollection" />
@code
{
 public ObservableCollection<DiagramNode> NodeCollection = new ObservableCollection<DiagramNode>();
 protected override void OnInitialized()
 {
  DiagramNode node1 = new DiagramNode()
  {
   Id = "node",
   OffsetX = 300,
   OffsetY = 288,
   Width = 100,
   Height = 100,
   FixedUserHandles = new ObservableCollection<DiagramNodeFixedUserHandle>()
   {
    new DiagramNodeFixedUserHandle()
    {
     PathData = "M60.3,18H27.5c-3,0-5.5,2.4-5.5,5.5v38.2h5.5V23.5h32.7V18z M68.5,28.9h-30c-3,0-5.5,2.4-5.5,5.5v38.2c0,3,2.4,5.5,5.5,5.5h30c3,0,5.5-2.4,5.5-5.5V34.4C73.9,31.4,71.5,28.9,68.5,28.9z M68.5,72.5h-30V34.4h30V72.5z", IconStrokeWidth=5
    }
   }
  };
  NodeCollection.Add(node1);
 }
} 		Property: Nodes[i].FixedUserHandles[i].IconStrokeThickness

<SfDiagramComponent Nodes="@NodeCollection" />
@code
{
 public DiagramObjectCollection<Node> NodeCollection = new DiagramObjectCollection<Node>();
 protected override void OnInitialized()
 {
  Node node1 = new Node()
  {
   Height = 100,
   Width = 100,
   ID = "node",
   OffsetX = 300,
   OffsetY = 288,
   FixedUserHandles = new DiagramObjectCollection<NodeFixedUserHandle>()
   {
    new NodeFixedUserHandle()
    {
     PathData = "M60.3,18H27.5c-3,0-5.5,2.4-5.5,5.5v38.2h5.5V23.5h32.7V18z M68.5,28.9h-30c-3,0-5.5,2.4-5.5,5.5v38.2c0,3,2.4,5.5,5.5,5.5h30c3,0,5.5-2.4,5.5-5.5V34.4C73.9,31.4,71.5,28.9,68.5,28.9z M68.5,72.5h-30V34.4h30V72.5z", IconStrokeThickness = 5
    }
   }
  };
  NodeCollection.Add(node1);
 }
}
Sets a HandleStrokeColor property Property: Nodes[i].FixedUserHandles[i].HandleStrokeColor

<SfDiagram Nodes="@NodeCollection" />
@code
{
 public ObservableCollection<DiagramNode> NodeCollection = new ObservableCollection<DiagramNode>();
 protected override void OnInitialized()
 {
  DiagramNode node1 = new DiagramNode()
  {
   Id = "node",
   OffsetX = 300,
   OffsetY = 288,
   Width = 100,
   Height = 100,
   FixedUserHandles = new ObservableCollection<DiagramNodeFixedUserHandle>()
   {
    new DiagramNodeFixedUserHandle()
    {
     PathData = "M60.3,18H27.5c-3,0-5.5,2.4-5.5,5.5v38.2h5.5V23.5h32.7V18z M68.5,28.9h-30c-3,0-5.5,2.4-5.5,5.5v38.2c0,3,2.4,5.5,5.5,5.5h30c3,0,5.5-2.4,5.5-5.5V34.4C73.9,31.4,71.5,28.9,68.5,28.9z M68.5,72.5h-30V34.4h30V72.5z", HandleStrokeColor = "blue",
    }
   }
  };
  NodeCollection.Add(node1);
 }
} 		Property: Nodes[i].FixedUserHandles[i].Stroke

<SfDiagramComponent Nodes="@NodeCollection" />
@code
{
 public DiagramObjectCollection<Node> NodeCollection = new DiagramObjectCollection<Node>();
 protected override void OnInitialized()
 {
  Node node1 = new Node()
  {
   Height = 100,
   Width = 100,
   ID = "node",
   OffsetX = 300,
   OffsetY = 288,
   FixedUserHandles = new DiagramObjectCollection<NodeFixedUserHandle>()
   {
    new NodeFixedUserHandle()
    {
     PathData = "M60.3,18H27.5c-3,0-5.5,2.4-5.5,5.5v38.2h5.5V23.5h32.7V18z M68.5,28.9h-30c-3,0-5.5,2.4-5.5,5.5v38.2c0,3,2.4,5.5,5.5,5.5h30c3,0,5.5-2.4,5.5-5.5V34.4C73.9,31.4,71.5,28.9,68.5,28.9z M68.5,72.5h-30V34.4h30V72.5z", Stroke = "red"
    }
   }
  };
  NodeCollection.Add(node1);
 }
}
Sets a HandleStrokeWidth property Property: Nodes[i].FixedUserHandles[i].HandleStrokeWidth

<SfDiagram Nodes="@NodeCollection" />
@code
{
 public ObservableCollection<DiagramNode> NodeCollection = new ObservableCollection<DiagramNode>();
 protected override void OnInitialized()
 {
  DiagramNode node1 = new DiagramNode()
  {
   Id = "node",
   OffsetX = 300,
   OffsetY = 288,
   Width = 100,
   Height = 100,
   FixedUserHandles = new ObservableCollection<DiagramNodeFixedUserHandle>()
   {
    new DiagramNodeFixedUserHandle()
    {
     PathData = "M60.3,18H27.5c-3,0-5.5,2.4-5.5,5.5v38.2h5.5V23.5h32.7V18z M68.5,28.9h-30c-3,0-5.5,2.4-5.5,5.5v38.2c0,3,2.4,5.5,5.5,5.5h30c3,0,5.5-2.4,5.5-5.5V34.4C73.9,31.4,71.5,28.9,68.5,28.9z M68.5,72.5h-30V34.4h30V72.5z", HandleStrokeWidth=5
    }
   }
  };
  NodeCollection.Add(node1);
 }
} 		Property: Nodes[i].FixedUserHandles[i].StrokeThickness

<SfDiagramComponent Nodes="@NodeCollection" />
@code
{
 public DiagramObjectCollection<Node> NodeCollection = new DiagramObjectCollection<Node>();
 protected override void OnInitialized()
 {
  Node node1 = new Node()
  {
   Height = 100,
   Width = 100,
   ID = "node",
   OffsetX = 300,
   OffsetY = 288,
   FixedUserHandles = new DiagramObjectCollection<NodeFixedUserHandle>()
   {
    new NodeFixedUserHandle()
    {
     PathData = "M60.3,18H27.5c-3,0-5.5,2.4-5.5,5.5v38.2h5.5V23.5h32.7V18z M68.5,28.9h-30c-3,0-5.5,2.4-5.5,5.5v38.2c0,3,2.4,5.5,5.5,5.5h30c3,0,5.5-2.4,5.5-5.5V34.4C73.9,31.4,71.5,28.9,68.5,28.9z M68.5,72.5h-30V34.4h30V72.5z", StrokeThickness = 5
    }
   }
  };
  NodeCollection.Add(node1);
 }
}
Sets a Margin property Property: Nodes[i].FixedUserHandles[i].Margin

<SfDiagram Nodes="@NodeCollection" />
@code
{
 public ObservableCollection<DiagramNode> NodeCollection = new ObservableCollection<DiagramNode>();
 protected override void OnInitialized()
 {
  DiagramNode node1 = new DiagramNode()
  {
   Id = "node",
   OffsetX = 300,
   OffsetY = 288,
   Width = 100,
   Height = 100,
   FixedUserHandles = new ObservableCollection<DiagramNodeFixedUserHandle>()
   {
    new DiagramNodeFixedUserHandle()
    {
     PathData = "M60.3,18H27.5c-3,0-5.5,2.4-5.5,5.5v38.2h5.5V23.5h32.7V18z M68.5,28.9h-30c-3,0-5.5,2.4-5.5,5.5v38.2c0,3,2.4,5.5,5.5,5.5h30c3,0,5.5-2.4,5.5-5.5V34.4C73.9,31.4,71.5,28.9,68.5,28.9z M68.5,72.5h-30V34.4h30V72.5z", Margin = new UserHandleMargin() { Bottom = 10 }
    }
   }
  };
  NodeCollection.Add(node1);
 }
} 		Property: Nodes[i].FixedUserHandles[i].Margin

<SfDiagramComponent Nodes="@NodeCollection" />
@code
{
 public DiagramObjectCollection<Node> NodeCollection = new DiagramObjectCollection<Node>();
 protected override void OnInitialized()
 {
  Node node1 = new Node()
  {
   Height = 100,
   Width = 100,
   ID = "node",
   OffsetX = 300,
   OffsetY = 288,
   FixedUserHandles = new DiagramObjectCollection<NodeFixedUserHandle>()
   {
    new NodeFixedUserHandle()
    {
     PathData = "M60.3,18H27.5c-3,0-5.5,2.4-5.5,5.5v38.2h5.5V23.5h32.7V18z M68.5,28.9h-30c-3,0-5.5,2.4-5.5,5.5v38.2c0,3,2.4,5.5,5.5,5.5h30c3,0,5.5-2.4,5.5-5.5V34.4C73.9,31.4,71.5,28.9,68.5,28.9z M68.5,72.5h-30V34.4h30V72.5z", Margin = new DiagramThickness() { Bottom = 10 }
    }
   }
  };
  NodeCollection.Add(node1);
 }
}
Sets a Offset property Property: Nodes[i].FixedUserHandles[i].Offset

<SfDiagram Nodes="@NodeCollection" />
@code
{
 public ObservableCollection<DiagramNode> NodeCollection = new ObservableCollection<DiagramNode>();
 protected override void OnInitialized()
 {
  DiagramNode node1 = new DiagramNode()
  {
   Id = "node",
   OffsetX = 300,
   OffsetY = 288,
   Width = 100,
   Height = 100,
   FixedUserHandles = new ObservableCollection<DiagramNodeFixedUserHandle>()
   {
    new DiagramNodeFixedUserHandle()
    {
     PathData = "M60.3,18H27.5c-3,0-5.5,2.4-5.5,5.5v38.2h5.5V23.5h32.7V18z M68.5,28.9h-30c-3,0-5.5,2.4-5.5,5.5v38.2c0,3,2.4,5.5,5.5,5.5h30c3,0,5.5-2.4,5.5-5.5V34.4C73.9,31.4,71.5,28.9,68.5,28.9z M68.5,72.5h-30V34.4h30V72.5z", Offset = new UserHandleOffset() { X = 0, Y = 0 }
    }
   }
  };
  NodeCollection.Add(node1);
 }
} 		Property: Nodes[i].FixedUserHandles[i].Offset

<SfDiagramComponent Nodes="@NodeCollection" />
@code
{
 public DiagramObjectCollection<Node> NodeCollection = new DiagramObjectCollection<Node>();
 protected override void OnInitialized()
 {
  Node node1 = new Node()
  {
   Height = 100,
   Width = 100,
   ID = "node",
   OffsetX = 300,
   OffsetY = 288,
   FixedUserHandles = new DiagramObjectCollection<NodeFixedUserHandle>()
   {
    new NodeFixedUserHandle()
    {
     PathData = "M60.3,18H27.5c-3,0-5.5,2.4-5.5,5.5v38.2h5.5V23.5h32.7V18z M68.5,28.9h-30c-3,0-5.5,2.4-5.5,5.5v38.2c0,3,2.4,5.5,5.5,5.5h30c3,0,5.5-2.4,5.5-5.5V34.4C73.9,31.4,71.5,28.9,68.5,28.9z M68.5,72.5h-30V34.4h30V72.5z", Offset = new DiagramPoint() { X = 0.5, Y=1}
    }
   }
  };
  NodeCollection.Add(node1);
 }
}
Sets a Padding property Property: Nodes[i].FixedUserHandles[i].Padding

<SfDiagram Nodes="@NodeCollection" />
@code
{
 public ObservableCollection<DiagramNode> NodeCollection = new ObservableCollection<DiagramNode>();
 protected override void OnInitialized()
 {
  DiagramNode node1 = new DiagramNode()
  {
   Id = "node",
   OffsetX = 300,
   OffsetY = 288,
   Width = 100,
   Height = 100,
   FixedUserHandles = new ObservableCollection<DiagramNodeFixedUserHandle>()
   {
    new DiagramNodeFixedUserHandle()
    {
     PathData = "M60.3,18H27.5c-3,0-5.5,2.4-5.5,5.5v38.2h5.5V23.5h32.7V18z M68.5,28.9h-30c-3,0-5.5,2.4-5.5,5.5v38.2c0,3,2.4,5.5,5.5,5.5h30c3,0,5.5-2.4,5.5-5.5V34.4C73.9,31.4,71.5,28.9,68.5,28.9z M68.5,72.5h-30V34.4h30V72.5z", Padding = new DiagramThickness(){ Bottom = 10}
    }
   }
  };
  NodeCollection.Add(node1);
 }
} 		Property: Nodes[i].FixedUserHandles[i].Padding

<SfDiagramComponent Nodes="@NodeCollection" />
@code
{
 public DiagramObjectCollection<Node> NodeCollection = new DiagramObjectCollection<Node>();
 protected override void OnInitialized()
 {
  Node node1 = new Node()
  {
   Height = 100,
   Width = 100,
   ID = "node",
   OffsetX = 300,
   OffsetY = 288,
   FixedUserHandles = new DiagramObjectCollection<NodeFixedUserHandle>()
   {
    new NodeFixedUserHandle()
    {
     PathData = "M60.3,18H27.5c-3,0-5.5,2.4-5.5,5.5v38.2h5.5V23.5h32.7V18z M68.5,28.9h-30c-3,0-5.5,2.4-5.5,5.5v38.2c0,3,2.4,5.5,5.5,5.5h30c3,0,5.5-2.4,5.5-5.5V34.4C73.9,31.4,71.5,28.9,68.5,28.9z M68.5,72.5h-30V34.4h30V72.5z", Padding = new IconPadding() { Bottom = 10 }
    }
   }
  };
  NodeCollection.Add(node1);
 }
}

ExpandIcon for Node

Behavior API in SfDiagram API in SfDiagramComponent
Defines a expand icon to be render for the node Property: Nodes[i].ExpandIcon

Sets a ExpandIcon property as NodeExpandIcon

<SfDiagram Nodes="@NodeCollection" />
@code
{
 public ObservableCollection<DiagramNode> NodeCollection = new ObservableCollection<DiagramNode>();
 protected override void OnInitialized()
 {
  DiagramNode node1 = new DiagramNode()
  {
   Id = "node",
   OffsetX = 300,
   OffsetY = 288,
   Width = 100,
   Height = 100,
   ExpandIcon = new NodeExpandIcon()
   {
    Shape = IconShapes.Minus }
  };
  NodeCollection.Add(node1);
 }
} 		Property: Nodes[i].ExpandIcon

Sets a ExpandIcon property as DiagramExpandIcon

<SfDiagramComponent Nodes="@NodeCollection" />
@code
{
 public DiagramObjectCollection<Node> NodeCollection = new DiagramObjectCollection<Node>();
 protected override void OnInitialized()
 {
  Node node1 = new Node()
  {
   Height = 100,
   Width = 100,
   ID = "node",
   OffsetX = 300,
   OffsetY = 288,
   ExpandIcon = new DiagramExpandIcon()
   {
    Shape = DiagramExpandIcons.Minus }
  };
  NodeCollection.Add(node1);
 }
}
Sets a Margin property for expand icon Property: Nodes[i].ExpandIcon.Margin

<SfDiagram Nodes="@NodeCollection" />
@code
{
 public ObservableCollection<DiagramNode> NodeCollection = new ObservableCollection<DiagramNode>();
 protected override void OnInitialized()
 {
  DiagramNode node1 = new DiagramNode()
  {
   Id = "node",
   OffsetX = 300,
   OffsetY = 288,
   Width = 100,
   Height = 100,
   ExpandIcon = new NodeExpandIcon()
   {
    Shape = IconShapes.Minus, Margin = new ExpandIconMargin() { Bottom = 10 } }
  };
  NodeCollection.Add(node1);
 }
} 		Property: Nodes[i].ExpandIcon.Margin

<SfDiagramComponent Nodes="@NodeCollection" />
@code
{
 public DiagramObjectCollection<Node> NodeCollection = new DiagramObjectCollection<Node>();
 protected override void OnInitialized()
 {
  Node node1 = new Node()
  {
   Height = 100,
   Width = 100,
   ID = "node",
   OffsetX = 300,
   OffsetY = 288,
   ExpandIcon = new DiagramExpandIcon()
   {
    Shape = DiagramExpandIcons.Minus, Margin = new DiagramThickness() { Bottom = 10 } }
  };
  NodeCollection.Add(node1);
 }
}
Sets a offset property for expand icon Property: Nodes[i].ExpandIcon.Offset

<SfDiagram Nodes="@NodeCollection" />
@code
{
 public ObservableCollection<DiagramNode> NodeCollection = new ObservableCollection<DiagramNode>();
 protected override void OnInitialized()
 {
  DiagramNode node1 = new DiagramNode()
  {
   Id = "node",
   OffsetX = 300,
   OffsetY = 288,
   Width = 100,
   Height = 100,
   ExpandIcon = new NodeExpandIcon()
   {
    Shape = IconShapes.Minus, Offset = new IconOffset() { X = 0, Y = 0 } }
  };
  NodeCollection.Add(node1);
 }
} 		Property: Nodes[i].ExpandIcon.OffsetX, Nodes[i].ExpandIcon.OffsetY

<SfDiagramComponent Nodes="@NodeCollection" />
@code
{
 public DiagramObjectCollection<Node> NodeCollection = new DiagramObjectCollection<Node>();
 protected override void OnInitialized()
 {
  Node node1 = new Node()
  {
   Height = 100,
   Width = 100,
   ID = "node",
   OffsetX = 300,
   OffsetY = 288,
   ExpandIcon = new DiagramExpandIcon()
   {
    Shape = DiagramExpandIcons.Minus, OffsetX = 10, OffsetY = 10 }
  };
  NodeCollection.Add(node1);
 }
}
Sets a Padding property for expand icon Property: Nodes[i].ExpandIcon.Padding

<SfDiagram Nodes="@NodeCollection" />
@code
{
 public ObservableCollection<DiagramNode> NodeCollection = new ObservableCollection<DiagramNode>();
 protected override void OnInitialized()
 {
  DiagramNode node1 = new DiagramNode()
  {
   Id = "node",
   OffsetX = 300,
   OffsetY = 288,
   Width = 100,
   Height = 100,
   ExpandIcon = new NodeExpandIcon()
   {
    Shape = IconShapes.Minus, Padding = new IconPadding() { Bottom = 10 } }
  };
  NodeCollection.Add(node1);
 }
} 		Property: Nodes[i].ExpandIcon.Padding

<SfDiagramComponent Nodes="@NodeCollection" />
@code
{
 public DiagramObjectCollection<Node> NodeCollection = new DiagramObjectCollection<Node>();
 protected override void OnInitialized()
 {
  Node node1 = new Node()
  {
   Height = 100,
   Width = 100,
   ID = "node",
   OffsetX = 300,
   OffsetY = 288,
   ExpandIcon = new DiagramExpandIcon()
   {
    Shape = DiagramExpandIcons.Minus, Padding = new DiagramThickness() { Bottom = 10 } }
  };
  NodeCollection.Add(node1);
 }
}
Sets a custom content for an icon Property: Nodes[i].ExpandIcon.Content

<SfDiagram Nodes="@NodeCollection" />
@code
{
 public ObservableCollection<DiagramNode> NodeCollection = new ObservableCollection<DiagramNode>();
 protected override void OnInitialized()
 {
  DiagramNode node1 = new DiagramNode()
  {
   Id = "node",
   OffsetX = 300,
   OffsetY = 288,
   Width = 100,
   Height = 100,
   ExpandIcon = new NodeExpandIcon()
   {
    Content = "<div>Custom Content</div>", Shape = IconShapes.Template }
  };
  NodeCollection.Add(node1);
 }
} 		Property: DiagramTemplates.DiagramExpandIconTemplate

<SfDiagramComponent Nodes="@NodeCollection">
 <DiagramTemplates>
  <DiagramExpandIconTemplate>
  @{
   if (context.Height != 0 && context.Width != 0)
   {
   <div style="height: 100%; width: 100%; background:#2766cc"></div>
   }
  }
  </DiagramExpandIconTemplate>
 </DiagramTemplates>
</SfDiagramComponent>
@code
{
 public DiagramObjectCollection<Node> NodeCollection = new DiagramObjectCollection<Node>();
 protected override void OnInitialized()
 {
  Node node1 = new Node()
  {
   Height = 100,
   Width = 100,
   ID = "node",
   OffsetX = 300,
   OffsetY = 288,
   ExpandIcon = new DiagramExpandIcon()
   {
    Shape = DiagramExpandIcons.Template, Padding = new DiagramThickness() { Bottom = 10 } }
  };
  NodeCollection.Add(node1);
 }
}

Collapse Icon for Node

Behavior API in SfDiagram API in SfDiagramComponent
Defines a collapse icon to be render for the node Property: Nodes[i].CollapseIcon

Sets a CollapseIcon property as NodeCollapseIcon

<SfDiagram Nodes="@NodeCollection" />
@code
{
 public ObservableCollection<DiagramNode> NodeCollection = new ObservableCollection<DiagramNode>();
 protected override void OnInitialized()
 {
  DiagramNode node1 = new DiagramNode()
  {
   Id = "node",
   OffsetX = 300,
   OffsetY = 288,
   Width = 100,
   Height = 100,
   CollapseIcon = new NodeCollapseIcon()
   {
    Shape = IconShapes.Minus }
  };
  NodeCollection.Add(node1);
 }
} 		Property: Nodes[i].CollapseIcon

Sets a CollapseIcon property as DiagramCollapseIcon

<SfDiagramComponent Nodes="@NodeCollection" />
@code
{
 public DiagramObjectCollection<Node> NodeCollection = new DiagramObjectCollection<Node>();
 protected override void OnInitialized()
 {
  Node node1 = new Node()
  {
   Height = 100,
   Width = 100,
   ID = "node",
   OffsetX = 300,
   OffsetY = 288,
   CollapseIcon = new DiagramCollapseIcon()
   {
    Shape = DiagramCollapseIcons.Plus }
  };
  NodeCollection.Add(node1);
 }
}
Sets a Margin property for collapse icon Property: Nodes[i].CollapseIcon.Margin

<SfDiagram Nodes="@NodeCollection" />
@code
{
 public ObservableCollection<DiagramNode> NodeCollection = new ObservableCollection<DiagramNode>();
 protected override void OnInitialized()
 {
  DiagramNode node1 = new DiagramNode()
  {
   Id = "node",
   OffsetX = 300,
   OffsetY = 288,
   Width = 100,
   Height = 100,
   CollapseIcon = new NodeCollapseIcon()
   {
    Shape = IconShapes.Minus, Margin = new CollapseIconMargin() { Bottom = 10 } }
  };
  NodeCollection.Add(node1);
 }
} 		Property: Nodes[i].CollapseIcon.Margin

<SfDiagramComponent Nodes="@NodeCollection" />
@code
{
 public DiagramObjectCollection<Node> NodeCollection = new DiagramObjectCollection<Node>();
 protected override void OnInitialized()
 {
  Node node1 = new Node()
  {
   Height = 100,
   Width = 100,
   ID = "node",
   OffsetX = 300,
   OffsetY = 288,
   CollapseIcon = new DiagramCollapseIcon()
   {
    Shape = DiagramExpandIcons.Minus, Margin = new DiagramThickness() { Bottom = 10 } }
  };
  NodeCollection.Add(node1);
 }
}
Sets a offset property for collapse icon Property: Nodes[i].CollapseIcon.Offset

<SfDiagram Nodes="@NodeCollection" />
@code
{
 public ObservableCollection<DiagramNode> NodeCollection = new ObservableCollection<DiagramNode>();
 protected override void OnInitialized()
 {
  DiagramNode node1 = new DiagramNode()
  {
   Id = "node",
   OffsetX = 300,
   OffsetY = 288,
   Width = 100,
   Height = 100,
   CollapseIcon = new NodeCollapseIcon()
   {
    Shape = IconShapes.Minus, Offset = new IconOffset() { X = 0, Y = 0 } }
  };
  NodeCollection.Add(node1);
 }
} 		Property: Nodes[i].ExpandIcon.OffsetX, Nodes[i].CollapseIcon.OffsetY

<SfDiagramComponent Nodes="@NodeCollection" />
@code
{
 public DiagramObjectCollection<Node> NodeCollection = new DiagramObjectCollection<Node>();
 protected override void OnInitialized()
 {
  Node node1 = new Node()
  {
   Height = 100,
   Width = 100,
   ID = "node",
   OffsetX = 300,
   OffsetY = 288,
   CollapseIcon = new DiagramCollapseIcon()
   {
    Shape = DiagramExpandIcons.Minus, OffsetX = 10, OffsetY = 10 }
  };
  NodeCollection.Add(node1);
 }
}
Sets a Padding property for collapse icon Property: Nodes[i].CollapseIcon.Padding

<SfDiagram Nodes="@NodeCollection" />
@code
{
 public ObservableCollection<DiagramNode> NodeCollection = new ObservableCollection<DiagramNode>();
 protected override void OnInitialized()
 {
  DiagramNode node1 = new DiagramNode()
  {
   Id = "node",
   OffsetX = 300,
   OffsetY = 288,
   Width = 100,
   Height = 100,
   CollapseIcon = new NodeCollapseIcon()
   {
    Shape = IconShapes.Minus, Padding = new IconPadding() { Bottom = 10 } }
  };
  NodeCollection.Add(node1);
 }
} 		Property: Nodes[i].CollapseIcon.Padding

<SfDiagramComponent Nodes="@NodeCollection" />
@code
{
 public DiagramObjectCollection<Node> NodeCollection = new DiagramObjectCollection<Node>();
 protected override void OnInitialized()
 {
  Node node1 = new Node()
  {
   Height = 100,
   Width = 100,
   ID = "node",
   OffsetX = 300,
   OffsetY = 288,
   CollapseIcon = new DiagramCollapseIcon()
   {
    Shape = DiagramExpandIcons.Minus, Padding = new DiagramThickness() { Bottom = 10 } }
  };
  NodeCollection.Add(node1);
 }
}
Sets a custom content for an icon Property: Nodes[i].CollapseIcon.Content

<SfDiagram Nodes="@NodeCollection" />
@code
{
 public ObservableCollection<DiagramNode> NodeCollection = new ObservableCollection<DiagramNode>();
 protected override void OnInitialized()
 {
  DiagramNode node1 = new DiagramNode()
  {
   Id = "node",
   OffsetX = 300,
   OffsetY = 288,
   Width = 100,
   Height = 100,
   CollapseIcon = new NodeCollapseIcon()
   {
    Content = "<div>Custom Content</div>", Shape = IconShapes.Template }
  };
  NodeCollection.Add(node1);
 }
} 		Property: DiagramTemplates.DiagramCollapseIconTemplate

<SfDiagramComponent Nodes="@NodeCollection">
 <DiagramTemplates>
  <DiagramCollapseIconTemplate>
  @{
   if (context.Height != 0 && context.Width != 0)
   {
   <div style="height: 100%; width: 100%; background:#2766cc"></div>
   }
  }
  </DiagramCollapseIconTemplate>
 </DiagramTemplates>
</SfDiagramComponent>
@code
{
 public DiagramObjectCollection<Node> NodeCollection = new DiagramObjectCollection<Node>();
 protected override void OnInitialized()
 {
  Node node1 = new Node()
  {
   Height = 100,
   Width = 100,
   ID = "node",
   OffsetX = 300,
   OffsetY = 288,
   CollapseIcon = new DiagramCollapseIcon()
   {
    Shape = DiagramExpandIcons.Template, Padding = new DiagramThickness() { Bottom = 10 } }
  };
  NodeCollection.Add(node1);
 }
}

Tooltip for Node

Behavior API in SfDiagram API in SfDiagramComponent
Defines a tooltip to be render for the node Property: Nodes[i].Tooltip

Sets a Tooltip property as NodeTooltip

<SfDiagram Nodes="@NodeCollection" />
@code
{
 public ObservableCollection<DiagramNode> NodeCollection = new ObservableCollection<DiagramNode>();
 protected override void OnInitialized()
 {
  DiagramNode node1 = new DiagramNode()
  {
   Id = "node",
   OffsetX = 300,
   OffsetY = 288,
   Width = 100,
   Height = 100,
   Tooltip = new NodeTooltip()
   {
    Content = "Node ToolTip" }
  };
  NodeCollection.Add(node1);
 }
} 		Property: Nodes[i].Tooltip

Sets a Tooltip property as DiagramTooltip

<SfDiagramComponent Nodes="@NodeCollection" />
@code
{
 public DiagramObjectCollection<Node> NodeCollection = new DiagramObjectCollection<Node>();
 protected override void OnInitialized()
 {
  Node node1 = new Node()
  {
   Height = 100,
   Width = 100,
   ID = "node",
   OffsetX = 300,
   OffsetY = 288,
   Tooltip = new DiagramTooltip()
   {
    Content = "Node ToolTip" }
  };
  NodeCollection.Add(node1);
 }
}
Sets a Animation for the tooltip Property: Nodes[i].Tooltip.Animation

<SfDiagram Nodes="@NodeCollection" />
@code
{
 public ObservableCollection<DiagramNode> NodeCollection = new ObservableCollection<DiagramNode>();
 protected override void OnInitialized()
 {
  DiagramNode node1 = new DiagramNode()
  {
   Id = "node",
   OffsetX = 300,
   OffsetY = 288,
   Width = 100,
   Height = 100,
   Tooltip = new NodeTooltip()
   {
    Content = "Node ToolTip", Animation = new DiagramTooltipAnimation() { OpenAnimationSettings = new DiagramTooltipAnimationSettings() { Delay = 10, Duration = 30, Effect=Effect.FadeOut }, CloseAnimationSettings = new DiagramTooltipAnimationSettings() { Delay = 10, Duration = 30, Effect=Effect.FadeOut } }, }
  };
  NodeCollection.Add(node1);
 }
} 		Property: Nodes[i].Tooltip.AnimationSettings

<SfDiagramComponent Nodes="@NodeCollection" />
@code
{
 public DiagramObjectCollection<Node> NodeCollection = new DiagramObjectCollection<Node>();
 protected override void OnInitialized()
 {
  Node node1 = new Node()
  {
   Height = 100,
   Width = 100,
   ID = "node",
   OffsetX = 300,
   OffsetY = 288,
   Tooltip = new DiagramTooltip()
   {
    Content = "Node ToolTip", AnimationSettings = new Syncfusion.Blazor.Popups.AnimationModel() { Open = new Syncfusion.Blazor.Popups.TooltipAnimationSettings() { Delay = 10, Duration = 50, Effect = Syncfusion.Blazor.Popups.Effect.FadeIn }, Close = new Syncfusion.Blazor.Popups.TooltipAnimationSettings() { Delay = 10, Duration = 50, Effect = Syncfusion.Blazor.Popups.Effect.FadeOut } } }
  };
  NodeCollection.Add(node1);
 }
}
Sets a OpenOn property for the tooltip Property: Nodes[i].Tooltip.OpenOn

<SfDiagram Nodes="@NodeCollection" />
@code
{
 public ObservableCollection<DiagramNode> NodeCollection = new ObservableCollection<DiagramNode>();
 protected override void OnInitialized()
 {
  DiagramNode node1 = new DiagramNode()
  {
   Id = "node",
   OffsetX = 300,
   OffsetY = 288,
   Width = 100,
   Height = 100,
   Tooltip = new NodeTooltip()
   {
    Content = "Node ToolTip", OpenOn = TooltipMode.Auto }
  };
  NodeCollection.Add(node1);
 }
} 		Property: Nodes[i].Tooltip.OpensOn

<SfDiagramComponent Nodes="@NodeCollection" />
@code
{
 public DiagramObjectCollection<Node> NodeCollection = new DiagramObjectCollection<Node>();
 protected override void OnInitialized()
 {
  Node node1 = new Node()
  {
   Height = 100,
   Width = 100,
   ID = "node",
   OffsetX = 300,
   OffsetY = 288,
   Tooltip = new DiagramTooltip()
   {
    Content = "Node ToolTip", OpensOn = "Auto" }
  };
  NodeCollection.Add(node1);
 }
}
Sets a RelativeMode property for the tooltip Property: Nodes[i].Tooltip.RelativeMode

<SfDiagram Nodes="@NodeCollection" />
@code
{
 public ObservableCollection<DiagramNode> NodeCollection = new ObservableCollection<DiagramNode>();
 protected override void OnInitialized()
 {
  DiagramNode node1 = new DiagramNode()
  {
   Id = "node",
   OffsetX = 300,
   OffsetY = 288,
   Width = 100,
   Height = 100,
   Tooltip = new NodeTooltip()
   {
    Content = "Node ToolTip", RelativeMode= TooltipRelativeMode.Object
  };
  NodeCollection.Add(node1);
 }
} 		Not supported

Connector

Behavior API in SfDiagram API in SfDiagramComponent
Defines a collection of connectors to be render in the diagram Property: Connectors

<SfDiagram Connectors="ConnectorCollection" />
@code
{
 public ConnectorCollection = new ObservableCollection<DiagramConnector>();
 protected override void OnInitialized()
 {
  DiagramConnector connector1 = new DiagramConnector()
  {
   Id = "connector",
   SourcePoint=new ConnectorSourcePoint(){X = 100, Y = 100},
   TargetPoint = new ConnectorTargetPoint(){X=200, Y=200}
  };
  ConnectorCollection.Add(connector1);
 }
} 		Property: Connectors

<SfDiagramComponent Connectors="ConnectorCollection" />
@code
{
 public DiagramObjectCollection<Connector> ConnectorCollection = new DiagramObjectCollection<Connector>();
 protected override void OnInitialized()
 {
  Connector connector1 = new Connector()
  {
   ID = "connector",
   SourcePoint = new DiagramPoint() {X=100, Y=100},
   TargetPoint = new DiagramPoint(){X=200,Y=200}
  };
  ConnectorCollection.Add(connector1);
 }
}
Defines a unique id for the connector Property: Connectors[i].Id

<SfDiagram Connectors="ConnectorCollection" />
@code
{
 public ConnectorCollection = new ObservableCollection<DiagramConnector>();
 protected override void OnInitialized()
 {
  DiagramConnector connector1 = new DiagramConnector()
  {
   Id = "connector",
   SourcePoint=new ConnectorSourcePoint(){X = 100, Y = 100},
   TargetPoint = new ConnectorTargetPoint(){X=200, Y=200}
  };
  ConnectorCollection.Add(connector1);
 }
} 		Property: Connectors[i].ID

<SfDiagramComponent Connectors="ConnectorCollection" />
@code
{
 public DiagramObjectCollection<Connector> ConnectorCollection = new DiagramObjectCollection<Connector>();
 protected override void OnInitialized()
 {
  Connector connector1 = new Connector()
  {
   ID = "connector",
   SourcePoint = new DiagramPoint() {X=100, Y=100},
   TargetPoint = new DiagramPoint(){X=200,Y=200}
  };
  ConnectorCollection.Add(connector1);
 }
}
Sets an Add info property for the connector Property: Connectors[i].AddInfo

<SfDiagram Connectors="ConnectorCollection" />
@code
{
 public ConnectorCollection = new ObservableCollection<DiagramConnector>();
 protected override void OnInitialized()
 {
  DiagramConnector connector1 = new DiagramConnector()
  {
   AddInfo="Add additional information", Id = "connector",
   SourcePoint=new ConnectorSourcePoint(){X = 100, Y = 100},
   TargetPoint = new ConnectorTargetPoint(){X=200, Y=200}
  };
  ConnectorCollection.Add(connector1);
 }
} 		Property: Connectors[i].AdditionalInfo

<SfDiagramComponent Connectors="ConnectorCollection" />
@code
{
 public DiagramObjectCollection<Connector> ConnectorCollection = new DiagramObjectCollection<Connector>();
 protected override void OnInitialized()
 {
  Connector connector1 = new Connector()
  {
  Dictionary<string, object> AddInformation = new Dictionary<string, object>();
  AddInformation.Add("AddInformation", "Addition Information");
   AdditionalInfo = AddInformation, ID = "connector",
   SourcePoint = new DiagramPoint() {X=100, Y=100},
   TargetPoint = new DiagramPoint(){X=200,Y=200}
  };
  ConnectorCollection.Add(connector1);
 }
}
Sets the source point for the connector Property: Connectors[i].SourcePoint

<SfDiagram Connectors="ConnectorCollection" />
@code
{
 public ConnectorCollection = new ObservableCollection<DiagramConnector>();
 protected override void OnInitialized()
 {
  DiagramConnector connector1 = new DiagramConnector()
  {
   Id = "connector",
   SourcePoint=new ConnectorSourcePoint(){X = 100, Y = 100},
   TargetPoint = new ConnectorTargetPoint(){X=200, Y=200}
  };
  ConnectorCollection.Add(connector1);
 }
} 		Property: Connectors[i].SourcePoint

<SfDiagramComponent Connectors="ConnectorCollection" />
@code
{
 public DiagramObjectCollection<Connector> ConnectorCollection = new DiagramObjectCollection<Connector>();
 protected override void OnInitialized()
 {
  Connector connector1 = new Connector()
  {
   ID = "connector",
   SourcePoint = new DiagramPoint() {X=100, Y=100},
   TargetPoint = new DiagramPoint(){X=200,Y=200}
  };
  ConnectorCollection.Add(connector1);
 }
}
Sets the target point for the connector Property: Connectors[i].TargetPoint

<SfDiagram Connectors="ConnectorCollection" />
@code
{
 public ConnectorCollection = new ObservableCollection<DiagramConnector>();
 protected override void OnInitialized()
 {
  DiagramConnector connector1 = new DiagramConnector()
  {
   Id = "connector",
   SourcePoint=new ConnectorSourcePoint(){X = 100, Y = 100},
   TargetPoint = new ConnectorTargetPoint(){X=200, Y=200}
  };
  ConnectorCollection.Add(connector1);
 }
} 		Property: Connectors[i].TargetPoint

<SfDiagramComponent Connectors="ConnectorCollection" />
@code
{
 public DiagramObjectCollection<Connector> ConnectorCollection = new DiagramObjectCollection<Connector>();
 protected override void OnInitialized()
 {
  Connector connector1 = new Connector()
  {
   ID = "connector",
   SourcePoint = new DiagramPoint() {X=100, Y=100},
   TargetPoint = new DiagramPoint(){X=200,Y=200}
  };
  ConnectorCollection.Add(connector1);
 }
}
Defines whether the connector should be automatically position or not. Applicable if the layout option is enabled Property: Connectors[i].ExcludeFromLayout

<SfDiagram Connectors="ConnectorCollection" />
@code
{
 public ConnectorCollection = new ObservableCollection<DiagramConnector>();
 protected override void OnInitialized()
 {
  DiagramConnector connector1 = new DiagramConnector()
  {
   ExcludeFromLayout = true,
   SourcePoint=new ConnectorSourcePoint(){X = 100, Y = 100},
   TargetPoint = new ConnectorTargetPoint(){X=200, Y=200}
  };
  ConnectorCollection.Add(connector1);
 }
} 		Property: Connectors[i].CanAutoLayout

<SfDiagramComponent Connectors="ConnectorCollection" />
@code
{
 public DiagramObjectCollection<Connector> ConnectorCollection = new DiagramObjectCollection<Connector>();
 protected override void OnInitialized()
 {
  Connector connector1 = new Connector()
  {
   CanAutoLayout = true,
   SourcePoint = new DiagramPoint() {X=100, Y=100},
   TargetPoint = new DiagramPoint(){X=200,Y=200}
  };
  ConnectorCollection.Add(connector1);
 }
}
Set’s DragSize property for connector Property: Connectors[i].DragSize

<SfDiagram Connectors="ConnectorCollection" />
@code
{
 public ConnectorCollection = new ObservableCollection<DiagramConnector>();
 protected override void OnInitialized()
 {
  DiagramConnector connector1 = new DiagramConnector()
  {
   DragSize = new SymbolSizeModel(){ Height = 100, Width = 100},
   SourcePoint=new ConnectorSourcePoint(){X = 100, Y = 100},
   TargetPoint = new ConnectorTargetPoint(){X=200, Y=200}
  };
  ConnectorCollection.Add(connector1);
 }
} 		Property: SymbolPalette.SymbolDragPreviewSize

<SfSymbolPaletteComponent Height="300px" Width="200px" Palettes="@Palettes" SymbolDragPreviewSize="@symbolDragPreviewSize"></SfSymbolPaletteComponent>
@code
{
 DiagramObjectCollection<Palette> Palettes = new DiagramObjectCollection<Palette>();
 DiagramSize symbolDragPreviewSize;
 DiagramObjectCollection<NodeBase> PaletteNodes = new DiagramObjectCollection<NodeBase>();
 DiagramObjectCollection<NodeBase> PaletteConnectors = new DiagramObjectCollection<NodeBase>();
 protected override void OnInitialized()
 {
  InitPaletteModel();
 }

 private void InitPaletteModel()
 {
  symbolDragPreviewSize = new DiagramSize() {Width = 100, Height = 100 };
  CreatePaletteNode(NodeFlowShapes.Terminator, "Terminator");
  CreatePaletteConnector("Link1", ConnectorSegmentType.Orthogonal, DecoratorShape.Arrow);
  Palettes = new DiagramObjectCollection<Palette>()
  {
   new Palette(){Symbols =PaletteNodes, Title="Flow Shapes", ID="Flow Shapes" },
   new Palette(){Symbols = PaletteConnectors, Title = "Connectors" , IsExpanded = true},
  };
 }

 private void CreatePaletteNode(NodeFlowShapes flowShape, string id)
 {
  Node node = new Node()
  {
   ID = id,
   Shape = new FlowShape() { Type = NodeShapes.Flow, Shape = flowShape },
   Style = new ShapeStyle() {Fill="#6495ED", StrokeColor = "#757575" },
  };
  PaletteNodes.Add(node);
 }

 private void CreatePaletteConnector(string id, ConnectorSegmentType type, DecoratorShape decoratorShape)
 {
  Connector connector = new Connector()
  {
   ID = id,
   Type = type,
   SourcePoint = new DiagramPoint() { X = 0, Y = 0 },
   TargetPoint = new DiagramPoint() { X = 100, Y = 100 },
   Style = new ShapeStyle() { StrokeWidth = 1, StrokeColor = "#6495ED" },
   TargetDecorator = new DecoratorSettings()
   {
    Shape = decoratorShape,
    Style = new ShapeStyle() { StrokeColor = "#6495ED", Fill = "#6495ED" }
   }
  };
  PaletteConnectors.Add(connector);
 }
}
Set’s PreviewSize property for connector Property: Connectors[i].PreviewSize

<SfDiagram Connectors="ConnectorCollection" />
@code
{
 public ConnectorCollection = new ObservableCollection<DiagramConnector>();
 protected override void OnInitialized()
 {
  DiagramConnector connector1 = new DiagramConnector()
  {
   PreviewSize = new SymbolSizeModel(){ Height = 100, Width = 100},
   SourcePoint=new ConnectorSourcePoint(){X = 100, Y = 100},
   TargetPoint = new ConnectorTargetPoint(){X=200, Y=200}
  };
  ConnectorCollection.Add(connector1);
 }
} 		Property: SymbolPalette.SymbolDragPreviewSize

<SfSymbolPaletteComponent Height="300px" Width="200px" Palettes="@Palettes" SymbolDragPreviewSize="@symbolDragPreviewSize"></SfSymbolPaletteComponent>
@code
{
 DiagramObjectCollection<Palette> Palettes = new DiagramObjectCollection<Palette>();
 DiagramSize symbolDragPreviewSize;
 DiagramObjectCollection<NodeBase> PaletteNodes = new DiagramObjectCollection<NodeBase>();
 DiagramObjectCollection<NodeBase> PaletteConnectors = new DiagramObjectCollection<NodeBase>();
 protected override void OnInitialized()
 {
  InitPaletteModel();
 }

 private void InitPaletteModel()
 {
  symbolDragPreviewSize = new DiagramSize() {Width = 100, Height = 100 };
  CreatePaletteNode(NodeFlowShapes.Terminator, "Terminator");
  CreatePaletteConnector("Link1", ConnectorSegmentType.Orthogonal, DecoratorShape.Arrow);
  Palettes = new DiagramObjectCollection<Palette>()
  {
   new Palette(){Symbols =PaletteNodes, Title="Flow Shapes", ID="Flow Shapes" },
   new Palette(){Symbols = PaletteConnectors, Title = "Connectors" , IsExpanded = true},
  };
 }

 private void CreatePaletteNode(NodeFlowShapes flowShape, string id)
 {
  Node node = new Node()
  {
   ID = id,
   Shape = new FlowShape() { Type = NodeShapes.Flow, Shape = flowShape },
   Style = new ShapeStyle() {Fill="#6495ED", StrokeColor = "#757575" },
  };
  PaletteNodes.Add(node);
 }

 private void CreatePaletteConnector(string id, ConnectorSegmentType type, DecoratorShape decoratorShape)
 {
  Connector connector = new Connector()
  {
   ID = id,
   Type = type,
   SourcePoint = new DiagramPoint() { X = 0, Y = 0 },
   TargetPoint = new DiagramPoint() { X = 100, Y = 100 },
   Style = new ShapeStyle() { StrokeWidth = 1, StrokeColor = "#6495ED" },
   TargetDecorator = new DecoratorSettings()
   {
    Shape = decoratorShape,
    Style = new ShapeStyle() { StrokeColor = "#6495ED", Fill = "#6495ED" }
   }
  };
  PaletteConnectors.Add(connector);
 }
}
Set’s SymbolInfo property for connector Property: Connectors[i].SymbolInfo

<SfDiagram Connectors="ConnectorCollection" />
@code
{
 public ConnectorCollection = new ObservableCollection<DiagramConnector>();
 protected override void OnInitialized()
 {
  DiagramConnector connector1 = new DiagramConnector()
  {
   SymbolInfo = new SymbolInfo(){ Fit = true },
   SourcePoint=new ConnectorSourcePoint(){X = 100, Y = 100},
   TargetPoint = new ConnectorTargetPoint(){X=200, Y=200}
  };
  ConnectorCollection.Add(connector1);
 }
} 		Property: SymbolPalette.GetSymbolInfo

<SfSymbolPaletteComponent Height="300px" Width="200px" Palettes="@Palettes" GetSymbolInfo="GetSymbolInfo"></SfSymbolPaletteComponent>
@code
{
 DiagramObjectCollection<Palette> Palettes = new DiagramObjectCollection<Palette>();
 DiagramObjectCollection<NodeBase> PaletteNodes = new DiagramObjectCollection<NodeBase>();
 DiagramObjectCollection<NodeBase> PaletteConnectors = new DiagramObjectCollection<NodeBase>();
 protected override void OnInitialized()
 {
  InitPaletteModel();
 }

 private void InitPaletteModel()
 {
  CreatePaletteNode(NodeFlowShapes.Terminator, "Terminator");
  CreatePaletteConnector("Link1", ConnectorSegmentType.Orthogonal, DecoratorShape.Arrow);
  Palettes = new DiagramObjectCollection<Palette>()
  {
   new Palette(){Symbols =PaletteNodes, Title="Flow Shapes", ID="Flow Shapes" },
   new Palette(){Symbols = PaletteConnectors, Title = "Connectors" , IsExpanded = true},
  };
 }

 private void CreatePaletteNode(NodeFlowShapes flowShape, string id)
 {
  Node node = new Node()
  {
   ID = id,
   Shape = new FlowShape() { Type = NodeShapes.Flow, Shape = flowShape },
   Style = new ShapeStyle() {Fill="#6495ED", StrokeColor = "#757575" },
  };
  PaletteNodes.Add(node);
 }

 private void CreatePaletteConnector(string id, ConnectorSegmentType type, DecoratorShape decoratorShape)
 {
  Connector connector = new Connector()
  {
   ID = id,
   Type = type,
   SourcePoint = new DiagramPoint() { X = 0, Y = 0 },
   TargetPoint = new DiagramPoint() { X = 100, Y = 100 },
   Style = new ShapeStyle() { StrokeWidth = 1, StrokeColor = "#6495ED" },
   TargetDecorator = new DecoratorSettings()
   {
   &nbsp;Shape = decoratorShape,<br>&nbsp;&nbsp;&nbsp; Style = new ShapeStyle() { StrokeColor = "#6495ED", Fill = "#6495ED" }
   }
  };
  PaletteConnectors.Add(connector);
 }

 private SymbolInfo GetSymbolInfo(IDiagramObject symbol)
 {
  SymbolInfo SymbolInfo = new SymbolInfo();
  string text = null;
  text = (symbol as Node).ID;
  SymbolInfo.Description = new SymbolDescription() { Text = text };
  return SymbolInfo;
 }
}
Set’s Visible property for connector Property: Connectors[i].Visible

<SfDiagram Connectors="ConnectorCollection" />
@code
{
 public ConnectorCollection = new ObservableCollection<DiagramConnector>();
 protected override void OnInitialized()
 {
  DiagramConnector connector1 = new DiagramConnector()
  {
   Visible = true,
   SourcePoint=new ConnectorSourcePoint(){X = 100, Y = 100},
   TargetPoint = new ConnectorTargetPoint(){X=200, Y=200}
  };
  ConnectorCollection.Add(connector1);
 }
} 		Property: Connectors[i].IsVisible

<SfDiagramComponent Connectors="ConnectorCollection" />
@code
{
 public DiagramObjectCollection<Connector> ConnectorCollection = new DiagramObjectCollection<Connector>();
 protected override void OnInitialized()
 {
  Connector connector1 = new Connector()
  {
   IsVisible = true,
   SourcePoint = new DiagramPoint() {X=100, Y=100},
   TargetPoint = new DiagramPoint(){X=200,Y=200}
  };
  ConnectorCollection.Add(connector1);
 }
}
Set’s Margin property for connector Property: Connectors[i].Margin

<SfDiagram Connectors="ConnectorCollection" />
@code
{
 public ConnectorCollection = new ObservableCollection<DiagramConnector>();
 protected override void OnInitialized()
 {
  DiagramConnector connector1 = new DiagramConnector()
  {
   Margin = new ConnectorMargin(){Bottom =10},
   SourcePoint=new ConnectorSourcePoint(){X = 100, Y = 100},
   TargetPoint = new ConnectorTargetPoint(){X=200, Y=200}
  };
  ConnectorCollection.Add(connector1);
 }
} 		Property: Connectors[i].Margin

<SfDiagramComponent Connectors="ConnectorCollection" />
@code
{
 public DiagramObjectCollection<Connector> ConnectorCollection = new DiagramObjectCollection<Connector>();
 protected override void OnInitialized()
 {
  Connector connector1 = new Connector()
  {
    Margin = new DiagramThickness(){ Bottom =10 },
   SourcePoint = new DiagramPoint() {X=100, Y=100},
   TargetPoint = new DiagramPoint(){X=200,Y=200}
  };
  ConnectorCollection.Add(connector1);
 }
}
Set’s FlipMode property for connector Not supported Property: Connectors[i].FlipMode

<SfDiagramComponent Connectors="ConnectorCollection" />
@code
{
 public DiagramObjectCollection<Connector> ConnectorCollection = new DiagramObjectCollection<Connector>();
 protected override void OnInitialized()
 {
  Connector connector1 = new Connector()
  {
   FlipMode = DiagramFlipMode.All
   SourcePoint = new DiagramPoint() {X=100, Y=100},
   TargetPoint = new DiagramPoint(){X=200,Y=200}
  };
  ConnectorCollection.Add(connector1);
 }
}
Set’s style property for connector Property: Connectors[i].Style

<SfDiagram Connectors="ConnectorCollection" />
@code
{
 public ConnectorCollection = new ObservableCollection<DiagramConnector>();
 protected override void OnInitialized()
 {
  DiagramConnector connector1 = new DiagramConnector()
  {
   Style = new ConnectorShapeStyle(){Fill = "red", StrokeColor = "blue", StrokeDashArray = "2,2", Opacity = 0.9, StrokeWidth = 3},
   SourcePoint=new ConnectorSourcePoint(){X = 100, Y = 100},
   TargetPoint = new ConnectorTargetPoint(){X=200, Y=200}
  };
  ConnectorCollection.Add(connector1);
 }
} 		Property: Connectors[i].Style

<SfDiagramComponent Connectors="ConnectorCollection" />
@code
{
 public DiagramObjectCollection<Connector> ConnectorCollection = new DiagramObjectCollection<Connector>();
 protected override void OnInitialized()
 {
  Connector connector1 = new Connector()
  {
   Style = new ShapeStyle() { Fill = "red", StrokeColor = "blue", StrokeDashArray = "2,2", Opacity = 0.9, StrokeWidth = 3 }
   SourcePoint = new DiagramPoint() {X=100, Y=100},
   TargetPoint = new DiagramPoint(){X=200,Y=200}
  };
  ConnectorCollection.Add(connector1);
 }
}

Connector Segments

Behavior API in SfDiagram API in SfDiagramComponent
Sets the straight segment connector Property: Connectors[i].Segments

Sets the segments as ObservableCollection<DiagramConnectorSegment> and defines the DiagramConnectorSegment as collection

<SfDiagram Connectors="ConnectorCollection" />
@code
{
 public ConnectorCollection = new ObservableCollection<DiagramConnector>();
 protected override void OnInitialized()
 {
  DiagramConnector connector1 = new DiagramConnector()
  {
   SourcePoint=new ConnectorSourcePoint(){X = 100, Y = 100},
   TargetPoint = new ConnectorTargetPoint(){X=200, Y=200},
   Segments = new ObservableCollection<DiagramConnectorSegment>()
   {
    new DiagramConnectorSegment(){ Type= DiagramSegments.Straight, Point= new StraightSegmentPoint(){X= 150, Y=120 } }
    }
  };
  ConnectorCollection.Add(connector1);
 }
} 		Property: Connectors[i].Segments

Sets the segments as DiagramObjectCollection<ConnectorSegment> and defines the StraightSegment as collection

<SfDiagramComponent Connectors="ConnectorCollection" />
@code
{
 public DiagramObjectCollection<Connector> ConnectorCollection = new DiagramObjectCollection<Connector>();
 protected override void OnInitialized()
 {
  Connector connector1 = new Connector()
  {
   Segments = new DiagramObjectCollection<ConnectorSegment>()
   {
    new StraightSegment(){ Type = ConnectorSegmentType.Straight, Point= new DiagramPoint(){ X=100, Y=120 } }
   }
   SourcePoint = new DiagramPoint() {X=100, Y=100},
   TargetPoint = new DiagramPoint(){X=200,Y=200}
  };
  ConnectorCollection.Add(connector1);
 }
}
Sets the orthogonal segment connector Property: Connectors[i].Segments

Sets the segments as ObservableCollection<DiagramConnectorSegment> and defines the DiagramConnectorSegment as collection

<SfDiagram Connectors="ConnectorCollection" />
@code
{
 public ConnectorCollection = new ObservableCollection<DiagramConnector>();
 protected override void OnInitialized()
 {
  DiagramConnector connector1 = new DiagramConnector()
  {
   SourcePoint=new ConnectorSourcePoint(){X = 100, Y = 100},
   TargetPoint = new ConnectorTargetPoint(){X=200, Y=200},
   Segments = new ObservableCollection<DiagramConnectorSegment>()
   {
    new DiagramConnectorSegment(){ Type = DiagramSegments.Orthogonal, Direction = Direction.Left, Length= 100 }
    }
  };
  ConnectorCollection.Add(connector1);
 }
} 		Property: Connectors[i].Segments

Sets the segments as DiagramObjectCollection<ConnectorSegment> and defines the OrthogonalSegment as collection

<SfDiagramComponent Connectors="ConnectorCollection" />
@code
{
 public DiagramObjectCollection<Connector> ConnectorCollection = new DiagramObjectCollection<Connector>();
 protected override void OnInitialized()
 {
  Connector connector1 = new Connector()
  {
   Segments = new DiagramObjectCollection<ConnectorSegment>()
   {
    new OrthogonalSegment(){ Type = ConnectorSegmentType.Orthogonal, Direction = Direction.Right, Length = 100 }
   }
   SourcePoint = new DiagramPoint() {X=100, Y=100},
   TargetPoint = new DiagramPoint(){X=200,Y=200}
  };
  ConnectorCollection.Add(connector1);
 }
}
Sets the bezier segment connector based on control points Property: Connectors[i].Segments

Sets the segments as ObservableCollection<DiagramConnectorSegment> and defines the DiagramConnectorSegment as collection

<SfDiagram Connectors="ConnectorCollection" />
@code
{
 public ConnectorCollection = new ObservableCollection<DiagramConnector>();
 protected override void OnInitialized()
 {
  DiagramConnector connector1 = new DiagramConnector()
  {
   SourcePoint=new ConnectorSourcePoint(){X = 100, Y = 100},
   TargetPoint = new ConnectorTargetPoint(){X=200, Y=200},
   Segments = new ObservableCollection<DiagramConnectorSegment>()
   {
    new DiagramConnectorSegment(){ Type = DiagramSegments.Bezier, Point = new StraightSegmentPoint(){X= 150, Y=120 }, Point1=new FirstSegmentPoint(){X=100, Y=100}, Point2 = new SecondSegmentPoint(){ X= 200, Y = 200 } }
    }
  };
  ConnectorCollection.Add(connector1);
 }
} 		Property: Connectors[i].Segments

Sets the segments as DiagramObjectCollection<ConnectorSegment> and defines the BezierSegment as collection

<SfDiagramComponent Connectors="ConnectorCollection" />
@code
{
 public DiagramObjectCollection<Connector> ConnectorCollection = new DiagramObjectCollection<Connector>();
 protected override void OnInitialized()
 {
  Connector connector1 = new Connector()
  {
   Segments = new DiagramObjectCollection<ConnectorSegment>()
   {
    new BezierSegment(){ Type= ConnectorSegmentType.Bezier, Point=new DiagramPoint(){ X=100, Y=120 }, Point1=new DiagramPoint(){X=100, Y=100}, Point2=new DiagramPoint(){ X= 200, Y = 200} }
   }
   SourcePoint = new DiagramPoint() {X=100, Y=100},
   TargetPoint = new DiagramPoint(){X=200,Y=200}
  };
  ConnectorCollection.Add(connector1);
 }
}
Sets the bezier segment connector based on control angle and distance Property: Connectors[i].Segments

Sets the segments as ObservableCollection<DiagramConnectorSegment> and defines the DiagramConnectorSegment as collection

<SfDiagram Connectors="ConnectorCollection" />
@code
{
 public ConnectorCollection = new ObservableCollection<DiagramConnector>();
 protected override void OnInitialized()
 {
  DiagramConnector connector1 = new DiagramConnector()
  {
   SourcePoint=new ConnectorSourcePoint(){X = 100, Y = 100},
   TargetPoint = new ConnectorTargetPoint(){X=200, Y=200},
   Segments = new ObservableCollection<DiagramConnectorSegment>()
   {
    new DiagramConnectorSegment(){ Type = DiagramSegments.Bezier, Point = new StraightSegmentPoint(){X= 150, Y=120 }, Vector1=new FirstVector(){ Angle= 30, Distance=10}, Vector2 = new SecondVector(){Angle = 60, Distance=20} }
    }
  };
  ConnectorCollection.Add(connector1);
 }
} 		Property: Connectors[i].Segments

Sets the segments as DiagramObjectCollection<ConnectorSegment> and defines the BezierSegment as collection

<SfDiagramComponent Connectors="ConnectorCollection" />
@code
{
 public DiagramObjectCollection<Connector> ConnectorCollection = new DiagramObjectCollection<Connector>();
 protected override void OnInitialized()
 {
  Connector connector1 = new Connector()
  {
   Segments = new DiagramObjectCollection<ConnectorSegment>()
   {
    new BezierSegment(){ Type= ConnectorSegmentType.Bezier, Point=new DiagramPoint(){ X=100, Y=120 }, Vector1 = new Vector(){ Angle = 30, Distance =10}, Vector2 = new Vector(){Angle = 60,Distance = 30 } },
   }
   SourcePoint = new DiagramPoint() {X=100, Y=100},
   TargetPoint = new DiagramPoint(){X=200,Y=200}
  };
  ConnectorCollection.Add(connector1);
 }
}

Connector Shape

Behavior API in SfDiagram API in SfDiagramComponent
Defines the default bpmn association shapes in connector Property: Connectors[i].Shape

Sets the shape as DiagramConnectorShape

<SfDiagram Connectors="ConnectorCollection" />
@code
{
 public ConnectorCollection = new ObservableCollection<DiagramConnector>();
 protected override void OnInitialized()
 {
  DiagramConnector connector1 = new DiagramConnector()
  {
   SourcePoint=new ConnectorSourcePoint(){X = 100, Y = 100},
   TargetPoint = new ConnectorTargetPoint(){X=200, Y=200},
   Shape = new DiagramConnectorShape(){ Association = BpmnAssociationFlows.Default, BpmnFlow = BpmnFlows.Association, Type = ConnectionShapes.Bpmn }
  };
  ConnectorCollection.Add(connector1);
 }
} 		Property: Connectors[i].Shape

Sets the shape as BpmnFlow

<SfDiagramComponent Connectors="ConnectorCollection" />
@code
{
 public DiagramObjectCollection<Connector> ConnectorCollection = new DiagramObjectCollection<Connector>();
 protected override void OnInitialized()
 {
  Connector connector1 = new Connector()
  {
   Shape = new BpmnFlow(){ Flow = BpmnFlowType.AssociationFlow },
   SourcePoint = new DiagramPoint() {X=100, Y=100},
   TargetPoint = new DiagramPoint(){X=200,Y=200}
  };
  ConnectorCollection.Add(connector1);
 }
}
Defines the BiDirectional bpmn association shapes in connector Property: Connectors[i].Shape

Sets the shape as DiagramConnectorShape

<SfDiagram Connectors="ConnectorCollection" />
@code
{
 public ConnectorCollection = new ObservableCollection<DiagramConnector>();
 protected override void OnInitialized()
 {
  DiagramConnector connector1 = new DiagramConnector()
  {
   SourcePoint=new ConnectorSourcePoint(){X = 100, Y = 100},
   TargetPoint = new ConnectorTargetPoint(){X=200, Y=200},
   Shape = new DiagramConnectorShape(){ Association = BpmnAssociationFlows.BiDirectional, BpmnFlow = BpmnFlows.Association, Type = ConnectionShapes.Bpmn }
  };
  ConnectorCollection.Add(connector1);
 }
} 		Property: Connectors[i].Shape

Sets the shape as BpmnFlow

<SfDiagramComponent Connectors="ConnectorCollection" />
@code
{
 public DiagramObjectCollection<Connector> ConnectorCollection = new DiagramObjectCollection<Connector>();
 protected override void OnInitialized()
 {
  Connector connector1 = new Connector()
  {
   Shape = new BpmnFlow(){ Flow = BpmnFlowType.BiDirectionalAssociationFlow },
   SourcePoint = new DiagramPoint() {X=100, Y=100},
   TargetPoint = new DiagramPoint(){X=200,Y=200}
  };
  ConnectorCollection.Add(connector1);
 }
}
Defines the Directional bpmn association shapes in connector Property: Connectors[i].Shape

Sets the shape as DiagramConnectorShape

<SfDiagram Connectors="ConnectorCollection" />
@code
{
 public ConnectorCollection = new ObservableCollection<DiagramConnector>();
 protected override void OnInitialized()
 {
  DiagramConnector connector1 = new DiagramConnector()
  {
   SourcePoint=new ConnectorSourcePoint(){X = 100, Y = 100},
   TargetPoint = new ConnectorTargetPoint(){X=200, Y=200},
   Shape = new DiagramConnectorShape(){ Association = BpmnAssociationFlows.Directional, BpmnFlow = BpmnFlows.Association, Type = ConnectionShapes.Bpmn }
  };
  ConnectorCollection.Add(connector1);
 }
} 		Property: Connectors[i].Shape

Sets the shape as BpmnFlow

<SfDiagramComponent Connectors="ConnectorCollection" />
@code
{
 public DiagramObjectCollection<Connector> ConnectorCollection = new DiagramObjectCollection<Connector>();
 protected override void OnInitialized()
 {
  Connector connector1 = new Connector()
  {
   Shape = new BpmnFlow(){ Flow = BpmnFlowType.DirectionalAssociationFlow },
   SourcePoint = new DiagramPoint() {X=100, Y=100},
   TargetPoint = new DiagramPoint(){X=200,Y=200}
  };
  ConnectorCollection.Add(connector1);
 }
}
Defines the normal bpmn sequence shapes in connector Property: Connectors[i].Shape

Sets the shape as DiagramConnectorShape

<SfDiagram Connectors="ConnectorCollection" />
@code
{
 public ConnectorCollection = new ObservableCollection<DiagramConnector>();
 protected override void OnInitialized()
 {
  DiagramConnector connector1 = new DiagramConnector()
  {
   SourcePoint=new ConnectorSourcePoint(){X = 100, Y = 100},
   TargetPoint = new ConnectorTargetPoint(){X=200, Y=200},
   Shape = new DiagramConnectorShape(){ BpmnFlow = BpmnFlows.Sequence, Sequence = BpmnSequenceFlows.Default, Type = ConnectionShapes.Bpmn }
  };
  ConnectorCollection.Add(connector1);
 }
} 		Property: Connectors[i].Shape

Sets the shape as BpmnFlow

<SfDiagramComponent Connectors="ConnectorCollection" />
@code
{
 public DiagramObjectCollection<Connector> ConnectorCollection = new DiagramObjectCollection<Connector>();
 protected override void OnInitialized()
 {
  Connector connector1 = new Connector()
  {
   Shape = new BpmnFlow(){ Flow = BpmnFlowType.SequenceFlow },
   SourcePoint = new DiagramPoint() {X=100, Y=100},
   TargetPoint = new DiagramPoint(){X=200,Y=200}
  };
  ConnectorCollection.Add(connector1);
 }
}
Defines the conditional bpmn sequence shapes in connector Property: Connectors[i].Shape

Sets the shape as DiagramConnectorShape

<SfDiagram Connectors="ConnectorCollection" />
@code
{
 public ConnectorCollection = new ObservableCollection<DiagramConnector>();
 protected override void OnInitialized()
 {
  DiagramConnector connector1 = new DiagramConnector()
  {
   SourcePoint=new ConnectorSourcePoint(){X = 100, Y = 100},
   TargetPoint = new ConnectorTargetPoint(){X=200, Y=200},
   Shape = new DiagramConnectorShape(){ BpmnFlow = BpmnFlows.Sequence, Sequence = BpmnSequenceFlows.Conditional, Type = ConnectionShapes.Bpmn }
  };
  ConnectorCollection.Add(connector1);
 }
} 		Property: Connectors[i].Shape

Sets the shape as BpmnFlow

<SfDiagramComponent Connectors="ConnectorCollection" />
@code
{
 public DiagramObjectCollection<Connector> ConnectorCollection = new DiagramObjectCollection<Connector>();
 protected override void OnInitialized()
 {
  Connector connector1 = new Connector()
  {
   Shape = new BpmnFlow(){ Flow = BpmnFlowType.ConditionalSequenceFlow },
   SourcePoint = new DiagramPoint() {X=100, Y=100},
   TargetPoint = new DiagramPoint(){X=200,Y=200}
  };
  ConnectorCollection.Add(connector1);
 }
}
Defines the Default bpmn sequence shapes in connector Property: Connectors[i].Shape

Sets the shape as DiagramConnectorShape

<SfDiagram Connectors="ConnectorCollection" />
@code
{
 public ConnectorCollection = new ObservableCollection<DiagramConnector>();
 protected override void OnInitialized()
 {
  DiagramConnector connector1 = new DiagramConnector()
  {
   SourcePoint=new ConnectorSourcePoint(){X = 100, Y = 100},
   TargetPoint = new ConnectorTargetPoint(){X=200, Y=200},
   Shape = new DiagramConnectorShape(){ BpmnFlow = BpmnFlows.Sequence, Sequence = BpmnSequenceFlows.Default, Type = ConnectionShapes.Bpmn }
  };
  ConnectorCollection.Add(connector1);
 }
} 		Property: Connectors[i].Shape

Sets the shape as BpmnFlow

<SfDiagramComponent Connectors="ConnectorCollection" />
@code
{
 public DiagramObjectCollection<Connector> ConnectorCollection = new DiagramObjectCollection<Connector>();
 protected override void OnInitialized()
 {
  Connector connector1 = new Connector()
  {
   Shape = new BpmnFlow(){ Flow = BpmnFlowType.DefaultSequenceFlow },
   SourcePoint = new DiagramPoint() {X=100, Y=100},
   TargetPoint = new DiagramPoint(){X=200,Y=200}
  };
  ConnectorCollection.Add(connector1);
 }
}
Defines the Default bpmn Message shapes in connector Property: Connectors[i].Shape

Sets the shape as DiagramConnectorShape

<SfDiagram Connectors="ConnectorCollection" />
@code
{
 public ConnectorCollection = new ObservableCollection<DiagramConnector>();
 protected override void OnInitialized()
 {
  DiagramConnector connector1 = new DiagramConnector()
  {
   SourcePoint=new ConnectorSourcePoint(){X = 100, Y = 100},
   TargetPoint = new ConnectorTargetPoint(){X=200, Y=200},
   Shape = new DiagramConnectorShape(){ BpmnFlow = BpmnFlows.Message, Message = BpmnMessageFlows.Default, Type = ConnectionShapes.Bpmn }
  };
  ConnectorCollection.Add(connector1);
 }
} 		Property: Connectors[i].Shape

Sets the shape as BpmnFlow

<SfDiagramComponent Connectors="ConnectorCollection" />
@code
{
 public DiagramObjectCollection<Connector> ConnectorCollection = new DiagramObjectCollection<Connector>();
 protected override void OnInitialized()
 {
  Connector connector1 = new Connector()
  {
   Shape = new BpmnFlow(){ Flow = BpmnFlowType.MessageFlow },
   SourcePoint = new DiagramPoint() {X=100, Y=100},
   TargetPoint = new DiagramPoint(){X=200,Y=200}
  };
  ConnectorCollection.Add(connector1);
 }
}
Defines the Initiating bpmn Message shapes in connector Property: Connectors[i].Shape

Sets the shape as DiagramConnectorShape

<SfDiagram Connectors="ConnectorCollection" />
@code
{
 public ConnectorCollection = new ObservableCollection<DiagramConnector>();
 protected override void OnInitialized()
 {
  DiagramConnector connector1 = new DiagramConnector()
  {
   SourcePoint=new ConnectorSourcePoint(){X = 100, Y = 100},
   TargetPoint = new ConnectorTargetPoint(){X=200, Y=200},
   Shape = new DiagramConnectorShape(){ BpmnFlow = BpmnFlows.Message, Message = BpmnMessageFlows.InitiatingMessage, Type = ConnectionShapes.Bpmn }
  };
  ConnectorCollection.Add(connector1);
 }
} 		Property: Connectors[i].Shape

Sets the shape as BpmnFlow

<SfDiagramComponent Connectors="ConnectorCollection" />
@code
{
 public DiagramObjectCollection<Connector> ConnectorCollection = new DiagramObjectCollection<Connector>();
 protected override void OnInitialized()
 {
  Connector connector1 = new Connector()
  {
   Shape = new BpmnFlow(){ Flow = BpmnFlowType.InitiatingMessageFlow },
   SourcePoint = new DiagramPoint() {X=100, Y=100},
   TargetPoint = new DiagramPoint(){X=200,Y=200}
  };
  ConnectorCollection.Add(connector1);
 }
}
Defines the NonInitiating bpmn Message shapes in connector Property: Connectors[i].Shape

Sets the shape as DiagramConnectorShape

<SfDiagram Connectors="ConnectorCollection" />
@code
{
 public ConnectorCollection = new ObservableCollection<DiagramConnector>();
 protected override void OnInitialized()
 {
  DiagramConnector connector1 = new DiagramConnector()
  {
   SourcePoint=new ConnectorSourcePoint(){X = 100, Y = 100},
   TargetPoint = new ConnectorTargetPoint(){X=200, Y=200},
   Shape = new DiagramConnectorShape(){ BpmnFlow = BpmnFlows.Message, Message = BpmnMessageFlows.NonInitiatingMessage, Type = ConnectionShapes.Bpmn }
  };
  ConnectorCollection.Add(connector1);
 }
} 		Property: Connectors[i].Shape

Sets the shape as BpmnFlow

<SfDiagramComponent Connectors="ConnectorCollection" />
@code
{
 public DiagramObjectCollection<Connector> ConnectorCollection = new DiagramObjectCollection<Connector>();
 protected override void OnInitialized()
 {
  Connector connector1 = new Connector()
  {
   Shape = new BpmnFlow(){ Flow = BpmnFlowType.NonInitiatingMessageFlow },
   SourcePoint = new DiagramPoint() {X=100, Y=100},
   TargetPoint = new DiagramPoint(){X=200,Y=200}
  };
  ConnectorCollection.Add(connector1);
 }
}
Defines the UML Classifier shape in connector Property: Connectors[i].Shape

Sets the shape as DiagramConnectorShape

<SfDiagram Connectors="ConnectorCollection" />
@code
{
 public ConnectorCollection = new ObservableCollection<DiagramConnector>();
 protected override void OnInitialized()
 {
  DiagramConnector connector1 = new DiagramConnector()
  {
   SourcePoint=new ConnectorSourcePoint(){X = 100, Y = 100},
   TargetPoint = new ConnectorTargetPoint(){X=200, Y=200},
   Shape = new DiagramConnectorShape(){ Type = ConnectionShapes.UmlClassifier, Relationship = ClassifierShape.Association, AssociationType = AssociationFlow.BiDirectional }
  };
  ConnectorCollection.Add(connector1);
 }
} 		Not supported
Defines the UML Activity shape in connector Property: Connectors[i].Shape

Sets the shape as DiagramConnectorShape

<SfDiagram Connectors="ConnectorCollection" />
@code
{
 public ConnectorCollection = new ObservableCollection<DiagramConnector>();
 protected override void OnInitialized()
 {
  DiagramConnector connector1 = new DiagramConnector()
  {
   SourcePoint=new ConnectorSourcePoint(){X = 100, Y = 100},
   TargetPoint = new ConnectorTargetPoint(){X=200, Y=200},
   Shape = new DiagramConnectorShape(){ Type = ConnectionShapes.UmlActivity, UmlActivityFlow = UmlActivityFlows.Exception }
  };
  ConnectorCollection.Add(connector1);
 }
} 		Not supported

Connector Source Decorator

Behavior API in SfDiagram API in SfDiagramComponent
Defines the shape of the source decorator of the connector Property: Connectors[i].SourceDecorator.Shape

Sets the shape as ConnectorSourceDecorator

<SfDiagram Connectors="ConnectorCollection" />
@code
{
 public ConnectorCollection = new ObservableCollection<DiagramConnector>();
 protected override void OnInitialized()
 {
  DiagramConnector connector1 = new DiagramConnector()
  {
   SourcePoint=new ConnectorSourcePoint(){X = 100, Y = 100},
   TargetPoint = new ConnectorTargetPoint(){X=200, Y=200},
   SourceDecorator = new ConnectorSourceDecorator(){ Shape = DecoratorShapes.Diamond }
  };
  ConnectorCollection.Add(connector1);
 }
} 		Property: Connectors[i].SourceDecorator.Shape

Sets the shape as DecoratorSettings

<SfDiagramComponent Connectors="ConnectorCollection" />
@code
{
 public DiagramObjectCollection<Connector> ConnectorCollection = new DiagramObjectCollection<Connector>();
 protected override void OnInitialized()
 {
  Connector connector1 = new Connector()
  {
   SourceDecorator = new DecoratorSettings(){ Shape = DecoratorShape.Diamond },
   SourcePoint = new DiagramPoint() {X=100, Y=100},
   TargetPoint = new DiagramPoint(){X=200,Y=200}
  };
  ConnectorCollection.Add(connector1);
 }
}
Defines the Pivot of the source decorator of the connector Property: Connectors[i].SourceDecorator.Pivot

Sets the pivot as DecoratorPivot

<SfDiagram Connectors="ConnectorCollection" />
@code
{
 public ConnectorCollection = new ObservableCollection<DiagramConnector>();
 protected override void OnInitialized()
 {
  DiagramConnector connector1 = new DiagramConnector()
  {
   SourcePoint=new ConnectorSourcePoint(){X = 100, Y = 100},
   TargetPoint = new ConnectorTargetPoint(){X=200, Y=200},
   SourceDecorator = new ConnectorSourceDecorator(){ Shape = DecoratorShapes.Diamond, Pivot = new DecoratorPivot(){X =0.5, Y=0.5 } }
  };
  ConnectorCollection.Add(connector1);
 }
} 		Property: Connectors[i].SourceDecorator.Pivot

Sets the pivot as DiagramPoint

<SfDiagramComponent Connectors="ConnectorCollection" />
@code
{
 public DiagramObjectCollection<Connector> ConnectorCollection = new DiagramObjectCollection<Connector>();
 protected override void OnInitialized()
 {
  Connector connector1 = new Connector()
  {
   SourceDecorator = new DecoratorSettings(){ Shape = DecoratorShape.Diamond, Pivot = new DiagramPoint() { X = 0.5, Y = 0.5 } },
   SourcePoint = new DiagramPoint() {X=100, Y=100},
   TargetPoint = new DiagramPoint(){X=200,Y=200}
  };
  ConnectorCollection.Add(connector1);
 }
}
Defines the Style of the source decorator of the connector Property: Connectors[i].SourceDecorator.Style

Sets the style as DecoratorShapeStyle

<SfDiagram Connectors="ConnectorCollection" />
@code
{
 public ConnectorCollection = new ObservableCollection<DiagramConnector>();
 protected override void OnInitialized()
 {
  DiagramConnector connector1 = new DiagramConnector()
  {
   SourcePoint=new ConnectorSourcePoint(){X = 100, Y = 100},
   TargetPoint = new ConnectorTargetPoint(){X=200, Y=200},
   SourceDecorator = new ConnectorSourceDecorator(){ Shape = DecoratorShapes.Diamond, Style= new DecoratorShapeStyle(){ Fill = "red", StrokeColor = "blue", StrokeDashArray = "2,2", Opacity = 0.9, StrokeWidth = 3 } }
  };
  ConnectorCollection.Add(connector1);
 }
} 		Property: Connectors[i].SourceDecorator.Style

Sets the style as ShapeStyle

<SfDiagramComponent Connectors="ConnectorCollection" />
@code
{
 public DiagramObjectCollection<Connector> ConnectorCollection = new DiagramObjectCollection<Connector>();
 protected override void OnInitialized()
 {
  Connector connector1 = new Connector()
  {
   SourceDecorator = new DecoratorSettings(){ Shape = DecoratorShape.Diamond, Style = new ShapeStyle() { Fill = "red", StrokeColor = "blue", StrokeDashArray = "2,2", Opacity = 0.9, StrokeWidth = 3 } },
   SourcePoint = new DiagramPoint() {X=100, Y=100},
   TargetPoint = new DiagramPoint(){X=200,Y=200}
  };
  ConnectorCollection.Add(connector1);
 }
}

Connector Target Decorator

Behavior API in SfDiagram API in SfDiagramComponent
Defines the shape of the target decorator of the connector Property: Connectors[i].TargetDecorator.Shape

Sets the shape as ConnectorTargetDecorator

<SfDiagram Connectors="ConnectorCollection" />
@code
{
 public ConnectorCollection = new ObservableCollection<DiagramConnector>();
 protected override void OnInitialized()
 {
  DiagramConnector connector1 = new DiagramConnector()
  {
   SourcePoint=new ConnectorSourcePoint(){X = 100, Y = 100},
   TargetPoint = new ConnectorTargetPoint(){X=200, Y=200},
   TargetDecorator = new ConnectorTargetDecorator(){ Shape = DecoratorShapes.Diamond }
  };
  ConnectorCollection.Add(connector1);
 }
} 		Property: Connectors[i].TargetDecorator.Shape

Sets the shape as DecoratorSettings

<SfDiagramComponent Connectors="ConnectorCollection" />
@code
{
 public DiagramObjectCollection<Connector> ConnectorCollection = new DiagramObjectCollection<Connector>();
 protected override void OnInitialized()
 {
  Connector connector1 = new Connector()
  {
   TargetDecorator = new DecoratorSettings(){ Shape = DecoratorShape.Diamond },
   SourcePoint = new DiagramPoint() {X=100, Y=100},
   TargetPoint = new DiagramPoint(){X=200,Y=200}
  };
  ConnectorCollection.Add(connector1);
 }
}
Defines the Pivot of the source decorator of the connector Property: Connectors[i].TargetDecorator.Pivot

Sets the pivot as DecoratorPivot

<SfDiagram Connectors="ConnectorCollection" />
@code
{
 public ConnectorCollection = new ObservableCollection<DiagramConnector>();
 protected override void OnInitialized()
 {
  DiagramConnector connector1 = new DiagramConnector()
  {
   SourcePoint=new ConnectorSourcePoint(){X = 100, Y = 100},
   TargetPoint = new ConnectorTargetPoint(){X=200, Y=200},
   TargetDecorator = new ConnectorTargetDecorator(){ Shape = DecoratorShapes.Diamond, Pivot = new DecoratorPivot(){X =0.5, Y=0.5 } }
  };
  ConnectorCollection.Add(connector1);
 }
} 		Property: Connectors[i].TargetDecorator.Pivot

Sets the pivot as DiagramPoint

<SfDiagramComponent Connectors="ConnectorCollection" />
@code
{
 public DiagramObjectCollection<Connector> ConnectorCollection = new DiagramObjectCollection<Connector>();
 protected override void OnInitialized()
 {
  Connector connector1 = new Connector()
  {
   TargetDecorator = new DecoratorSettings(){ Shape = DecoratorShape.Diamond, Pivot = new DiagramPoint() { X = 0.5, Y = 0.5 } },
   SourcePoint = new DiagramPoint() {X=100, Y=100},
   TargetPoint = new DiagramPoint(){X=200,Y=200}
  };
  ConnectorCollection.Add(connector1);
 }
}
Defines the Style of the source decorator of the connector Property: Connectors[i].TargetDecorator.Style

Sets the style as DecoratorShapeStyle

<SfDiagram Connectors="ConnectorCollection" />
@code
{
 public ConnectorCollection = new ObservableCollection<DiagramConnector>();
 protected override void OnInitialized()
 {
  DiagramConnector connector1 = new DiagramConnector()
  {
   SourcePoint=new ConnectorSourcePoint(){X = 100, Y = 100},
   TargetPoint = new ConnectorTargetPoint(){X=200, Y=200},
   TargetDecorator = new ConnectorTargetDecorator(){ Shape = DecoratorShapes.Diamond, Style= new DecoratorShapeStyle(){ Fill = "red", StrokeColor = "blue", StrokeDashArray = "2,2", Opacity = 0.9, StrokeWidth = 3 } }
  };
  ConnectorCollection.Add(connector1);
 }
} 		Property: Connectors[i].TargetDecorator.Style

Sets the style as ShapeStyle

<SfDiagramComponent Connectors="ConnectorCollection" />
@code
{
 public DiagramObjectCollection<Connector> ConnectorCollection = new DiagramObjectCollection<Connector>();
 protected override void OnInitialized()
 {
  Connector connector1 = new Connector()
  {
   TargetDecorator = new DecoratorSettings(){ Shape = DecoratorShape.Diamond, Style = new ShapeStyle() { Fill = "red", StrokeColor = "blue", StrokeDashArray = "2,2", Opacity = 0.9, StrokeWidth = 3 } },
   SourcePoint = new DiagramPoint() {X=100, Y=100},
   TargetPoint = new DiagramPoint(){X=200,Y=200}
  };
  ConnectorCollection.Add(connector1);
 }
}

Annotation for Connector

Behavior API in SfDiagram API in SfDiagramComponent
Defines a collection of annotation to be render in the connector Property: Connectors[i].Annotations

Sets a annotation property as ObservableCollection<DiagramConnectorAnnotation>

<SfDiagram Connectors="ConnectorCollection" />
@code
{
 public ConnectorCollection = new ObservableCollection<DiagramConnector>();
 protected override void OnInitialized()
 {
  DiagramConnector connector1 = new DiagramConnector()
  {
   SourcePoint=new ConnectorSourcePoint(){X = 100, Y = 100},
   TargetPoint = new ConnectorTargetPoint(){X=200, Y=200},
   Annotations = new ObservableCollection<DiagramConnectorAnnotation>(){ new DiagramConnectorAnnotation(){ Content = "label" } }
  };
  ConnectorCollection.Add(connector1);
 }
} 		Property: Connectors[i].Annotations

Sets a annotation property as DiagramObjectCollection<PathAnnotation>

<SfDiagramComponent Connectors="ConnectorCollection" />
@code
{
 public DiagramObjectCollection<Connector> ConnectorCollection = new DiagramObjectCollection<Connector>();
 protected override void OnInitialized()
 {
  Connector connector1 = new Connector()
  {
   Annotations = new DiagramObjectCollection<PathAnnotation>(){new PathAnnotation(){ Content = "Label1" }},
   SourcePoint = new DiagramPoint() {X=100, Y=100},
   TargetPoint = new DiagramPoint(){X=200,Y=200}
  };
  ConnectorCollection.Add(connector1);
 }
}
Sets the AddInfo property for the connector Property: Connectors[i].Annotations[i].AddInfo

<SfDiagram Connectors="ConnectorCollection" />
@code
{
 public ConnectorCollection = new ObservableCollection<DiagramConnector>();
 protected override void OnInitialized()
 {
  DiagramConnector connector1 = new DiagramConnector()
  {
   SourcePoint=new ConnectorSourcePoint(){X = 100, Y = 100},
   TargetPoint = new ConnectorTargetPoint(){X=200, Y=200},
   Annotations = new ObservableCollection<DiagramConnectorAnnotation>(){ new DiagramConnectorAnnotation(){ AddInfo = "Addition Information, Content = "label" } }
  };
  ConnectorCollection.Add(connector1);
 }
} 		Property: Connectors[i].Annotations[i].AdditionalInfo

<SfDiagramComponent Connectors="ConnectorCollection" />
@code
{
 public DiagramObjectCollection<Connector> ConnectorCollection = new DiagramObjectCollection<Connector>();
 protected override void OnInitialized()
 {
  Dictionary<string, object> AnnotationInfo = new Dictionary<string, object>();
  AnnotationInfo.Add("AnnotationInfo", "Annotation's Addition Information");
  Connector connector1 = new Connector()
  {
   Annotations = new DiagramObjectCollection<PathAnnotation>(){new PathAnnotation(){ AdditionalInfo=AnnotationInfo, Content = "Label1" }},
   SourcePoint = new DiagramPoint() {X=100, Y=100},
   TargetPoint = new DiagramPoint(){X=200,Y=200}
  };
  ConnectorCollection.Add(connector1);
 }
}
Sets the DragLimit property for the path annotation Property: Connectors[i].Annotations[i].DragLimit

<SfDiagram Connectors="ConnectorCollection" />
@code
{
 public ConnectorCollection = new ObservableCollection<DiagramConnector>();
 protected override void OnInitialized()
 {
  DiagramConnector connector1 = new DiagramConnector()
  {
   SourcePoint=new ConnectorSourcePoint(){X = 100, Y = 100},
   TargetPoint = new ConnectorTargetPoint(){X=200, Y=200},
   Annotations = new ObservableCollection<DiagramConnectorAnnotation>(){ new DiagramConnectorAnnotation(){ Content = "label", DragLimit = new ConnectorAnnotationDragLimit(){ Bottom = 50, Left = 50} } }
  };
  ConnectorCollection.Add(connector1);
 }
} 		Not supported
Sets the AnnotationType property for the annotation Property: Connectors[i].Annotations[i].AnnotationType

<SfDiagram Connectors="ConnectorCollection" />
@code
{
 public ConnectorCollection = new ObservableCollection<DiagramConnector>();
 protected override void OnInitialized()
 {
  DiagramConnector connector1 = new DiagramConnector()
  {
   SourcePoint=new ConnectorSourcePoint(){X = 100, Y = 100},
   TargetPoint = new ConnectorTargetPoint(){X=200, Y=200},
   Annotations = new ObservableCollection<DiagramConnectorAnnotation>(){ new DiagramConnectorAnnotation(){ Content = "label", AnnotationType = AnnotationType.String } }
  };
  ConnectorCollection.Add(connector1);
 }
} 		Property: Connectors[i].Annotations[i].UseTemplate

Gets or sets a value indicating whether annotation should be rendered as a template using value defined in AnnotationTemplate property.



<SfDiagramComponent Width="1200px" Height="700px" Connectors="@connectors">
 <DiagramTemplates>
  <AnnotationTemplate>
    @if (context is Annotation annotation)
     {
      if (annotation.ID.Contains("TemplateAnnotation1"))
      {
       string ID = annotation.ID + "TemplateContent";
       <div id="@ID" style="height: 100%; width: 100%; display: flex; justify-content: center; align-items: center;"><button>Button</button></div>
      }
     }
   </AnnotationTemplate>
 </DiagramTemplates>
</SfDiagramComponent>
@code {
 private DiagramObjectCollection<Connector> connectors = new DiagramObjectCollection<Connector>();
 protected override void OnInitialized()
 {
  Connector connector1 = new Connector()
  {
   ID = "connector1", SourcePoint = new DiagramPoint() { X = 100, Y = 20 }, TargetPoint = new DiagramPoint() { X = 200, Y = 120 },
    Annotations = new DiagramObjectCollection<PathAnnotation>()
    {
    new PathAnnotation()
    {
    ID = "TemplateAnnotation1", UseTemplate = true, Height = 30,Width = 60, Content = "Annotation"
    }
   },
   };
  connectors.Add(connector1);
 }
}
Sets the Id property for the node Property: Connectors[i].Annotations[i].Id

<SfDiagram Connectors="ConnectorCollection" />
@code
{
 public ConnectorCollection = new ObservableCollection<DiagramConnector>();
 protected override void OnInitialized()
 {
  DiagramConnector connector1 = new DiagramConnector()
  {
   SourcePoint=new ConnectorSourcePoint(){X = 100, Y = 100},
   TargetPoint = new ConnectorTargetPoint(){X=200, Y=200},
   Annotations = new ObservableCollection<DiagramConnectorAnnotation>(){ new DiagramConnectorAnnotation(){ Id="ConnectorLabel", Content = "label" } }
  };
  ConnectorCollection.Add(connector1);
 }
} 		Property: Connectors[i].Annotations[i].ID

<SfDiagramComponent Connectors="ConnectorCollection" />
@code
{
 public DiagramObjectCollection<Connector> ConnectorCollection = new DiagramObjectCollection<Connector>();
 protected override void OnInitialized()
 {
  Dictionary<string, object> AnnotationInfo = new Dictionary<string, object>();
  AnnotationInfo.Add("AnnotationInfo", "Annotation's Addition Information");
  Connector connector1 = new Connector()
  {
   Annotations = new DiagramObjectCollection<PathAnnotation>(){new PathAnnotation(){ ID="ConnectorLabel", Content = "Label1" }},
   SourcePoint = new DiagramPoint() {X=100, Y=100},
   TargetPoint = new DiagramPoint(){X=200,Y=200}
  };
  ConnectorCollection.Add(connector1);
 }
}
Sets the Hyperlink property for the annotation of the connector Property: Connectors[i].Annotations[i].Hyperlink

<SfDiagram Connectors="ConnectorCollection" />
@code
{
 public ConnectorCollection = new ObservableCollection<DiagramConnector>();
 protected override void OnInitialized()
 {
  DiagramConnector connector1 = new DiagramConnector()
  {
   SourcePoint=new ConnectorSourcePoint(){X = 100, Y = 100},
   TargetPoint = new ConnectorTargetPoint(){X=200, Y=200},
   Annotations = new ObservableCollection<DiagramConnectorAnnotation>(){ new DiagramConnectorAnnotation(){ Content = "label", Hyperlink = new ConnectorHyperlink(){ Color = 'red', Content = "Syncfusion", Link="https://blazor.syncfusion.com/" } } }
  };
  ConnectorCollection.Add(connector1);
 }
} 		Property: Connectors[i].Annotations[i].Hyperlink

<SfDiagramComponent Connectors="ConnectorCollection" />
@code
{
 public DiagramObjectCollection<Connector> ConnectorCollection = new DiagramObjectCollection<Connector>();
 protected override void OnInitialized()
 {
  Connector connector1 = new Connector()
  {
   Annotations = new DiagramObjectCollection<PathAnnotation>(){new PathAnnotation(){ Content = "Label1", Hyperlink = new HyperlinkSettings() {Color = "red", Content = "HyperlinkContent", Url = "https://blazor.syncfusion.com/" } }},
   SourcePoint = new DiagramPoint() {X=100, Y=100},
   TargetPoint = new DiagramPoint(){X=200,Y=200}
  };
  ConnectorCollection.Add(connector1);
 }
}
Sets the Style property for the annotation for the connector Property: Connectors[i].Annotations[i].Style

<SfDiagram Connectors="ConnectorCollection" />
@code
{
 public ConnectorCollection = new ObservableCollection<DiagramConnector>();
 protected override void OnInitialized()
 {
  DiagramConnector connector1 = new DiagramConnector()
  {
   SourcePoint=new ConnectorSourcePoint(){X = 100, Y = 100},
   TargetPoint = new ConnectorTargetPoint(){X=200, Y=200},
   Annotations = new ObservableCollection<DiagramConnectorAnnotation>(){ new DiagramConnectorAnnotation(){ Content = "label", Style = new AnnotationStyle() { Bold = true, Color = "orange", FontFamily = "Arial", FontSize = 20, Italic=true,TextAlign= TextAlign.Right, TextDecoration = TextDecoration.Underline,TextOverflow = TextOverflow.Ellipsis, TextWrapping = Syncfusion.Blazor.Diagrams.TextWrap.WrapWithOverflow } } }
  };
  ConnectorCollection.Add(connector1);
 }
} 		Property: Connectors[i].Annotations[i].Style

<SfDiagramComponent Connectors="ConnectorCollection" />
@code
{
 public DiagramObjectCollection<Connector> ConnectorCollection = new DiagramObjectCollection<Connector>();
 protected override void OnInitialized()
 {
  Connector connector1 = new Connector()
  {
   Annotations = new DiagramObjectCollection<PathAnnotation>(){new PathAnnotation(){ Content = "Label1", Style = new TextStyle(){Bold = true, Color = "orange", FontFamily = "Arial", FontSize = 20, Italic=true,TextAlign= TextAlign.Right, TextDecoration = TextDecoration.Underline, TextOverflow = TextOverflow.Ellipsis,TextWrapping = Syncfusion.Blazor.Diagram.TextWrap.WrapWithOverflow } }},
   SourcePoint = new DiagramPoint() {X=100, Y=100},
   TargetPoint = new DiagramPoint(){X=200,Y=200}
  };
  ConnectorCollection.Add(connector1);
 }
}
Sets the RotateAngle property for the annotation for the connector Property: Connectors[i].Annotations[i].RotateAngle

<SfDiagram Connectors="ConnectorCollection" />
@code
{
 public ConnectorCollection = new ObservableCollection<DiagramConnector>();
 protected override void OnInitialized()
 {
  DiagramConnector connector1 = new DiagramConnector()
  {
   SourcePoint=new ConnectorSourcePoint(){X = 100, Y = 100},
   TargetPoint = new ConnectorTargetPoint(){X=200, Y=200},
   Annotations = new ObservableCollection<DiagramConnectorAnnotation>(){ new DiagramConnectorAnnotation(){ Content = "label", RotateAngle = 10 } }
  };
  ConnectorCollection.Add(connector1);
 }
} 		Property: Connectors[i].Annotations[i].RotationAngle

<SfDiagramComponent Connectors="ConnectorCollection" />
@code
{
 public DiagramObjectCollection<Connector> ConnectorCollection = new DiagramObjectCollection<Connector>();
 protected override void OnInitialized()
 {
  Connector connector1 = new Connector()
  {
   Annotations = new DiagramObjectCollection<PathAnnotation>(){new PathAnnotation(){ Content = "Label1", RotationAngle = 10 }},
   SourcePoint = new DiagramPoint() {X=100, Y=100},
   TargetPoint = new DiagramPoint(){X=200,Y=200}
  };
  ConnectorCollection.Add(connector1);
 }
}
Sets the Margin property for the annotation of the connector Property: Connectors[i].Annotations[i].Margin

<SfDiagram Connectors="ConnectorCollection" />
@code
{
 public ConnectorCollection = new ObservableCollection<DiagramConnector>();
 protected override void OnInitialized()
 {
  DiagramConnector connector1 = new DiagramConnector()
  {
   SourcePoint=new ConnectorSourcePoint(){X = 100, Y = 100},
   TargetPoint = new ConnectorTargetPoint(){X=200, Y=200},
   Annotations = new ObservableCollection<DiagramConnectorAnnotation>(){ new DiagramConnectorAnnotation(){ Content = "label", Margin = new ConnectorAnnotationMargin(){ Bottom = 10} } }
  };
  ConnectorCollection.Add(connector1);
 }
} 		Property: Connectors[i].Annotations[i].Margin

<SfDiagramComponent Connectors="ConnectorCollection" />
@code
{
 public DiagramObjectCollection<Connector> ConnectorCollection = new DiagramObjectCollection<Connector>();
 protected override void OnInitialized()
 {
  Connector connector1 = new Connector()
  {
   Annotations = new DiagramObjectCollection<PathAnnotation>(){new PathAnnotation(){ Content = "Label1", Margin = new DiagramThickness(){ Left = 10 } }},
   SourcePoint = new DiagramPoint() {X=100, Y=100},
   TargetPoint = new DiagramPoint(){X=200,Y=200}
  };
  ConnectorCollection.Add(connector1);
 }
}
Sets the Template property for the annotation of the connector Property: Connectors[i].Annotations[i].Template

<SfDiagram Connectors="ConnectorCollection" />
@code
{
 public ConnectorCollection = new ObservableCollection<DiagramConnector>();
 protected override void OnInitialized()
 {
  DiagramConnector connector1 = new DiagramConnector()
  {
   SourcePoint=new ConnectorSourcePoint(){X = 100, Y = 100},
   TargetPoint = new ConnectorTargetPoint(){X=200, Y=200},
   Annotations = new ObservableCollection<DiagramConnectorAnnotation>(){ new DiagramConnectorAnnotation(){ Content = "label", AnnotationType = AnnotationType.Template, Template = "<div>Annotation template</div>" } }
  };
  ConnectorCollection.Add(connector1);
 }
} 		Property: Connectors[i].Annotations[i].UseTemplate

Gets or sets a value indicating whether annotation should be rendered as a template using value defined in AnnotationTemplate property.



<SfDiagramComponent Width="1200px" Height="700px" Connectors="@connectors">
 <DiagramTemplates>
  <AnnotationTemplate>
    @if (context is Annotation annotation)
     {
      if (annotation.ID.Contains("TemplateAnnotation1"))
      {
       string ID = annotation.ID + "TemplateContent";
       <div id="@ID" style="height: 100%; width: 100%; display: flex; justify-content: center; align-items: center;"><button>Button</button></div>
      }
     }
   </AnnotationTemplate>
 </DiagramTemplates>
</SfDiagramComponent>
@code {
 private DiagramObjectCollection<Connector> connectors = new DiagramObjectCollection<Connector>();
 protected override void OnInitialized()
 {
  Connector connector1 = new Connector()
  {
   ID = "connector1", SourcePoint = new DiagramPoint() { X = 100, Y = 20 }, TargetPoint = new DiagramPoint() { X = 200, Y = 120 },
    Annotations = new DiagramObjectCollection<PathAnnotation>()
    {
    new PathAnnotation()
    {
    ID = "TemplateAnnotation1", UseTemplate = true, Height = 30,Width = 60, Content = "Annotation"
    }
   },
   };
  connectors.Add(connector1);
 }
}
Sets the Type property for the annotation Property: Connectors[i].Annotations[i].Type

<SfDiagram Connectors="ConnectorCollection" />
@code
{
 public ConnectorCollection = new ObservableCollection<DiagramConnector>();
 protected override void OnInitialized()
 {
  DiagramConnector connector1 = new DiagramConnector()
  {
   SourcePoint=new ConnectorSourcePoint(){X = 100, Y = 100},
   TargetPoint = new ConnectorTargetPoint(){X=200, Y=200},
   Annotations = new ObservableCollection<DiagramConnectorAnnotation>(){ new DiagramConnectorAnnotation(){ Content = "label", Type = AnnotationTypes.Path } }
  };
  ConnectorCollection.Add(connector1);
 }
} 		The annotation for both node and connector can be established through the Annotations property without specifying the type.

Fixed User handle for Connector

Behavior API in SfDiagram API in SfDiagramComponent
Defines a collection of fixed user handle to be render in the connector Property: Connectors[i].FixedUserHandles

Sets a FixedUserHandles property as ObservableCollection<DiagramConnectorFixedUserHandle>

<SfDiagram Connectors="ConnectorCollection" />
@code
{
 public ConnectorCollection = new ObservableCollection<DiagramConnector>();
 protected override void OnInitialized()
 {
  DiagramConnector connector1 = new DiagramConnector()
  {
   SourcePoint=new ConnectorSourcePoint(){X = 100, Y = 100},
   TargetPoint = new ConnectorTargetPoint(){X=200, Y=200},
   FixedUserHandles=new ObservableCollection<DiagramConnectorFixedUserHandle>()
   {
    new DiagramConnectorFixedUserHandle()
    {
     PathData = "M60.3,18H27.5c-3,0-5.5,2.4-5.5,5.5v38.2h5.5V23.5h32.7V18z M68.5,28.9h-30c-3,0-5.5,2.4-5.5,5.5v38.2c0,3,2.4,5.5,5.5,5.5h30c3,0,5.5-2.4,5.5-5.5V34.4C73.9,31.4,71.5,28.9,68.5,28.9z M68.5,72.5h-30V34.4h30V72.5z"
    }
   }
  };
  ConnectorCollection.Add(connector1);
 }
} 		Property: Connectors[i].FixedUserHandles

Sets a FixedUserHandles property as DiagramObjectCollection<ConnectorFixedUserHandle>

<SfDiagramComponent Connectors="ConnectorCollection" />
@code
{
 public DiagramObjectCollection<Connector> ConnectorCollection = new DiagramObjectCollection<Connector>();
 protected override void OnInitialized()
 {
  Connector connector1 = new Connector()
  {
   SourcePoint = new DiagramPoint() {X=100, Y=100},
   TargetPoint = new DiagramPoint(){X=200,Y=200}
   FixedUserHandles = new DiagramObjectCollection<ConnectorFixedUserHandle>()
   {
    new ConnectorFixedUserHandle()
    {
     PathData = "M60.3,18H27.5c-3,0-5.5,2.4-5.5,5.5v38.2h5.5V23.5h32.7V18z M68.5,28.9h-30c-3,0-5.5,2.4-5.5,5.5v38.2c0,3,2.4,5.5,5.5,5.5h30c3,0,5.5-2.4,5.5-5.5V34.4C73.9,31.4,71.5,28.9,68.5,28.9z M68.5,72.5h-30V34.4h30V72.5z"
    }
   }
  };
  ConnectorCollection.Add(connector1);
 }
}
Sets a IconStrokeColor property Property: Connectors[i].FixedUserHandles[i].IconStrokeColor

<SfDiagram Connectors="ConnectorCollection" />
@code
{
 public ConnectorCollection = new ObservableCollection<DiagramConnector>();
 protected override void OnInitialized()
 {
  DiagramConnector connector1 = new DiagramConnector()
  {
   SourcePoint=new ConnectorSourcePoint(){X = 100, Y = 100},
   TargetPoint = new ConnectorTargetPoint(){X=200, Y=200},
   FixedUserHandles=new ObservableCollection<DiagramConnectorFixedUserHandle>()
   {
    new DiagramConnectorFixedUserHandle()
    {
     PathData = "M60.3,18H27.5c-3,0-5.5,2.4-5.5,5.5v38.2h5.5V23.5h32.7V18z M68.5,28.9h-30c-3,0-5.5,2.4-5.5,5.5v38.2c0,3,2.4,5.5,5.5,5.5h30c3,0,5.5-2.4,5.5-5.5V34.4C73.9,31.4,71.5,28.9,68.5,28.9z M68.5,72.5h-30V34.4h30V72.5z", IconStrokeColor = "blue"
    }
   }
  };
  ConnectorCollection.Add(connector1);
 }
} 		Property: Connectors[i].FixedUserHandles[i].IconStroke

<SfDiagramComponent Connectors="ConnectorCollection" />
@code
{
 public DiagramObjectCollection<Connector> ConnectorCollection = new DiagramObjectCollection<Connector>();
 protected override void OnInitialized()
 {
  Connector connector1 = new Connector()
  {
   SourcePoint = new DiagramPoint() {X=100, Y=100},
   TargetPoint = new DiagramPoint(){X=200,Y=200}
   FixedUserHandles = new DiagramObjectCollection<ConnectorFixedUserHandle>()
   {
    new ConnectorFixedUserHandle()
    {
     PathData = "M60.3,18H27.5c-3,0-5.5,2.4-5.5,5.5v38.2h5.5V23.5h32.7V18z M68.5,28.9h-30c-3,0-5.5,2.4-5.5,5.5v38.2c0,3,2.4,5.5,5.5,5.5h30c3,0,5.5-2.4,5.5-5.5V34.4C73.9,31.4,71.5,28.9,68.5,28.9z M68.5,72.5h-30V34.4h30V72.5z", IconStroke= "blue"
    }
   }
  };
  ConnectorCollection.Add(connector1);
 }
}
Sets a IconStrokeWidth property Property: Connectors[i].FixedUserHandles[i].IconStrokeWidth

<SfDiagram Connectors="ConnectorCollection" />
@code
{
 public ConnectorCollection = new ObservableCollection<DiagramConnector>();
 protected override void OnInitialized()
 {
  DiagramConnector connector1 = new DiagramConnector()
  {
   SourcePoint=new ConnectorSourcePoint(){X = 100, Y = 100},
   TargetPoint = new ConnectorTargetPoint(){X=200, Y=200},
   FixedUserHandles=new ObservableCollection<DiagramConnectorFixedUserHandle>()
   {
    new DiagramConnectorFixedUserHandle()
    {
     PathData = "M60.3,18H27.5c-3,0-5.5,2.4-5.5,5.5v38.2h5.5V23.5h32.7V18z M68.5,28.9h-30c-3,0-5.5,2.4-5.5,5.5v38.2c0,3,2.4,5.5,5.5,5.5h30c3,0,5.5-2.4,5.5-5.5V34.4C73.9,31.4,71.5,28.9,68.5,28.9z M68.5,72.5h-30V34.4h30V72.5z", IconStrokeWidth = 3
    }
   }
  };
  ConnectorCollection.Add(connector1);
 }
} 		Property: Connectors[i].FixedUserHandles[i].IconStrokeThickness

<SfDiagramComponent Connectors="ConnectorCollection" />
@code
{
 public DiagramObjectCollection<Connector> ConnectorCollection = new DiagramObjectCollection<Connector>();
 protected override void OnInitialized()
 {
  Connector connector1 = new Connector()
  {
   SourcePoint = new DiagramPoint() {X=100, Y=100},
   TargetPoint = new DiagramPoint(){X=200,Y=200}
   FixedUserHandles = new DiagramObjectCollection<ConnectorFixedUserHandle>()
   {
    new ConnectorFixedUserHandle()
    {
     PathData = "M60.3,18H27.5c-3,0-5.5,2.4-5.5,5.5v38.2h5.5V23.5h32.7V18z M68.5,28.9h-30c-3,0-5.5,2.4-5.5,5.5v38.2c0,3,2.4,5.5,5.5,5.5h30c3,0,5.5-2.4,5.5-5.5V34.4C73.9,31.4,71.5,28.9,68.5,28.9z M68.5,72.5h-30V34.4h30V72.5z", IconStrokeThickness= 3
    }
   }
  };
  ConnectorCollection.Add(connector1);
 }
}
Sets a HandleStrokeColor property Property: Connectors[i].FixedUserHandles[i].HandleStrokeColor

<SfDiagram Connectors="ConnectorCollection" />
@code
{
 public ConnectorCollection = new ObservableCollection<DiagramConnector>();
 protected override void OnInitialized()
 {
  DiagramConnector connector1 = new DiagramConnector()
  {
   SourcePoint=new ConnectorSourcePoint(){X = 100, Y = 100},
   TargetPoint = new ConnectorTargetPoint(){X=200, Y=200},
   FixedUserHandles=new ObservableCollection<DiagramConnectorFixedUserHandle>()
   {
    new DiagramConnectorFixedUserHandle()
    {
     PathData = "M60.3,18H27.5c-3,0-5.5,2.4-5.5,5.5v38.2h5.5V23.5h32.7V18z M68.5,28.9h-30c-3,0-5.5,2.4-5.5,5.5v38.2c0,3,2.4,5.5,5.5,5.5h30c3,0,5.5-2.4,5.5-5.5V34.4C73.9,31.4,71.5,28.9,68.5,28.9z M68.5,72.5h-30V34.4h30V72.5z", HandleStrokeColor = "red"
    }
   }
  };
  ConnectorCollection.Add(connector1);
 }
} 		Property: Connectors[i].FixedUserHandles[i].Stroke

<SfDiagramComponent Connectors="ConnectorCollection" />
@code
{
 public DiagramObjectCollection<Connector> ConnectorCollection = new DiagramObjectCollection<Connector>();
 protected override void OnInitialized()
 {
  Connector connector1 = new Connector()
  {
   SourcePoint = new DiagramPoint() {X=100, Y=100},
   TargetPoint = new DiagramPoint(){X=200,Y=200}
   FixedUserHandles = new DiagramObjectCollection<ConnectorFixedUserHandle>()
   {
    new ConnectorFixedUserHandle()
    {
     PathData = "M60.3,18H27.5c-3,0-5.5,2.4-5.5,5.5v38.2h5.5V23.5h32.7V18z M68.5,28.9h-30c-3,0-5.5,2.4-5.5,5.5v38.2c0,3,2.4,5.5,5.5,5.5h30c3,0,5.5-2.4,5.5-5.5V34.4C73.9,31.4,71.5,28.9,68.5,28.9z M68.5,72.5h-30V34.4h30V72.5z", Stroke= "red"
    }
   }
  };
  ConnectorCollection.Add(connector1);
 }
}
Sets a HandleStrokeWidth property Property: Connectors[i].FixedUserHandles[i].HandleStrokeWidth

<SfDiagram Connectors="ConnectorCollection" />
@code
{
 public ConnectorCollection = new ObservableCollection<DiagramConnector>();
 protected override void OnInitialized()
 {
  DiagramConnector connector1 = new DiagramConnector()
  {
   SourcePoint=new ConnectorSourcePoint(){X = 100, Y = 100},
   TargetPoint = new ConnectorTargetPoint(){X=200, Y=200},
   FixedUserHandles=new ObservableCollection<DiagramConnectorFixedUserHandle>()
   {
    new DiagramConnectorFixedUserHandle()
    {
     PathData = "M60.3,18H27.5c-3,0-5.5,2.4-5.5,5.5v38.2h5.5V23.5h32.7V18z M68.5,28.9h-30c-3,0-5.5,2.4-5.5,5.5v38.2c0,3,2.4,5.5,5.5,5.5h30c3,0,5.5-2.4,5.5-5.5V34.4C73.9,31.4,71.5,28.9,68.5,28.9z M68.5,72.5h-30V34.4h30V72.5z", HandleStrokeWidth = 5
    }
   }
  };
  ConnectorCollection.Add(connector1);
 }
} 		Property: Connectors[i].FixedUserHandles[i].StrokeThickness

<SfDiagramComponent Connectors="ConnectorCollection" />
@code
{
 public DiagramObjectCollection<Connector> ConnectorCollection = new DiagramObjectCollection<Connector>();
 protected override void OnInitialized()
 {
  Connector connector1 = new Connector()
  {
   SourcePoint = new DiagramPoint() {X=100, Y=100},
   TargetPoint = new DiagramPoint(){X=200,Y=200}
   FixedUserHandles = new DiagramObjectCollection<ConnectorFixedUserHandle>()
   {
    new ConnectorFixedUserHandle()
    {
     PathData = "M60.3,18H27.5c-3,0-5.5,2.4-5.5,5.5v38.2h5.5V23.5h32.7V18z M68.5,28.9h-30c-3,0-5.5,2.4-5.5,5.5v38.2c0,3,2.4,5.5,5.5,5.5h30c3,0,5.5-2.4,5.5-5.5V34.4C73.9,31.4,71.5,28.9,68.5,28.9z M68.5,72.5h-30V34.4h30V72.5z", StrokeThickness= 5
    }
   }
  };
  ConnectorCollection.Add(connector1);
 }
}
Sets a Padding property Property: Connectors[i].FixedUserHandles[i].Padding

<SfDiagram Connectors="ConnectorCollection" />
@code
{
 public ConnectorCollection = new ObservableCollection<DiagramConnector>();
 protected override void OnInitialized()
 {
  DiagramConnector connector1 = new DiagramConnector()
  {
   SourcePoint=new ConnectorSourcePoint(){X = 100, Y = 100},
   TargetPoint = new ConnectorTargetPoint(){X=200, Y=200},
   FixedUserHandles=new ObservableCollection<DiagramConnectorFixedUserHandle>()
   {
    new DiagramConnectorFixedUserHandle()
    {
     PathData = "M60.3,18H27.5c-3,0-5.5,2.4-5.5,5.5v38.2h5.5V23.5h32.7V18z M68.5,28.9h-30c-3,0-5.5,2.4-5.5,5.5v38.2c0,3,2.4,5.5,5.5,5.5h30c3,0,5.5-2.4,5.5-5.5V34.4C73.9,31.4,71.5,28.9,68.5,28.9z M68.5,72.5h-30V34.4h30V72.5z", Padding = new IconPadding() { Bottom = 10 }
    }
   }
  };
  ConnectorCollection.Add(connector1);
 }
} 		Property: Connectors[i].FixedUserHandles[i].Padding

<SfDiagramComponent Connectors="ConnectorCollection" />
@code
{
 public DiagramObjectCollection<Connector> ConnectorCollection = new DiagramObjectCollection<Connector>();
 protected override void OnInitialized()
 {
  Connector connector1 = new Connector()
  {
   SourcePoint = new DiagramPoint() {X=100, Y=100},
   TargetPoint = new DiagramPoint(){X=200,Y=200}
   FixedUserHandles = new DiagramObjectCollection<ConnectorFixedUserHandle>()
   {
    new ConnectorFixedUserHandle()
    {
     PathData = "M60.3,18H27.5c-3,0-5.5,2.4-5.5,5.5v38.2h5.5V23.5h32.7V18z M68.5,28.9h-30c-3,0-5.5,2.4-5.5,5.5v38.2c0,3,2.4,5.5,5.5,5.5h30c3,0,5.5-2.4,5.5-5.5V34.4C73.9,31.4,71.5,28.9,68.5,28.9z M68.5,72.5h-30V34.4h30V72.5z", Padding = new DiagramThickness(){ Bottom =10}
    }
   }
  };
  ConnectorCollection.Add(connector1);
 }
}
Sets a Displacement property Property: Connectors[i].FixedUserHandles[i].Displacement

<SfDiagram Connectors="ConnectorCollection" />
@code
{
 public ConnectorCollection = new ObservableCollection<DiagramConnector>();
 protected override void OnInitialized()
 {
  DiagramConnector connector1 = new DiagramConnector()
  {
   SourcePoint=new ConnectorSourcePoint(){X = 100, Y = 100},
   TargetPoint = new ConnectorTargetPoint(){X=200, Y=200},
   FixedUserHandles=new ObservableCollection<DiagramConnectorFixedUserHandle>()
   {
    new DiagramConnectorFixedUserHandle()
    {
     PathData = "M60.3,18H27.5c-3,0-5.5,2.4-5.5,5.5v38.2h5.5V23.5h32.7V18z M68.5,28.9h-30c-3,0-5.5,2.4-5.5,5.5v38.2c0,3,2.4,5.5,5.5,5.5h30c3,0,5.5-2.4,5.5-5.5V34.4C73.9,31.4,71.5,28.9,68.5,28.9z M68.5,72.5h-30V34.4h30V72.5z", Displacement = new ConnectorDisplacementPoint(){ X= 10, Y = 10 }
    }
   }
  };
  ConnectorCollection.Add(connector1);
 }
} 		Property: Connectors[i].FixedUserHandles[i].Displacement

<SfDiagramComponent Connectors="ConnectorCollection" />
@code
{
 public DiagramObjectCollection<Connector> ConnectorCollection = new DiagramObjectCollection<Connector>();
 protected override void OnInitialized()
 {
  Connector connector1 = new Connector()
  {
   SourcePoint = new DiagramPoint() {X=100, Y=100},
   TargetPoint = new DiagramPoint(){X=200,Y=200}
   FixedUserHandles = new DiagramObjectCollection<ConnectorFixedUserHandle>()
   {
    new ConnectorFixedUserHandle()
    {
     PathData = "M60.3,18H27.5c-3,0-5.5,2.4-5.5,5.5v38.2h5.5V23.5h32.7V18z M68.5,28.9h-30c-3,0-5.5,2.4-5.5,5.5v38.2c0,3,2.4,5.5,5.5,5.5h30c3,0,5.5-2.4,5.5-5.5V34.4C73.9,31.4,71.5,28.9,68.5,28.9z M68.5,72.5h-30V34.4h30V72.5z", Displacement = new DiagramPoint(){ X=10, Y =10}
    }
   }
  };
  ConnectorCollection.Add(connector1);
 }
}

Tooltip for Connector

Behavior API in SfDiagram API in SfDiagramComponent
Defines a tooltip to be render for the connector Property: Connectors[i].Tooltip

Sets a Tooltip property as ConnectorTooltip

<SfDiagram Connectors="ConnectorCollection" />
@code
{
 public ConnectorCollection = new ObservableCollection<DiagramConnector>();
 protected override void OnInitialized()
 {
  DiagramConnector connector1 = new DiagramConnector()
  {
   SourcePoint=new ConnectorSourcePoint(){X = 100, Y = 100},
   TargetPoint = new ConnectorTargetPoint(){X=200, Y=200},
   Tooltip = new ConnectorTooltip()
   {
    Content = "Connector's ToolTip"
   }
  };
  ConnectorCollection.Add(connector1);
 }
} 		Property: Connectors[i].Tooltip

Sets a Tooltip property as DiagramTooltip

<SfDiagramComponent Connectors="ConnectorCollection" />
@code
{
 public DiagramObjectCollection<Connector> ConnectorCollection = new DiagramObjectCollection<Connector>();
 protected override void OnInitialized()
 {
  Connector connector1 = new Connector()
  {
   SourcePoint = new DiagramPoint() {X=100, Y=100},
   TargetPoint = new DiagramPoint(){X=200,Y=200}
   Tooltip = new DiagramTooltip()
   {
    Content = "Connector ToolTip" }
  };
  ConnectorCollection.Add(connector1);
 }
}
Sets a Animation for the tooltip Property: Connectors[i].Tooltip

<SfDiagram Connectors="ConnectorCollection" />
@code
{
 public ConnectorCollection = new ObservableCollection<DiagramConnector>();
 protected override void OnInitialized()
 {
  DiagramConnector connector1 = new DiagramConnector()
  {
   SourcePoint=new ConnectorSourcePoint(){X = 100, Y = 100},
   TargetPoint = new ConnectorTargetPoint(){X=200, Y=200},
   Tooltip = new ConnectorTooltip()
   {
    Content = "Connector ToolTip", Animation = new DiagramTooltipAnimation() { OpenAnimationSettings = new DiagramTooltipAnimationSettings() { Delay = 10, Duration = 30, Effect=Effect.FadeOut }, CloseAnimationSettings = new DiagramTooltipAnimationSettings() { Delay = 10, Duration = 30, Effect=Effect.FadeOut } }, }
   }
  };
  ConnectorCollection.Add(connector1);
 }
} 		Property: Connectors[i].Tooltip

<SfDiagramComponent Connectors="ConnectorCollection" />
@code
{
 public DiagramObjectCollection<Connector> ConnectorCollection = new DiagramObjectCollection<Connector>();
 protected override void OnInitialized()
 {
  Connector connector1 = new Connector()
  {
   SourcePoint = new DiagramPoint() {X=100, Y=100},
   TargetPoint = new DiagramPoint(){X=200,Y=200}
   Tooltip = new DiagramTooltip()
   {
    Content = "Connector ToolTip", AnimationSettings = new Syncfusion.Blazor.Popups.AnimationModel() { Open = new Syncfusion.Blazor.Popups.TooltipAnimationSettings() { Delay = 10, Duration = 50, Effect = Syncfusion.Blazor.Popups.Effect.FadeIn }, Close = new Syncfusion.Blazor.Popups.TooltipAnimationSettings() { Delay = 10, Duration = 50, Effect = Syncfusion.Blazor.Popups.Effect.FadeOut } } }
  };
  ConnectorCollection.Add(connector1);
 }
}
Sets a OpenOn property for the tooltip Property: Connectors[i].Tooltip.OpenOn

<SfDiagram Connectors="ConnectorCollection" />
@code
{
 public ConnectorCollection = new ObservableCollection<DiagramConnector>();
 protected override void OnInitialized()
 {
  DiagramConnector connector1 = new DiagramConnector()
  {
   SourcePoint=new ConnectorSourcePoint(){X = 100, Y = 100},
   TargetPoint = new ConnectorTargetPoint(){X=200, Y=200},
   Tooltip = new ConnectorTooltip()
   {
    Content = "Connector ToolTip", OpenOn = TooltipMode.Auto }
   }
  };
  ConnectorCollection.Add(connector1);
 }
} 		Property: Connectors[i].Tooltip.OpensOn

<SfDiagramComponent Connectors="ConnectorCollection" />
@code
{
 public DiagramObjectCollection<Connector> ConnectorCollection = new DiagramObjectCollection<Connector>();
 protected override void OnInitialized()
 {
  Connector connector1 = new Connector()
  {
   SourcePoint = new DiagramPoint() {X=100, Y=100},
   TargetPoint = new DiagramPoint(){X=200,Y=200}
   Tooltip = new DiagramTooltip()
   {
    Content = "Connector ToolTip", OpensOn = "Auto" }
  };
  ConnectorCollection.Add(connector1);
 }
}
Sets a RelativeMode property for the tooltip Property: Connectors[i].Tooltip.RelativeMode

<SfDiagram Connectors="ConnectorCollection" />
@code
{
 public ConnectorCollection = new ObservableCollection<DiagramConnector>();
 protected override void OnInitialized()
 {
  DiagramConnector connector1 = new DiagramConnector()
  {
   SourcePoint=new ConnectorSourcePoint(){X = 100, Y = 100},
   TargetPoint = new ConnectorTargetPoint(){X=200, Y=200},
   Tooltip = new ConnectorTooltip()
   {
    Content = "Connector ToolTip", RelativeMode= TooltipRelativeMode.Object }
   }
  };
  ConnectorCollection.Add(connector1);
 }
} 		Not supported

Swimlane

Behavior API in SfDiagram API in SfDiagramComponent
Defines a collection of swimlanes to be render in the diagram Not supported Property: Swimlanes
<SfDiagramComponent Height="600px" Swimlanes="@SwimlaneCollections" />
@code
{
  DiagramObjectCollection<Swimlane> SwimlaneCollections = new DiagramObjectCollection<Swimlane>();
 protected override void OnInitialized()
 {
   Swimlane swimlane = new Swimlane(){ OffsetX = 400, OffsetY = 200, Height = 120, Width = 450 };
  SwimlaneCollections.Add(swimlane);
  }
}

Layout

Behavior API in SfDiagram API in SfDiagramComponent
Defines the type of the layout Property: Layout

<SfDiagram Height="499px" Layout="@LayoutValue">
 <DiagramDataSource Id="Name" ParentId="Category" DataSource="@DataSource">
 </DiagramDataSource>
</SfDiagram>
@code
{
 DiagramLayout LayoutValue = new DiagramLayout() { };
 public class HierarchicalDetails
 {
  public string Name { get; set; }
  public string FillColor { get; set; }
  public string Category { get; set; }

 }
 public List<object> DataSource = new List<object>()
 {
  new HierarchicalDetails(){ Name ="Diagram", Category="",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Layout", Category="Diagram",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Tree layout", Category="Layout",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Organizational chart", Category="Layout",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Hierarchical tree", Category="Tree layout",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Radial tree", Category="Tree layout",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Mind map", Category="Hierarchical tree",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Family tree", Category="Hierarchical tree",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Management", Category="Organizational chart",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Human resources", Category="Management",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="University", Category="Management",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Business", Category="#Management",FillColor="#659be5"}
 };
 protected override void OnInitialized()
 {
  LayoutValue = new DiagramLayout()
  {
   Type = LayoutType.HierarchicalTree, VerticalSpacing = 30, HorizontalSpacing = 30
  };
 }
} 		Property: Layout

<SfDiagramComponent Width="100%" Height="810px">
 <DataSourceSettings ID="Name" ParentID="Category" DataSource="DataSource"></DataSourceSettings>
 <Layout Type="LayoutType.HierarchicalTree" HorizontalSpacing="30" VerticalSpacing="30" />
</SfDiagramComponent>
@code
{
 public class HierarchicalDetails
 {
  public string Name { get; set; }
  public string FillColor { get; set; }
  public string Category { get; set; }

 }
 public List<object> DataSource = new List<object>()
 {
  new HierarchicalDetails(){ Name ="Diagram", Category="",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Layout", Category="Diagram",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Tree layout", Category="Layout",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Organizational chart", Category="Layout",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Hierarchical tree", Category="Tree layout",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Radial tree", Category="Tree layout",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Mind map", Category="Hierarchical tree",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Family tree", Category="Hierarchical tree",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Management", Category="Organizational chart",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Human resources", Category="Management",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="University", Category="Management",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Business", Category="#Management",FillColor="#659be5"}
 };
}
Sets the HorizontalSpacing for the layout Property: Layout.HorizontalSpacing

<SfDiagram Height="499px" Layout="@LayoutValue">
 <DiagramDataSource Id="Name" ParentId="Category" DataSource="@DataSource">
 </DiagramDataSource>
</SfDiagram>
@code
{
 DiagramLayout LayoutValue = new DiagramLayout() { };
 public class HierarchicalDetails
 {
  public string Name { get; set; }
  public string FillColor { get; set; }
  public string Category { get; set; }

 }
 public List<object> DataSource = new List<object>()
 {
  new HierarchicalDetails(){ Name ="Diagram", Category="",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Layout", Category="Diagram",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Tree layout", Category="Layout",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Organizational chart", Category="Layout",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Hierarchical tree", Category="Tree layout",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Radial tree", Category="Tree layout",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Mind map", Category="Hierarchical tree",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Family tree", Category="Hierarchical tree",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Management", Category="Organizational chart",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Human resources", Category="Management",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="University", Category="Management",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Business", Category="#Management",FillColor="#659be5"}
 };
 protected override void OnInitialized()
 {
  LayoutValue = new DiagramLayout()
  {
   Type = LayoutType.HierarchicalTree, VerticalSpacing = 30, HorizontalSpacing = 30
  };
 }
} 		Property: Layout.HorizontalSpacing

<SfDiagramComponent Width="100%" Height="810px">
 <DataSourceSettings ID="Name" ParentID="Category" DataSource="DataSource"></DataSourceSettings>
 <Layout Type="LayoutType.HierarchicalTree" HorizontalSpacing="30" VerticalSpacing="30" />
</SfDiagramComponent>
@code
{
 public class HierarchicalDetails
 {
  public string Name { get; set; }
  public string FillColor { get; set; }
  public string Category { get; set; }

 }
 public List<object> DataSource = new List<object>()
 {
  new HierarchicalDetails(){ Name ="Diagram", Category="",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Layout", Category="Diagram",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Tree layout", Category="Layout",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Organizational chart", Category="Layout",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Hierarchical tree", Category="Tree layout",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Radial tree", Category="Tree layout",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Mind map", Category="Hierarchical tree",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Family tree", Category="Hierarchical tree",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Management", Category="Organizational chart",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Human resources", Category="Management",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="University", Category="Management",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Business", Category="#Management",FillColor="#659be5"}
 };
}
Sets the VerticalSpacing for the layout Property: Layout.VerticalSpacing

<SfDiagram Height="499px" Layout="@LayoutValue">
 <DiagramDataSource Id="Name" ParentId="Category" DataSource="@DataSource">
 </DiagramDataSource>
</SfDiagram>
@code
{
 DiagramLayout LayoutValue = new DiagramLayout() { };
 public class HierarchicalDetails
 {
  public string Name { get; set; }
  public string FillColor { get; set; }
  public string Category { get; set; }

 }
 public List<object> DataSource = new List<object>()
 {
  new HierarchicalDetails(){ Name ="Diagram", Category="",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Layout", Category="Diagram",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Tree layout", Category="Layout",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Organizational chart", Category="Layout",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Hierarchical tree", Category="Tree layout",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Radial tree", Category="Tree layout",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Mind map", Category="Hierarchical tree",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Family tree", Category="Hierarchical tree",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Management", Category="Organizational chart",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Human resources", Category="Management",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="University", Category="Management",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Business", Category="#Management",FillColor="#659be5"}
 };
 protected override void OnInitialized()
 {
  LayoutValue = new DiagramLayout()
  {
   Type = LayoutType.HierarchicalTree, VerticalSpacing = 30, HorizontalSpacing = 30
  };
 }
} 		Property: Layout.VerticalSpacing

<SfDiagramComponent Width="100%" Height="810px">
 <DataSourceSettings ID="Name" ParentID="Category" DataSource="DataSource"></DataSourceSettings>
 <Layout Type="LayoutType.HierarchicalTree" HorizontalSpacing="30" VerticalSpacing="30" />
</SfDiagramComponent>
@code
{
 public class HierarchicalDetails
 {
  public string Name { get; set; }
  public string FillColor { get; set; }
  public string Category { get; set; }

 }
 public List<object> DataSource = new List<object>()
 {
  new HierarchicalDetails(){ Name ="Diagram", Category="",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Layout", Category="Diagram",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Tree layout", Category="Layout",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Organizational chart", Category="Layout",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Hierarchical tree", Category="Tree layout",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Radial tree", Category="Tree layout",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Mind map", Category="Hierarchical tree",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Family tree", Category="Hierarchical tree",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Management", Category="Organizational chart",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Human resources", Category="Management",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="University", Category="Management",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Business", Category="#Management",FillColor="#659be5"}
 };
}
Sets the HorizontalAlignment for the layout Property: Layout.HorizontalAlignment

<SfDiagram Height="499px" Layout="@LayoutValue">
 <DiagramDataSource Id="Name" ParentId="Category" DataSource="@DataSource">
 </DiagramDataSource>
</SfDiagram>
@code
{
 DiagramLayout LayoutValue = new DiagramLayout() { };
 public class HierarchicalDetails
 {
  public string Name { get; set; }
  public string FillColor { get; set; }
  public string Category { get; set; }

 }
 public List<object> DataSource = new List<object>()
 {
  new HierarchicalDetails(){ Name ="Diagram", Category="",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Layout", Category="Diagram",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Tree layout", Category="Layout",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Organizational chart", Category="Layout",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Hierarchical tree", Category="Tree layout",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Radial tree", Category="Tree layout",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Mind map", Category="Hierarchical tree",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Family tree", Category="Hierarchical tree",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Management", Category="Organizational chart",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Human resources", Category="Management",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="University", Category="Management",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Business", Category="#Management",FillColor="#659be5"}
 };
 protected override void OnInitialized()
 {
  LayoutValue = new DiagramLayout()
  {
   Type = LayoutType.HierarchicalTree, VerticalSpacing = 30, HorizontalSpacing = 30, HorizontalAlignment = HorizontalAlignment.Auto, VerticalAlignment = VerticalAlignment.Auto
  };
 }
} 		Property: Layout.HorizontalAlignment

<SfDiagramComponent Width="100%" Height="810px">
 <DataSourceSettings ID="Name" ParentID="Category" DataSource="DataSource"></DataSourceSettings>
 <Layout Type="LayoutType.HierarchicalTree" HorizontalSpacing="30" VerticalSpacing="30" HorizontalAlignment = HorizontalAlignment.Auto />
</SfDiagramComponent>
@code
{
 public class HierarchicalDetails
 {
  public string Name { get; set; }
  public string FillColor { get; set; }
  public string Category { get; set; }

 }
 public List<object> DataSource = new List<object>()
 {
  new HierarchicalDetails(){ Name ="Diagram", Category="",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Layout", Category="Diagram",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Tree layout", Category="Layout",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Organizational chart", Category="Layout",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Hierarchical tree", Category="Tree layout",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Radial tree", Category="Tree layout",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Mind map", Category="Hierarchical tree",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Family tree", Category="Hierarchical tree",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Management", Category="Organizational chart",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Human resources", Category="Management",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="University", Category="Management",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Business", Category="#Management",FillColor="#659be5"}
 };
}
Sets the VerticalAlignment for the layout Property: Layout.VerticalAlignment

<SfDiagram Height="499px" Layout="@LayoutValue">
 <DiagramDataSource Id="Name" ParentId="Category" DataSource="@DataSource">
 </DiagramDataSource>
</SfDiagram>
@code
{
 DiagramLayout LayoutValue = new DiagramLayout() { };
 public class HierarchicalDetails
 {
  public string Name { get; set; }
  public string FillColor { get; set; }
  public string Category { get; set; }

 }
 public List<object> DataSource = new List<object>()
 {
  new HierarchicalDetails(){ Name ="Diagram", Category="",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Layout", Category="Diagram",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Tree layout", Category="Layout",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Organizational chart", Category="Layout",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Hierarchical tree", Category="Tree layout",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Radial tree", Category="Tree layout",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Mind map", Category="Hierarchical tree",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Family tree", Category="Hierarchical tree",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Management", Category="Organizational chart",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Human resources", Category="Management",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="University", Category="Management",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Business", Category="#Management",FillColor="#659be5"}
 };
 protected override void OnInitialized()
 {
  LayoutValue = new DiagramLayout()
  {
   Type = LayoutType.HierarchicalTree, VerticalSpacing = 30, HorizontalSpacing = 30, HorizontalAlignment = HorizontalAlignment.Auto, VerticalAlignment = VerticalAlignment.Auto
  };
 }
} 		Property: Layout.VerticalAlignment

<SfDiagramComponent Width="100%" Height="810px">
 <DataSourceSettings ID="Name" ParentID="Category" DataSource="DataSource"></DataSourceSettings>
 <Layout Type="LayoutType.HierarchicalTree" HorizontalSpacing="30" VerticalSpacing="30" VerticalAlignment="VerticalAlignment.Auto" />
</SfDiagramComponent>
@code
{
 public class HierarchicalDetails
 {
  public string Name { get; set; }
  public string FillColor { get; set; }
  public string Category { get; set; }

 }
 public List<object> DataSource = new List<object>()
 {
  new HierarchicalDetails(){ Name ="Diagram", Category="",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Layout", Category="Diagram",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Tree layout", Category="Layout",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Organizational chart", Category="Layout",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Hierarchical tree", Category="Tree layout",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Radial tree", Category="Tree layout",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Mind map", Category="Hierarchical tree",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Family tree", Category="Hierarchical tree",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Management", Category="Organizational chart",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Human resources", Category="Management",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="University", Category="Management",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Business", Category="#Management",FillColor="#659be5"}
 };
}
Sets the Orientation for the layout Property: Layout.Orientation

<SfDiagram Height="499px" Layout="@LayoutValue">
 <DiagramDataSource Id="Name" ParentId="Category" DataSource="@DataSource">
 </DiagramDataSource>
</SfDiagram>
@code
{
 DiagramLayout LayoutValue = new DiagramLayout() { };
 public class HierarchicalDetails
 {
  public string Name { get; set; }
  public string FillColor { get; set; }
  public string Category { get; set; }

 }
 public List<object> DataSource = new List<object>()
 {
  new HierarchicalDetails(){ Name ="Diagram", Category="",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Layout", Category="Diagram",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Tree layout", Category="Layout",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Organizational chart", Category="Layout",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Hierarchical tree", Category="Tree layout",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Radial tree", Category="Tree layout",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Mind map", Category="Hierarchical tree",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Family tree", Category="Hierarchical tree",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Management", Category="Organizational chart",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Human resources", Category="Management",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="University", Category="Management",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Business", Category="#Management",FillColor="#659be5"}
 };
 protected override void OnInitialized()
 {
  LayoutValue = new DiagramLayout()
  {
   Type = LayoutType.HierarchicalTree, Orientation = LayoutOrientation.TopToBottom
  };
 }
} 		Property: Layout.Orientation

<SfDiagramComponent Width="100%" Height="810px">
 <DataSourceSettings ID="Name" ParentID="Category" DataSource="DataSource"></DataSourceSettings>
 <Layout Type="LayoutType.HierarchicalTree" Orientation="LayoutOrientation.TopToBottom" />
</SfDiagramComponent>
@code
{
 public class HierarchicalDetails
 {
  public string Name { get; set; }
  public string FillColor { get; set; }
  public string Category { get; set; }

 }
 public List<object> DataSource = new List<object>()
 {
  new HierarchicalDetails(){ Name ="Diagram", Category="",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Layout", Category="Diagram",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Tree layout", Category="Layout",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Organizational chart", Category="Layout",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Hierarchical tree", Category="Tree layout",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Radial tree", Category="Tree layout",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Mind map", Category="Hierarchical tree",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Family tree", Category="Hierarchical tree",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Management", Category="Organizational chart",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Human resources", Category="Management",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="University", Category="Management",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Business", Category="#Management",FillColor="#659be5"}
 };
}
Align the layout within the bounds Property: Layout.Bounds

<SfDiagram Height="499px" Layout="@LayoutValue">
 <DiagramDataSource Id="Name" ParentId="Category" DataSource="@DataSource">
 </DiagramDataSource>
</SfDiagram>
@code
{
 DiagramLayout LayoutValue = new DiagramLayout() { };
 public class HierarchicalDetails
 {
  public string Name { get; set; }
  public string FillColor { get; set; }
  public string Category { get; set; }

 }
 public List<object> DataSource = new List<object>()
 {
  new HierarchicalDetails(){ Name ="Diagram", Category="",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Layout", Category="Diagram",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Tree layout", Category="Layout",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Organizational chart", Category="Layout",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Hierarchical tree", Category="Tree layout",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Radial tree", Category="Tree layout",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Mind map", Category="Hierarchical tree",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Family tree", Category="Hierarchical tree",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Management", Category="Organizational chart",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Human resources", Category="Management",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="University", Category="Management",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Business", Category="#Management",FillColor="#659be5"}
 };
 public class RectBounds
 {
  public double X { get; set; }
  public double Y { get; set; }
  public double Width { get; set; }
  public double Height { get; set; }
 }
 protected override void OnInitialized()
 {
  LayoutValue = new DiagramLayout()
  {
   Type = LayoutType.HierarchicalTree,
   Bounds = new RectBounds() { X = 0, Y = 0, Width = 1000, Height = 1000 }
  };
 }
} 		Property: Layout.Bounds

<SfDiagramComponent Width="100%" Height="810px">
 <DataSourceSettings ID="Name" ParentID="Category" DataSource="DataSource"></DataSourceSettings>
 <Layout Type="LayoutType.HierarchicalTree" Orientation="LayoutOrientation.TopToBottom" Bounds="LayoutBounds" />
</SfDiagramComponent>
@code
{
 DiagramRect LayoutBounds = new DiagramRect() { X = 0, Y = 0, Width = 1000, Height = 1000 };
 public class HierarchicalDetails
 {
  public string Name { get; set; }
  public string FillColor { get; set; }
  public string Category { get; set; }

 }
 public List<object> DataSource = new List<object>()
 {
  new HierarchicalDetails(){ Name ="Diagram", Category="",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Layout", Category="Diagram",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Tree layout", Category="Layout",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Organizational chart", Category="Layout",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Hierarchical tree", Category="Tree layout",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Radial tree", Category="Tree layout",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Mind map", Category="Hierarchical tree",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Family tree", Category="Hierarchical tree",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Management", Category="Organizational chart",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Human resources", Category="Management",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="University", Category="Management",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Business", Category="#Management",FillColor="#659be5"}
 };
}
Set the fixed node in the layout Property: Layout.FixedNode

<SfDiagram Height="499px" Layout="@LayoutValue">
 <DiagramDataSource Id="Name" ParentId="Category" DataSource="@DataSource">
 </DiagramDataSource>
</SfDiagram>
@code
{
 DiagramLayout LayoutValue = new DiagramLayout() { };
 public class HierarchicalDetails
 {
  public string Name { get; set; }
  public string FillColor { get; set; }
  public string Category { get; set; }

 }
 public List<object> DataSource = new List<object>()
 {
  new HierarchicalDetails(){ Name ="Diagram", Category="",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Layout", Category="Diagram",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Tree layout", Category="Layout",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Organizational chart", Category="Layout",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Hierarchical tree", Category="Tree layout",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Radial tree", Category="Tree layout",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Mind map", Category="Hierarchical tree",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Family tree", Category="Hierarchical tree",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Management", Category="Organizational chart",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Human resources", Category="Management",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="University", Category="Management",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Business", Category="#Management",FillColor="#659be5"}
 };
 public class RectBounds
 {
  public double X { get; set; }
  public double Y { get; set; }
  public double Width { get; set; }
  public double Height { get; set; }
 }
 protected override void OnInitialized()
 {
  LayoutValue = new DiagramLayout()
  {
   Type = LayoutType.HierarchicalTree,
   FixedNode="Diagram"
  };
 }
} 		Property: Layout.FixedNode

<SfDiagramComponent Width="100%" Height="810px">
 <DataSourceSettings ID="Name" ParentID="Category" DataSource="DataSource"></DataSourceSettings>
 <Layout Type="LayoutType.HierarchicalTree" Orientation="LayoutOrientation.TopToBottom" FixedNode="Diagram" />
</SfDiagramComponent>
@code
{
 public class HierarchicalDetails
 {
  public string Name { get; set; }
  public string FillColor { get; set; }
  public string Category { get; set; }

 }
 public List<object> DataSource = new List<object>()
 {
  new HierarchicalDetails(){ Name ="Diagram", Category="",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Layout", Category="Diagram",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Tree layout", Category="Layout",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Organizational chart", Category="Layout",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Hierarchical tree", Category="Tree layout",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Radial tree", Category="Tree layout",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Mind map", Category="Hierarchical tree",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Family tree", Category="Hierarchical tree",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Management", Category="Organizational chart",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Human resources", Category="Management",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="University", Category="Management",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Business", Category="#Management",FillColor="#659be5"}
 };
}
Specifies the parent node of the layout Property: Layout.ParentId

<SfDiagram Height="499px" Layout="@LayoutValue">
 <DiagramDataSource Id="Name" ParentId="Category" DataSource="@DataSource">
 </DiagramDataSource>
</SfDiagram>
@code
{
 DiagramLayout LayoutValue = new DiagramLayout() { };
 public class HierarchicalDetails
 {
  public string Name { get; set; }
  public string FillColor { get; set; }
  public string Category { get; set; }

 }
 public List<object> DataSource = new List<object>()
 {
  new HierarchicalDetails(){ Name ="Diagram", Category="",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Layout", Category="Diagram",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Tree layout", Category="Layout",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Organizational chart", Category="Layout",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Hierarchical tree", Category="Tree layout",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Radial tree", Category="Tree layout",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Mind map", Category="Hierarchical tree",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Family tree", Category="Hierarchical tree",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Management", Category="Organizational chart",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Human resources", Category="Management",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="University", Category="Management",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Business", Category="#Management",FillColor="#659be5"}
 };
 public class RectBounds
 {
  public double X { get; set; }
  public double Y { get; set; }
  public double Width { get; set; }
  public double Height { get; set; }
 }
 protected override void OnInitialized()
 {
  LayoutValue = new DiagramLayout()
  {
   Type = LayoutType.HierarchicalTree,
   Root="Diagram"
  };
 }
} 		Property: Layout.ParentID

<SfDiagramComponent Width="100%" Height="810px">
 <DataSourceSettings ID="Name" ParentID="Category" DataSource="DataSource"></DataSourceSettings>
 <Layout Type="LayoutType.HierarchicalTree" Orientation="LayoutOrientation.TopToBottom" Root="Diagram" />
</SfDiagramComponent>
@code
{
 public class HierarchicalDetails
 {
  public string Name { get; set; }
  public string FillColor { get; set; }
  public string Category { get; set; }

 }
 public List<object> DataSource = new List<object>()
 {
  new HierarchicalDetails(){ Name ="Diagram", Category="",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Layout", Category="Diagram",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Tree layout", Category="Layout",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Organizational chart", Category="Layout",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Hierarchical tree", Category="Tree layout",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Radial tree", Category="Tree layout",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Mind map", Category="Hierarchical tree",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Family tree", Category="Hierarchical tree",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Management", Category="Organizational chart",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Human resources", Category="Management",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="University", Category="Management",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Business", Category="#Management",FillColor="#659be5"}
 };
}
Specifies the margin for the layout Property: Layout.Margin

<SfDiagram Height="499px" Layout="@LayoutValue">
 <DiagramDataSource Id="Name" ParentId="Category" DataSource="@DataSource">
 </DiagramDataSource>
</SfDiagram>
@code
{
 DiagramLayout LayoutValue = new DiagramLayout() { };
 public class HierarchicalDetails
 {
  public string Name { get; set; }
  public string FillColor { get; set; }
  public string Category { get; set; }

 }
 public List<object> DataSource = new List<object>()
 {
  new HierarchicalDetails(){ Name ="Diagram", Category="",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Layout", Category="Diagram",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Tree layout", Category="Layout",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Organizational chart", Category="Layout",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Hierarchical tree", Category="Tree layout",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Radial tree", Category="Tree layout",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Mind map", Category="Hierarchical tree",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Family tree", Category="Hierarchical tree",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Management", Category="Organizational chart",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Human resources", Category="Management",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="University", Category="Management",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Business", Category="#Management",FillColor="#659be5"}
 };
 public class RectBounds
 {
  public double X { get; set; }
  public double Y { get; set; }
  public double Width { get; set; }
  public double Height { get; set; }
 }
 protected override void OnInitialized()
 {
  LayoutValue = new DiagramLayout()
  {
   Type = LayoutType.HierarchicalTree,
   Root="Diagram"
   Margin = new LayoutMargin(){Left = 30, Bottom = 30, Right = 30, Top=30}
  };
 }
} 		Property: Layout.Margin

<SfDiagramComponent Width="100%" Height="810px">
 <DataSourceSettings ID="Name" ParentID="Category" DataSource="DataSource"></DataSourceSettings>
 <Layout Type="LayoutType.HierarchicalTree" Orientation="LayoutOrientation.TopToBottom" Root="Diagram">
  <LayoutMargin Left="30" Right="30" Top="30" Bottom="30"></LayoutMargin>
 </Layout>
</SfDiagramComponent>
@code
{
 public class HierarchicalDetails
 {
  public string Name { get; set; }
  public string FillColor { get; set; }
  public string Category { get; set; }

 }
 public List<object> DataSource = new List<object>()
 {
  new HierarchicalDetails(){ Name ="Diagram", Category="",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Layout", Category="Diagram",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Tree layout", Category="Layout",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Organizational chart", Category="Layout",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Hierarchical tree", Category="Tree layout",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Radial tree", Category="Tree layout",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Mind map", Category="Hierarchical tree",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Family tree", Category="Hierarchical tree",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Management", Category="Organizational chart",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Human resources", Category="Management",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="University", Category="Management",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Business", Category="#Management",FillColor="#659be5"}
 };
}
Specifies the arrangement for child node of the complex hierarchical layout Property: Layout.Arrangement

<SfDiagram Height="499px" Layout="@LayoutValue">
 <DiagramDataSource Id="Name" ParentId="Category" DataSource="@DataSource">
 </DiagramDataSource>
</SfDiagram>
@code
{
 DiagramLayout LayoutValue = new DiagramLayout() { };
 public class HierarchicalDetails
 {
  public string Name { get; set; }
  public string FillColor { get; set; }
  public string Category { get; set; }

 }
 public List<object> DataSource = new List<object>()
 {
  new HierarchicalDetails(){ Name ="Diagram", Category="",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Layout", Category="Diagram",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Tree layout", Category="Layout",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Organizational chart", Category="Layout",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Hierarchical tree", Category="Tree layout",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Radial tree", Category="Tree layout",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Mind map", Category="Hierarchical tree",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Family tree", Category="Hierarchical tree",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Management", Category="Organizational chart",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Human resources", Category="Management",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="University", Category="Management",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Business", Category="#Management",FillColor="#659be5"}
 };
 public class RectBounds
 {
  public double X { get; set; }
  public double Y { get; set; }
  public double Width { get; set; }
  public double Height { get; set; }
 }
 protected override void OnInitialized()
 {
  LayoutValue = new DiagramLayout()
  {
   Type = LayoutType.HierarchicalTree,
   Arrangement = ChildArrangement.Linear
   Margin = new LayoutMargin(){Left = 30, Bottom = 30, Right = 30, Top=30}
  };
 }
} 		Property: Layout.LinearArrangement

<SfDiagramComponent Width="100%" Height="810px">
 <DataSourceSettings ID="Name" ParentID="Category" DataSource="DataSource"></DataSourceSettings>
 <Layout Type="LayoutType.HierarchicalTree" Orientation="LayoutOrientation.TopToBottom" LinearArrangement=true>
  <LayoutMargin Left="30" Right="30" Top="30" Bottom="30"></LayoutMargin>
 </Layout>
</SfDiagramComponent>
@code
{
 public class HierarchicalDetails
 {
  public string Name { get; set; }
  public string FillColor { get; set; }
  public string Category { get; set; }

 }
 public List<object> DataSource = new List<object>()
 {
  new HierarchicalDetails(){ Name ="Diagram", Category="",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Layout", Category="Diagram",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Tree layout", Category="Layout",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Organizational chart", Category="Layout",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Hierarchical tree", Category="Tree layout",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Radial tree", Category="Tree layout",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Mind map", Category="Hierarchical tree",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Family tree", Category="Hierarchical tree",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Management", Category="Organizational chart",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Human resources", Category="Management",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="University", Category="Management",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Business", Category="#Management",FillColor="#659be5"}
 };
}
Specifies the connector are arrange in with or without overlapping in the complex hierarchical layout Property: Layout.ConnectionPointOrigin

<SfDiagram Height="499px" Layout="@LayoutValue">
 <DiagramDataSource Id="Name" ParentId="Category" DataSource="@DataSource">
 </DiagramDataSource>
</SfDiagram>
@code
{
 DiagramLayout LayoutValue = new DiagramLayout() { };
 public class HierarchicalDetails
 {
  public string Name { get; set; }
  public string FillColor { get; set; }
  public string Category { get; set; }

 }
 public List<object> DataSource = new List<object>()
 {
  new HierarchicalDetails(){ Name ="Diagram", Category="",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Layout", Category="Diagram",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Tree layout", Category="Layout",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Organizational chart", Category="Layout",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Hierarchical tree", Category="Tree layout",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Radial tree", Category="Tree layout",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Mind map", Category="Hierarchical tree",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Family tree", Category="Hierarchical tree",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Management", Category="Organizational chart",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Human resources", Category="Management",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="University", Category="Management",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Business", Category="#Management",FillColor="#659be5"}
 };
 public class RectBounds
 {
  public double X { get; set; }
  public double Y { get; set; }
  public double Width { get; set; }
  public double Height { get; set; }
 }
 protected override void OnInitialized()
 {
  LayoutValue = new DiagramLayout()
  {
   Type = LayoutType.HierarchicalTree,
   ConnectionPointOrigin = ConnectionPointOrigin.DifferentPoint,
   Margin = new LayoutMargin(){Left = 30, Bottom = 30, Right = 30, Top=30}
  };
 }
} 		Property: Layout.SamePoint

<SfDiagramComponent Width="100%" Height="810px">
 <DataSourceSettings ID="Name" ParentID="Category" DataSource="DataSource"></DataSourceSettings>
 <Layout Type="LayoutType.HierarchicalTree" Orientation="LayoutOrientation.TopToBottom" SamePoint="false">
  <LayoutMargin Left="30" Right="30" Top="30" Bottom="30"></LayoutMargin>
 </Layout>
</SfDiagramComponent>
@code
{
 public class HierarchicalDetails
 {
  public string Name { get; set; }
  public string FillColor { get; set; }
  public string Category { get; set; }

 }
 public List<object> DataSource = new List<object>()
 {
  new HierarchicalDetails(){ Name ="Diagram", Category="",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Layout", Category="Diagram",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Tree layout", Category="Layout",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Organizational chart", Category="Layout",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Hierarchical tree", Category="Tree layout",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Radial tree", Category="Tree layout",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Mind map", Category="Hierarchical tree",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Family tree", Category="Hierarchical tree",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Management", Category="Organizational chart",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Human resources", Category="Management",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="University", Category="Management",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Business", Category="#Management",FillColor="#659be5"}
 };
}
Specifies the whether the connector’s segments must be customized based on the layout or not Property: Layout.ConnectorSegments

<SfDiagram Height="499px" Layout="@LayoutValue">
 <DiagramDataSource Id="Name" ParentId="Category" DataSource="@DataSource">
 </DiagramDataSource>
</SfDiagram>
@code
{
 DiagramLayout LayoutValue = new DiagramLayout() { };
 public class HierarchicalDetails
 {
  public string Name { get; set; }
  public string FillColor { get; set; }
  public string Category { get; set; }

 }
 public List<object> DataSource = new List<object>()
 {
  new HierarchicalDetails(){ Name ="Diagram", Category="",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Layout", Category="Diagram",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Tree layout", Category="Layout",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Organizational chart", Category="Layout",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Hierarchical tree", Category="Tree layout",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Radial tree", Category="Tree layout",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Mind map", Category="Hierarchical tree",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Family tree", Category="Hierarchical tree",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Management", Category="Organizational chart",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Human resources", Category="Management",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="University", Category="Management",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Business", Category="#Management",FillColor="#659be5"}
 };
 public class RectBounds
 {
  public double X { get; set; }
  public double Y { get; set; }
  public double Width { get; set; }
  public double Height { get; set; }
 }
 protected override void OnInitialized()
 {
  LayoutValue = new DiagramLayout()
  {
   Type = LayoutType.HierarchicalTree,
   ConnectorSegments = ConnectorSegments.Layout,
   Margin = new LayoutMargin(){Left = 30, Bottom = 30, Right = 30, Top=30}
  };
 }
} 		Defines the connector segments based on the layout by using ConnectorCreating method
Specifies the animation option when a node is expanded and collapse Property: Layout.EnableAnimation

<SfDiagram Height="499px" Layout="@LayoutValue">
 <DiagramDataSource Id="Name" ParentId="Category" DataSource="@DataSource">
 </DiagramDataSource>
</SfDiagram>
@code
{
 DiagramLayout LayoutValue = new DiagramLayout() { };
 public class HierarchicalDetails
 {
  public string Name { get; set; }
  public string FillColor { get; set; }
  public string Category { get; set; }

 }
 public List<object> DataSource = new List<object>()
 {
  new HierarchicalDetails(){ Name ="Diagram", Category="",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Layout", Category="Diagram",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Tree layout", Category="Layout",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Organizational chart", Category="Layout",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Hierarchical tree", Category="Tree layout",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Radial tree", Category="Tree layout",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Mind map", Category="Hierarchical tree",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Family tree", Category="Hierarchical tree",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Management", Category="Organizational chart",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Human resources", Category="Management",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="University", Category="Management",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Business", Category="#Management",FillColor="#659be5"}
 };
 protected override void OnInitialized()
 {
  LayoutValue = new DiagramLayout()
  {
   Type = LayoutType.HierarchicalTree,
    EnableAnimation = true
  };
 }
} 		Not supported
Specifies the maximum number of iteration of the layout Property: Layout.MaxIteration

<SfDiagram Height="499px" Layout="@LayoutValue">
 <DiagramDataSource Id="Name" ParentId="Category" DataSource="@DataSource">
 </DiagramDataSource>
</SfDiagram>
@code
{
 DiagramLayout LayoutValue = new DiagramLayout() { };
 public class HierarchicalDetails
 {
  public string Name { get; set; }
  public string FillColor { get; set; }
  public string Category { get; set; }

 }
 public List<object> DataSource = new List<object>()
 {
  new HierarchicalDetails(){ Name ="Diagram", Category="",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Layout", Category="Diagram",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Tree layout", Category="Layout",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Organizational chart", Category="Layout",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Hierarchical tree", Category="Tree layout",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Radial tree", Category="Tree layout",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Mind map", Category="Hierarchical tree",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Family tree", Category="Hierarchical tree",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Management", Category="Organizational chart",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Human resources", Category="Management",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="University", Category="Management",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Business", Category="#Management",FillColor="#659be5"}
 };
 protected override void OnInitialized()
 {
  LayoutValue = new DiagramLayout()
  {
   Type = LayoutType.HierarchicalTree,
    MaxIteration = 30
  };
 }
} 		Not supported
Specifies the edge attraction and vertex repulsion forces Property: Layout.SpringFactor

<SfDiagram Height="499px" Layout="@LayoutValue">
 <DiagramDataSource Id="Name" ParentId="Category" DataSource="@DataSource">
 </DiagramDataSource>
</SfDiagram>
@code
{
 DiagramLayout LayoutValue = new DiagramLayout() { };
 public class HierarchicalDetails
 {
  public string Name { get; set; }
  public string FillColor { get; set; }
  public string Category { get; set; }

 }
 public List<object> DataSource = new List<object>()
 {
  new HierarchicalDetails(){ Name ="Diagram", Category="",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Layout", Category="Diagram",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Tree layout", Category="Layout",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Organizational chart", Category="Layout",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Hierarchical tree", Category="Tree layout",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Radial tree", Category="Tree layout",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Mind map", Category="Hierarchical tree",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Family tree", Category="Hierarchical tree",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Management", Category="Organizational chart",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Human resources", Category="Management",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="University", Category="Management",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Business", Category="#Management",FillColor="#659be5"}
 };
 protected override void OnInitialized()
 {
  LayoutValue = new DiagramLayout()
  {
   Type = LayoutType.HierarchicalTree,
    SpringFactor = 10
  };
 }
} 		Not supported
Specifies the edge length of the layout Property: Layout.SpringLength

<SfDiagram Height="499px" Layout="@LayoutValue">
 <DiagramDataSource Id="Name" ParentId="Category" DataSource="@DataSource">
 </DiagramDataSource>
</SfDiagram>
@code
{
 DiagramLayout LayoutValue = new DiagramLayout() { };
 public class HierarchicalDetails
 {
  public string Name { get; set; }
  public string FillColor { get; set; }
  public string Category { get; set; }

 }
 public List<object> DataSource = new List<object>()
 {
  new HierarchicalDetails(){ Name ="Diagram", Category="",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Layout", Category="Diagram",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Tree layout", Category="Layout",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Organizational chart", Category="Layout",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Hierarchical tree", Category="Tree layout",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Radial tree", Category="Tree layout",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Mind map", Category="Hierarchical tree",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Family tree", Category="Hierarchical tree",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Management", Category="Organizational chart",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Human resources", Category="Management",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="University", Category="Management",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Business", Category="#Management",FillColor="#659be5"}
 };
 protected override void OnInitialized()
 {
  LayoutValue = new DiagramLayout()
  {
   Type = LayoutType.HierarchicalTree,
   SpringLength = 10
  };
 }
} 		Not supported

Data Source

Behavior API in SfDiagram API in SfDiagramComponent
Defines the data source of the diagram for the layout Property: DiagramDataSource

<SfDiagram Height="499px" Layout="@LayoutValue">
 <DiagramDataSource Id="Name" ParentId="Category" DataSource="@DataSource">
 </DiagramDataSource>
</SfDiagram>
@code
{
 DiagramLayout LayoutValue = new DiagramLayout() { };
 public class HierarchicalDetails
 {
  public string Name { get; set; }
  public string FillColor { get; set; }
  public string Category { get; set; }

 }
 public List<object> DataSource = new List<object>()
 {
  new HierarchicalDetails(){ Name ="Diagram", Category="",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Layout", Category="Diagram",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Tree layout", Category="Layout",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Organizational chart", Category="Layout",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Hierarchical tree", Category="Tree layout",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Radial tree", Category="Tree layout",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Mind map", Category="Hierarchical tree",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Family tree", Category="Hierarchical tree",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Management", Category="Organizational chart",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Human resources", Category="Management",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="University", Category="Management",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Business", Category="#Management",FillColor="#659be5"}
 };
 protected override void OnInitialized()
 {
  LayoutValue = new DiagramLayout()
  {
   Type = LayoutType.HierarchicalTree, VerticalSpacing = 30, HorizontalSpacing = 30
  };
 }
} 		Property: DataSourceSettings

<SfDiagramComponent Width="100%" Height="810px">
 <DataSourceSettings ID="Name" ParentID="Category" DataSource="DataSource"></DataSourceSettings>
 <Layout Type="LayoutType.HierarchicalTree" HorizontalSpacing="30" VerticalSpacing="30" />
</SfDiagramComponent>
@code
{
 public class HierarchicalDetails
 {
  public string Name { get; set; }
  public string FillColor { get; set; }
  public string Category { get; set; }

 }
 public List<object> DataSource = new List<object>()
 {
  new HierarchicalDetails(){ Name ="Diagram", Category="",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Layout", Category="Diagram",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Tree layout", Category="Layout",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Organizational chart", Category="Layout",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Hierarchical tree", Category="Tree layout",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Radial tree", Category="Tree layout",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Mind map", Category="Hierarchical tree",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Family tree", Category="Hierarchical tree",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Management", Category="Organizational chart",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Human resources", Category="Management",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="University", Category="Management",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Business", Category="#Management",FillColor="#659be5"}
 };
}
Specifies the unique id for the data source Property: DiagramDataSource.Id

<SfDiagram Height="499px" Layout="@LayoutValue">
 <DiagramDataSource Id="Name" ParentId="Category" DataSource="@DataSource">
 </DiagramDataSource>
</SfDiagram>
@code
{
 DiagramLayout LayoutValue = new DiagramLayout() { };
 public class HierarchicalDetails
 {
  public string Name { get; set; }
  public string FillColor { get; set; }
  public string Category { get; set; }

 }
 public List<object> DataSource = new List<object>()
 {
  new HierarchicalDetails(){ Name ="Diagram", Category="",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Layout", Category="Diagram",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Tree layout", Category="Layout",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Organizational chart", Category="Layout",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Hierarchical tree", Category="Tree layout",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Radial tree", Category="Tree layout",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Mind map", Category="Hierarchical tree",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Family tree", Category="Hierarchical tree",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Management", Category="Organizational chart",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Human resources", Category="Management",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="University", Category="Management",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Business", Category="#Management",FillColor="#659be5"}
 };
 protected override void OnInitialized()
 {
  LayoutValue = new DiagramLayout()
  {
   Type = LayoutType.HierarchicalTree, VerticalSpacing = 30, HorizontalSpacing = 30
  };
 }
} 		Property: DataSourceSettings.ID

<SfDiagramComponent Width="100%" Height="810px">
 <DataSourceSettings ID="Name" ParentID="Category" DataSource="DataSource"></DataSourceSettings>
 <Layout Type="LayoutType.HierarchicalTree" HorizontalSpacing="30" VerticalSpacing="30" />
</SfDiagramComponent>
@code
{
 public class HierarchicalDetails
 {
  public string Name { get; set; }
  public string FillColor { get; set; }
  public string Category { get; set; }

 }
 public List<object> DataSource = new List<object>()
 {
  new HierarchicalDetails(){ Name ="Diagram", Category="",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Layout", Category="Diagram",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Tree layout", Category="Layout",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Organizational chart", Category="Layout",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Hierarchical tree", Category="Tree layout",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Radial tree", Category="Tree layout",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Mind map", Category="Hierarchical tree",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Family tree", Category="Hierarchical tree",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Management", Category="Organizational chart",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Human resources", Category="Management",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="University", Category="Management",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Business", Category="#Management",FillColor="#659be5"}
 };
}
Specifies the property that will be used to find the parent and child relationship of the data source Property: DiagramDataSource.ParentId

<SfDiagram Height="499px" Layout="@LayoutValue">
 <DiagramDataSource Id="Name" ParentId="Category" DataSource="@DataSource">
 </DiagramDataSource>
</SfDiagram>
@code
{
 DiagramLayout LayoutValue = new DiagramLayout() { };
 public class HierarchicalDetails
 {
  public string Name { get; set; }
  public string FillColor { get; set; }
  public string Category { get; set; }

 }
 public List<object> DataSource = new List<object>()
 {
  new HierarchicalDetails(){ Name ="Diagram", Category="",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Layout", Category="Diagram",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Tree layout", Category="Layout",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Organizational chart", Category="Layout",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Hierarchical tree", Category="Tree layout",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Radial tree", Category="Tree layout",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Mind map", Category="Hierarchical tree",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Family tree", Category="Hierarchical tree",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Management", Category="Organizational chart",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Human resources", Category="Management",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="University", Category="Management",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Business", Category="#Management",FillColor="#659be5"}
 };
 protected override void OnInitialized()
 {
  LayoutValue = new DiagramLayout()
  {
   Type = LayoutType.HierarchicalTree, VerticalSpacing = 30, HorizontalSpacing = 30
  };
 }
} 		Property: DataSourceSettings.ParentID

<SfDiagramComponent Width="100%" Height="810px">
 <DataSourceSettings ID="Name" ParentID="Category" DataSource="DataSource"></DataSourceSettings>
 <Layout Type="LayoutType.HierarchicalTree" HorizontalSpacing="30" VerticalSpacing="30" />
</SfDiagramComponent>
@code
{
 public class HierarchicalDetails
 {
  public string Name { get; set; }
  public string FillColor { get; set; }
  public string Category { get; set; }

 }
 public List<object> DataSource = new List<object>()
 {
  new HierarchicalDetails(){ Name ="Diagram", Category="",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Layout", Category="Diagram",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Tree layout", Category="Layout",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Organizational chart", Category="Layout",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Hierarchical tree", Category="Tree layout",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Radial tree", Category="Tree layout",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Mind map", Category="Hierarchical tree",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Family tree", Category="Hierarchical tree",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Management", Category="Organizational chart",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Human resources", Category="Management",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="University", Category="Management",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Business", Category="#Management",FillColor="#659be5"}
 };
}
Specifies the primary node of the layout from the data source Property: DiagramDataSource.Root

<SfDiagram Height="499px" Layout="@LayoutValue">
 <DiagramDataSource Id="Name" ParentId="Category" DataSource="@DataSource" Root="Diagram">
 </DiagramDataSource>
</SfDiagram>
@code
{
 DiagramLayout LayoutValue = new DiagramLayout() { };
 public class HierarchicalDetails
 {
  public string Name { get; set; }
  public string FillColor { get; set; }
  public string Category { get; set; }

 }
 public List<object> DataSource = new List<object>()
 {
  new HierarchicalDetails(){ Name ="Diagram", Category="",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Layout", Category="Diagram",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Tree layout", Category="Layout",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Organizational chart", Category="Layout",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Hierarchical tree", Category="Tree layout",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Radial tree", Category="Tree layout",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Mind map", Category="Hierarchical tree",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Family tree", Category="Hierarchical tree",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Management", Category="Organizational chart",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Human resources", Category="Management",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="University", Category="Management",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Business", Category="#Management",FillColor="#659be5"}
 };
 protected override void OnInitialized()
 {
  LayoutValue = new DiagramLayout()
  {
   Type = LayoutType.HierarchicalTree, VerticalSpacing = 30, HorizontalSpacing = 30
  };
 }
} 		Property: DataSourceSettings.Root

<SfDiagramComponent Width="100%" Height="810px">
 <DataSourceSettings ID="Name" ParentID="Category" DataSource="DataSource" Root="Diagram"></DataSourceSettings>
 <Layout Type="LayoutType.HierarchicalTree" HorizontalSpacing="30" VerticalSpacing="30" />
</SfDiagramComponent>
@code
{
 public class HierarchicalDetails
 {
  public string Name { get; set; }
  public string FillColor { get; set; }
  public string Category { get; set; }

 }
 public List<object> DataSource = new List<object>()
 {
  new HierarchicalDetails(){ Name ="Diagram", Category="",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Layout", Category="Diagram",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Tree layout", Category="Layout",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Organizational chart", Category="Layout",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Hierarchical tree", Category="Tree layout",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Radial tree", Category="Tree layout",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Mind map", Category="Hierarchical tree",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Family tree", Category="Hierarchical tree",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Management", Category="Organizational chart",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Human resources", Category="Management",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="University", Category="Management",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Business", Category="#Management",FillColor="#659be5"}
 };
}

Diagram Data Map Settings

Behavior API in SfDiagram API in SfDiagramComponent
Specifies to mapping the collection of local data from data source fields Property: DiagramDataSource.DiagramDataMapSettings

<SfDiagram Height="499px" Layout="@LayoutValue">
 <DiagramDataSource Id="Name" ParentId="Category" DataSource="@DataSource">
  <DiagramDataMapSettings>
   <DiagramDataMapSetting Property="Shape.TextContent" Field="Name"></DiagramDataMapSetting>
   <DiagramDataMapSetting Property="Style.StrokeColor" Field="FillColor"></DiagramDataMapSetting>
   <DiagramDataMapSetting Property="Style.Fill" Field="FillColor"></DiagramDataMapSetting>
  </DiagramDataMapSettings>
 </DiagramDataSource>
</SfDiagram>
@code
{
 DiagramLayout LayoutValue = new DiagramLayout() { };
 public class HierarchicalDetails
 {
  public string Name { get; set; }
  public string FillColor { get; set; }
  public string Category { get; set; }

 }
 public List<object> DataSource = new List<object>()
 {
  new HierarchicalDetails(){ Name ="Diagram", Category="",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Layout", Category="Diagram",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Tree layout", Category="Layout",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Organizational chart", Category="Layout",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Hierarchical tree", Category="Tree layout",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Radial tree", Category="Tree layout",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Mind map", Category="Hierarchical tree",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Family tree", Category="Hierarchical tree",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Management", Category="Organizational chart",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Human resources", Category="Management",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="University", Category="Management",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Business", Category="#Management",FillColor="#659be5"}
 };
 protected override void OnInitialized()
 {
  LayoutValue = new DiagramLayout()
  {
   Type = LayoutType.HierarchicalTree, VerticalSpacing = 30, HorizontalSpacing = 30
  };
 }
} 		Property: Using the NodeCreating method to mapping from the data source fields to node

<SfDiagramComponent Width="100%" Height="810px" ConnectorCreating="@OnConnectorCreating" NodeCreating="@OnNodeCreating">
 <DataSourceSettings ID="Name" ParentID="Category" DataSource="DataSource"></DataSourceSettings>
 <Layout Type="LayoutType.HierarchicalTree" HorizontalSpacing="30" VerticalSpacing="30" />
</SfDiagramComponent>
@code
{
 public class HierarchicalDetails
 {
  public string Name { get; set; }
  public string FillColor { get; set; }
  public string Category { get; set; }

 }
 public List<object> DataSource = new List<object>()
 {
  new HierarchicalDetails(){ Name ="Diagram", Category="",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Layout", Category="Diagram",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Tree layout", Category="Layout",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Organizational chart", Category="Layout",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Hierarchical tree", Category="Tree layout",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Radial tree", Category="Tree layout",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Mind map", Category="Hierarchical tree",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Family tree", Category="Hierarchical tree",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Management", Category="Organizational chart",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Human resources", Category="Management",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="University", Category="Management",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Business", Category="#Management",FillColor="#659be5"}
 };
 public void OnNodeCreating(IDiagramObject obj)
 {
  if (obj is Node)
  {
   Node node = obj as Node;
   HierarchicalDetails hierarchicalDetailsData = System.Text.Json.JsonSerializer.Deserialize<HierarchicalDetails>(node.Data.ToString(), options);
   node.Style = new TextStyle() { Fill = hierarchicalDetailsData.FillColor, StrokeColor = hierarchicalDetailsData.FillColor, Color = "white", StrokeWidth = 2, };
   node.BackgroundColor = "#659be5";
   node.Shape = new TextShape() { Type = NodeShapes.Text, Content = hierarchicalDetailsData.Name };
   node.Margin = new DiagramThickness() { Left = 10, Right = 10, Bottom = 10, Top = 10 };
 }
 public void OnConnectorCreating(IDiagramObject obj)
 {
  if (obj is Connector)
  {
   Connector connector = obj as Connector;
   connector.Type = ConnectorSegmentType.Orthogonal;
   connector.Style = new ShapeStyle() { StrokeColor = "#6d6d6d", StrokeWidth = 1 };
  }
 }
}

Page Settings

| Behavior | API in SfDiagram | API in SfDiagramComponent |
| ——– | ——– | ——– |
| Defines the page settings of diagram | Property: DiagramPageSettings

<SfDiagram>
  <DiagramPageSettings></DiagramPageSettings>
</SfDiagram> | Property: PageSettings

<SfDiagramComponent>
  <PageSettings></PageSettings>
</SfDiagramComponent> |
| Defines the background properties of diagram | Property: DiagramPageSettings.DiagramBackground

<SfDiagram>
  <DiagramPageSettings>
    <DiagramBackground />
  ` </DiagramPageSettings> <br></SfDiagram> | **Property:** *PageSettings.BackgroundStyle* <br><br> `
  ``
    ``
  ``
` | | Defines the background color of diagram elements | **Property:** *DiagramPageSettings.DiagramBackground.Color* <br><br> `
  ``
    ``
  ` `
` | **Property:** *PageSettings.BackgroundStyle.Background* <br><br> `
  ``
    ``
  ``
` | |Sets the source path of the background image| **Property:** *DiagramPageSettings.DiagramBackground.Source*<br><br> `
  ``
    ``
  ` `
` | **Property:** *PageSettings.BackgroundStyle.ImageSource* <br><br> `
  ``
    ``
  ``
`| |Defines how to align the background image over the diagram area| **Property:** *DiagramPageSettings.DiagramBackground.Align*<br><br> `
  ``
    ``
  ` `
` | **Property:** *PageSettings.BackgroundStyle.ImageAlign* <br><br> `
  ``
    ``
  ``
`| |Defines how the background image should be scaled/stretched| **Property:** *DiagramPageSettings.DiagramBackground.Scale*<br><br> `
  ``
    ``
  ` `
` | **Property:** *PageSettings.BackgroundStyle.ImageScale* <br><br> `
  ``
    ``
  ``
`| | To specify the diagram content can fit in the diagram area in initial rendering | **Property:** *DiagramPageSettings.DiagramFitOptions*<br><br> `
  ``
    ``
  ` `
` | Use FitToPage() method is used to bring the entire diagram in to the view. <br><br> <SfDiagramComponent @ref=”@diagram”><br>&nbsp; `
    ``
  ` <br></SfDiagramComponent><br>@code {<br>&nbsp;public SfDiagramComponent diagram;<br>&nbsp;private void FitToPage()<br>&nbsp;{<br>&nbsp;&nbsp;diagram.FitToPage(new FitOptions(){Mode = FitMode.Height});<br>&nbsp;}<br>}| | To specify the diagram content can fit in the diagram area in initial rendering | **Property:** *DiagramPageSettings.PageSettingsMargin*<br><br> `
  ``
    ``
  ` `
` | **Property:** *PageSettings.PageMargin* <br><br> `
  ``
    ``
  ``
``|

Scroll Settings

Behavior API in SfDiagram API in SfDiagramComponent
Defines the scroll settings of diagram Property: DiagramScrollSettings

<SfDiagram>
  <DiagramScrollSettings></DiagramScrollSettings>
</SfDiagram> 		Property: ScrollSettings

<SfDiagramComponent>
  <ScrollSettings></ScrollSettings>
</SfDiagramComponent>
Set the limit of the scrollable range of diagram Property: DiagramScrollSettings.ScrollLimit

<SfDiagram>
  <DiagramScrollSettings ScrollLimit="ScrollLimit.Diagram"></DiagramScrollSettings>
</SfDiagram> 		Property: ScrollSettings.ScrollLimit

<SfDiagramComponent>
  <ScrollSettings></ScrollSettings ScrollLimit="ScrollLimitMode.Diagram">
</SfDiagramComponent>

Snap Settings

Behavior API in SfDiagram API in SfDiagramComponent
Defines the snap settings of diagram Property: DiagramSnapSettings

<SfDiagram>
  <DiagramSnapSettings></DiagramSnapSettings>
</SfDiagram> 		Property: SnapSettings

<SfDiagramComponent>
  <SnapSettings></SnapSettings>
</SfDiagramComponent>
Defines the minimum distance between selected object and the nearest object Property: DiagramSnapSettings.SnapObjectDistance

<SfDiagram>
  <DiagramSnapSettings SnapObjectDistance="10"></DiagramSnapSettings>
</SfDiagram> 		Property: SnapSettings.SnapDistance

<SfDiagramComponent>
  <SnapSettings SnapDistance="10"></SnapSettings>
</SfDiagramComponent>
Defines the horizontal gridlines of the diagram Property: DiagramSnapSettings.HorizontalGridlines

<SfDiagram>
  <DiagramSnapSettings>
     <HorizontalGridlines/>
 </DiagramSnapSettings>
</SfDiagram> 		Property: SnapSettings.HorizontalGridLines

<SfDiagramComponent>
  <SnapSettings>
     <HorizontalGridLines/>
 </SnapSettings>
</SfDiagramComponent>
Defines the vertical gridlines of the diagram Property: DiagramSnapSettings.VerticalGridlines

<SfDiagram>
  <DiagramSnapSettings>
     <VerticalGridlines/>
 </DiagramSnapSettings>
</SfDiagram> 		Property: SnapSettings.VerticalGridLines

<SfDiagramComponent>
  <SnapSettings>
     <VerticalGridLines/>
 </SnapSettings>
</SfDiagramComponent>

Context Menu

Behavior API in SfDiagram API in SfDiagramComponent
Defines the context menu of the diagram Property: DiagramContextMenuSettings

<SfDiagram>
  <DiagramContextMenuSettings Show="true" \>
</SfDiagram> 		Property: ContextMenuSettings

<SfDiagramComponent>
  <ContextMenuSettings Show="true" \>
</SfDiagramComponent>
Defines the custom context menu items in the diagram Property: DiagramContextMenuSettings.Items

<SfDiagram>
  ` <br></SfDiagram><br><br> @code <br>{<br>&nbsp;&nbsp;List contextMenuItemModels = new List()`
   `{`
    ` new ContextMenuItemModel()`
     `{`
      `Text ="color", Id="color", Target =".e-elementcontent",`
       `Items = new List()`
       `{`
        `new ContextMenuItemModel(){ Text ="Red", Id="Red" },`
        `new ContextMenuItemModel(){ Text ="Yellow", Id="Yellow", }`
        `}`
      `}`
    `};`
`}` | **Property:** *ContextMenuSettings.Items*

``
  ``
``

`@code`
`{`
  `List Items = new List()`
   `{`
    ` new ContextMenuItem()`
     `{`
      `Text ="color", ID="color"`
       `Items = new List()`
       `{`
        `new ContextMenuItem(){ Text ="Red", ID="Red" },`
        `new ContextMenuItem(){ Text ="Yellow", ID="Yellow", }`
        `}`
      `}`
    `};`
`}` 		 
While right click on the the diagram Event: DiagramEvents.OnContextMenuOpen

<SfDiagram>
  <DiagramEvents OnContextMenuOpen="@OnContextMenuOpen"></DiagramEvents>
  ` <br></SfDiagram><br><br> @code <br>{<br>&nbsp;&nbsp;public void OnContextMenuOpen(DiagramBeforeMenuOpenEventArgs args)<br>&nbsp;&nbsp;{<br>&nbsp;&nbsp; }<br>} | **Event:** *ContextMenuSettings.ContextMenuOpening * <br><br> `
  ``
`<br><br> @code <br>{<br>&nbsp;&nbsp;public void ContextMenuOpening(DiagramMenuOpeningEventArgs args)<br>&nbsp;&nbsp;{<br>&nbsp;&nbsp; }<br>}`		  
When the context menu item is clicked Event: DiagramEvents.ContextMenuItemClicked

<SfDiagram>
  <DiagramEvents ContextMenuItemClicked="@ContextMenuItemClicked"></DiagramEvents>
  ` <br></SfDiagram><br><br> @code <br>{<br>&nbsp;&nbsp;public void ContextMenuItemClicked(DiagramMenuEventArgs args)<br>&nbsp;&nbsp;{<br>&nbsp;&nbsp; }<br>} | **Event:** *ContextMenuSettings.ContextMenuItemClicked* <br><br> `
  ``
`<br><br> @code <br>{<br>&nbsp;&nbsp;public void ContextMenuItemClicked(DiagramMenuClickEventArgs args)<br>&nbsp;&nbsp;{<br>&nbsp;&nbsp; }<br>}`		  

History

Behavior API in SfDiagram API in SfDiagramComponent
Notifies when a change is reverted or restored Not supported Property DiagramHistoryManager.Undo and DiagramHistoryManager.Redo
<SfDiagramComponent Width="800px" Height="800px">
 <DiagramHistoryManager Undo="onCustomUndo" Redo="onCustomRedo"></DiagramHistoryManager>
</SfDiagramComponent>
@code
{
 private void onCustomUndo(HistoryEntryBase entry)
 {
  (entry.RedoObject) = entry.UndoObject.Clone() as Node;
  (entry.UndoObject as Node).AdditionalInfo[(entry.UndoObject as Node).ID] = "Start";
  entry.RedoObject = current;
 }

 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;
 }
}

Selected Items

Behavior API in SfDiagram API in SfDiagramComponent
Defines the collection of selected items, the size and position of the selector Property: SelectedItems

<SfDiagram Nodes="@NodeCollection" SelectedItems="@SelectedModel/>
@code
{
 public ObservableCollection<DiagramNode> NodeCollection = new ObservableCollection<DiagramNode>();
 protected override void OnInitialized()
 {
  public Syncfusion.Blazor.Diagrams.DiagramSelectedItems SelectedModel { get; set; }
 protected override void OnInitialized()
 {
  DiagramUserHandle cloneHandle = new DiagramUserHandle()
  {
   Name = "clone",
   PathData = "M60.3,18H27.5c-3,0-5.5,2.4-5.5,5.5v38.2h5.5V23.5h32.7V18z M68.5,28.9h-30c-3,0-5.5,2.4-5.5,5.5v38.2c0,3,2.4,5.5,5.5,5.5h30c3,0,5.5-2.4,5.5-5.5V34.4C73.9,31.4,71.5,28.9,68.5,28.9z M68.5,72.5h-30V34.4h30V72.5z",
   Visible = true,
   Offset = 0,
   Side = Side.Bottom,
   Margin = new DiagramUserHandleMargin() { Top = 0, Bottom = 0, Left = 0, Right = 0 }
  };
  SelectedModel = new Syncfusion.Blazor.Diagrams.DiagramSelectedItems()
  {
   Constraints = SelectorConstraints.UserHandle,
   UserHandles = new ObservableCollection<DiagramUserHandle>() { cloneHandle }
  };
 }
  DiagramNode node1 = new DiagramNode()
  {
   Id = "node1",
   OffsetX = 300,
   OffsetY = 288,
   Width = 100,
   Height = 100,
  };
  NodeCollection.Add(node1);
 }
} 		Property: SelectionSettings

<SfDiagramComponent Nodes="@NodeCollection" SelectionSettings="@selectionSettings"/>
@code
{
 DiagramSelectionSettings selectionSettings = new DiagramSelectionSettings();
 public DiagramObjectCollection<Node> NodeCollection = new DiagramObjectCollection<Node>();
 protected override void OnInitialized()
 {
  UserHandle cloneHandle = new UserHandle()
  {
   Name = "clone",
   PathData = "M60.3,18H27.5c-3,0-5.5,2.4-5.5,5.5v38.2h5.5V23.5h32.7V18z M68.5,28.9h-30c-3,0-5.5,2.4-5.5,5.5v38.2c0,3,2.4,5.5,5.5,5.5h30c3,0,5.5-2.4,5.5-5.5V34.4C73.9,31.4,71.5,28.9,68.5,28.9z M68.5,72.5h-30V34.4h30V72.5z",
   Visible = true,
   Offset = 0,
   Side = Direction.Bottom,
   Margin = new DiagramThickness() { Top = 0, Bottom = 0, Left = 0, Right = 0 }
  };
  selectionSettings = new DiagramSelectionSettings()
  {
   Constraints = SelectorConstraints.UserHandle,
   UserHandles = new DiagramObjectCollection<UserHandle>() { cloneHandle }
  };
  Node node1 = new Node()
  {
   Height = 100,
   Width = 100,
   ID = "node1",
   OffsetX = 300,
   OffsetY = 288,
   };
  NodeCollection.Add(node1);
 }
}

Bridging

Behavior API in SfDiagram API in SfDiagramComponent
Defines the direction of the bridging for the connector Property: BridgeDirection

<SfDiagram BridgeDirection="BridgeDirection.Top"/> 		Property: BridgeDirection

<SfDiagramComponent BridgeDirection="Direction.Top" />

Background Color

Behavior API in SfDiagram API in SfDiagramComponent
Defines the background color of the diagram Property: BackgroundColor

<SfDiagram BackgroundColor="red" /> 		Property: PageSettings.BackgroundStyle.Background

<SfDiagramComponent>
  <PageSettings>
    <BackgroundStyle Background="LightGreen" />
  </PageSettings>
</SfDiagramComponent>

Add Info for diagram

Behavior API in SfDiagram API in SfDiagramComponent
Defines the add information of the diagram Property: AddInfo

<SfDiagram AddInfo="Additional Information about the diagram" /> 		Not supported

Mode

Behavior API in SfDiagram API in SfDiagramComponent
Defines the rendering mode of the diagram Property: Mode

<SfDiagram Mode="RenderingMode.Canvas" /> 		Not supported because only render the diagram in SVG element

Tool

Behavior API in SfDiagram API in SfDiagramComponent
Defines the precedence of the interactive tool Property: Tool

<SfDiagram Tool="DiagramTools.ZoomPan" /> 		Property: InteractionController

<SfDiagramComponent InteractionController="DiagramInteractions.ZoomPan" />
ZoomPan - allows users to pan the diagram. Property: Tool

<SfDiagram Tool="DiagramTools.ZoomPan" /> 		Property: InteractionController

<SfDiagramComponent InteractionController="DiagramInteractions.ZoomPan" />
MultipleSelect - allows users to select multiple nodes and connectors. It won’t allow selecting a single node/connector Property: Tool

<SfDiagram Tool="DiagramTools.MultipleSelect" /> 		Property: InteractionController

<SfDiagramComponent InteractionController="DiagramInteractions.MultipleSelect" />
SingleSelect - allows users to select one node or connector at a time. Property: Tool

<SfDiagram Tool="DiagramTools.SingleSelect" /> 		Property: InteractionController

<SfDiagramComponent InteractionController="DiagramInteractions.SingleSelect" />
DrawOnce - users to draw the drawing objects at once Property: Tool

<SfDiagram Tool="DiagramTools.DrawOnce" /> 		Property: InteractionController

<SfDiagramComponent InteractionController="DiagramInteractions.DrawOnce" />
ContinuousDraw - users to draw the drawing objects continuously Property: Tool

<SfDiagram Tool="DiagramTools.ContinuousDraw" /> 		Property: InteractionController

<SfDiagramComponent InteractionController="DiagramInteractions.ContinuousDraw" />
None - disables the selection, zooming, and interaction behavior of the diagram Property: Tool

<SfDiagram Tool="DiagramTools.None" /> 		Property: InteractionController

<SfDiagramComponent InteractionController="DiagramInteractions.None" />
Default - allow the users to select individual and multiple objects Property: Tool

<SfDiagram Tool="DiagramTools.Default" /> 		Property: InteractionController

<SfDiagramComponent InteractionController="DiagramInteractions.Default" />

Locale

Behavior API in SfDiagram API in SfDiagramComponent
Override the global culture and localization value of the diagram component Property: Locale

<SfDiagram Locale="en-US" /> 		Not supported because we change the culture in application or browser specifically.

Enable Persistence

Behavior API in SfDiagram API in SfDiagramComponent
Enable or disable persisting component’s state between page reloads Property: EnablePersistence

<SfDiagram EnablePersistence="true" /> 		Not supported

EnableRtl

Behavior API in SfDiagram API in SfDiagramComponent
Enable or disable rendering the component in right to left direction Property: EnableRtl

<SfDiagram EnableRtl="false" /> 		Not supported

ModelType

Behavior API in SfDiagram API in SfDiagramComponent
Defines the type of the property Property: ModelType

<SfDiagram ModelType="" />
@code{
 public class Node
 {
  public string Id { get; set; }
  public ArtificialIntelligence Data { get; set; }
 };
 public Type Model = typeof(Node);
 public class ArtificialIntelligence
 {
  public string Name { get; set; }
  public string FillColor { get; set; }
  public string Branch { get; set; }
  public string Category { get; set; }
 }
} 		Not supported

Layers

Behavior API in SfDiagram API in SfDiagramComponent
Provides a way to change the properties of all shapes that have been assigned to that layer Property: Layers

<SfDiagram Height="600px" Nodes="@NodeCollection" Layers="@Layers" />
@code
{
 public ObservableCollection<DiagramNode> NodeCollection = new ObservableCollection<DiagramNode>();
 public ObservableCollection<DiagramLayer> Layers = new ObservableCollection<DiagramLayer>() { };
 protected override void OnInitialized()
 {
  DiagramNode node1 = new DiagramNode()
  {
   Id = "node1",
   OffsetX = 300,
   OffsetY = 288,
   Width = 100,
   Height = 100,
  };
  NodeCollection.Add(node1);
  string[] objects = new string[] { "node1" };
 Layers.Add(new DiagramLayer() { Id = "Layer1", Visible = true, Objects = objects, Lock = true });
 }
} 		Not supported

Serialization Settings

Behavior API in SfDiagram API in SfDiagramComponent
Enables or disables the serialization of the default values Property: DiagramSerializationSettings.PreventDefaults

<SfDiagram><DiagramSerializationSettings PreventDefaults="false" /></SfDiagram> 		Not supported

Command Manager

Behavior API in SfDiagram API in SfDiagramComponent
Defines the custom commands in the command manager Property: DiagramCommandManager.DiagramCommands

<SfDiagram>
 <DiagramCommandManager>
  <DiagramCommands>
   <DiagramCommand Name="customGroup">
    <DiagramKeyGesture Key="Keys.G" KeyModifiers="KeyModifiers.Control" />
   </DiagramCommand>
  </DiagramCommands>
 </DiagramCommandManager>
</SfDiagram> 		Property: CommandManager.Commands

<SfDiagramComponent>
 <CommandManager Commands="commands"/>
</SfDiagramComponent>

@code
{
 DiagramObjectCollection<KeyboardCommand> commands;
 protected override void OnInitialized()
  {
    commands = new DiagramObjectCollection<KeyboardCommand>()
    {
     KeyboardCommand command = new KeyboardCommand()
     {
       Name = "customGroup",
       Gesture = new KeyGesture() { Key = DiagramKeys.G, Modifiers = ModifierKeys.Control }
     };
    };
   }
Triggers when the command executed Event: DiagramEvents.OnCommandExecuted

<SfDiagram @ref="@Diagram">
 <DiagramEvents OnCommandExecuted="@CommandExecute"></DiagramEvents>
 <DiagramCommandManager>
  <DiagramCommands>
   <DiagramCommand Name="customGroup">
    <DiagramKeyGesture Key="Keys.G" KeyModifiers="KeyModifiers.Control" />
   </DiagramCommand>
  </DiagramCommands>
 </DiagramCommandManager>
</SfDiagram>

@code
{
 SfDiagram Diagram;
 public async Task CommandExecute(ICommandExecuteEventArgs args)
  {
   if (args.Gesture.KeyModifiers == KeyModifiers.Control && args.Gesture.Key == Keys.G)
   {
    await Diagram.Group();
   }
  }
 } 		Event: CommandManager.Execute

<SfDiagramComponent @ref="@Diagram">
 <CommandManager Commands="commands" Execute="@ExecuteCommand"/>
</SfDiagramComponent>

@code
{
 SfDiagramComponent Diagram;
 DiagramObjectCollection<KeyboardCommand> commands;
 protected override void OnInitialized()
 {
    commands = new DiagramObjectCollection<KeyboardCommand>()
    {
     KeyboardCommand command = new KeyboardCommand()
     {
       Name = "customGroup",
       Gesture = new KeyGesture() { Key = DiagramKeys.G, Modifiers = ModifierKeys.Control }
     };
    };
 }
 public void ExecuteCommand(CommandKeyArgs obj)
 {
  if(obj.Name =="customGroup")
  {
   Diagram.Group();
  }
 }
}
Determines whether this command can execute in its current state Not supported Event: CommandManager.CanExecute

<SfDiagramComponent @ref="@Diagram">
 <CommandManager Commands="commands" CanExecute="@CanExecute" Execute="@ExecuteCommand"/>
</SfDiagramComponent>

@code
{
 SfDiagramComponent Diagram;
 DiagramObjectCollection<KeyboardCommand> commands;
 protected override void OnInitialized()
 {
    commands = new DiagramObjectCollection<KeyboardCommand>()
    {
     KeyboardCommand command = new KeyboardCommand()
     {
       Name = "customGroup",
       Gesture = new KeyGesture() { Key = DiagramKeys.G, Modifiers = ModifierKeys.Control }
     };
    };
 }
 public void CanExecute(CommandKeyArgs args)
 {
  args.CanExecute = true;
 }
 public void ExecuteCommand(CommandKeyArgs obj)
 {
  if(obj.Name =="customGroup")
  {
   Diagram.Group();
  }
 }
}

Node Defaults

Behavior API in SfDiagram API in SfDiagramComponent
Default values for all the Nodes can be set using the method Property: NodeDefaults

<SfDiagram NodeDefaults="@NodeDefaults"></SfDiagram>
@code
{
 DiagramNode NodeDefaults = new DiagramNode
 {
  Width = 70,
  Height = 70,
  Shape = new DiagramShape() { BasicShape = BasicShapes.Ellipse, CornerRadius = 10, Type = Syncfusion.Blazor.Diagrams.Shapes.Basic },
  Style = new NodeShapeStyle() { StrokeColor = "transparent" },
  Annotations = new ObservableCollection<DiagramNodeAnnotation>()
  {
   new DiagramNodeAnnotation() {
    Style = new AnnotationStyle() { Color = "white"}
   }
  }
 };
} 		Event: NodeCreating

<SfDiagramComponent NodeCreating="@NodeCreating"></SfDiagramComponent>
@code
{
 public void NodeCreating(IDiagramObject obj)
 {
  if (obj is Node)
  {
   Node node = obj as Node;
   node.Width = 70;
   node.Height = 70;
   node.Shape = new BasicShape() { Shape = NodeBasicShapes.Rectangle CornerRadius = 10, Type = shapes.Basic };
   node.Style = new ShapeStyle() { StrokeColor = "transparent" };
   node.Annotations = new DiagramObjectCollection<ShapeAnnotation>()
   {
    new ShapeAnnotation() {
     Style = new TextStyle(){ Color = "white"}
    }
   };
  }
 }
}

Connector Defaults

Behavior API in SfDiagram API in SfDiagramComponent
Default values for all the connector can be set using the method Property: ConnectorDefaults

<SfDiagram ConnectorDefaults="@ConnectorDefaults"></SfDiagram>
@code
{
 DiagramConnector ConnectorDefaults = new DiagramConnector()
 {
  Type = DiagramSegments.Orthogonal,
  Style = new ConnectorShapeStyle() { StrokeWidth = 2, StrokeColor = "#797979" }
 };
} 		Event: ConnectorCreating

<SfDiagramComponent ConnectorCreating="@OnConnectorCreating"></SfDiagramComponent>
@code
{
 public void OnConnectorCreating(IDiagramObject obj)
 {
  if (obj is Connector)
  {
   Connector connector = obj as Connector;
   connector.Type = ConnectorSegmentType.Orthogonal;
   connector.Style = new ShapeStyle() { StrokeColor = "#797979", StrokeWidth = 2 };
  }
 }
}

Ruler Settings

Behavior API in SfDiagram API in SfDiagramComponent
Ruler provides a horizontal and vertical guide for measuring in the Diagram Property: DiagramRulerSettings

<SfDiagram Width="600px" Height="600px">
 <DiagramRulerSettings ShowRulers="true" />
</SfDiagram> 		Not supported

Diagram Constraints

Behavior API in SfDiagram API in SfDiagramComponent
ApiUpdate - Enables or disables the update through public API diagram Property: Constraints

<SfDiagram Constraints="Syncfusion.Blazor.Diagrams.DiagramConstraints.ApiUpdate" /> 		Property: Constraints

<SfDiagramComponent Constraints="Syncfusion.Blazor.Diagram.DiagramConstraints.ApiUpdate" />
Bridging - Enables or disables the Bridging support for the connector in the diagram Property: Constraints

<SfDiagram Constraints="Syncfusion.Blazor.Diagrams.DiagramConstraints.Bridging" /> 		Property: Constraints

<SfDiagramComponent Constraints="Syncfusion.Blazor.Diagram.DiagramConstraints.Bridging" />
LineRouting - Enables or disables the line routing for the diagram Property: Constraints

<SfDiagram Constraints="Syncfusion.Blazor.Diagrams.DiagramConstraints.LineRouting" /> 		Property: Constraints

<SfDiagramComponent Constraints="Syncfusion.Blazor.Diagram.DiagramConstraints.Routing" />
PageEditable - PageEditable enables or disables the page editing support for the diagram Property: Constraints

<SfDiagram Constraints="Syncfusion.Blazor.Diagrams.DiagramConstraints.PageEditable" /> 		Property: Constraints

<SfDiagramComponent Constraints="Syncfusion.Blazor.Diagram.DiagramConstraints.PageEditable" />
UserInteraction - Enables or disables the user interaction for the diagram Property: Constraints

<SfDiagram Constraints="Syncfusion.Blazor.Diagrams.DiagramConstraints.UserInteraction" /> 		Property: Constraints

<SfDiagramComponent Constraints="Syncfusion.Blazor.Diagram.DiagramConstraints.UserInteraction" />
Virtualization - Enables or disables the Virtualization support for the diagram Property: Constraints

<SfDiagram Constraints="Syncfusion.Blazor.Diagrams.DiagramConstraints.Virtualization" /> 		Not supported
Zoom - Enables or disables the Zoom support for the diagram Property: Constraints

<SfDiagram Constraints="Syncfusion.Blazor.Diagrams.DiagramConstraints.Zoom" /> 		Property: Constraints

<SfDiagramComponent Constraints="Syncfusion.Blazor.Diagram.DiagramConstraints.Zoom" />
ZoomTextEdit - Enables or disables zooming the text box while editing the text Property: Constraints

<SfDiagram Constraints="Syncfusion.Blazor.Diagrams.DiagramConstraints.ZoomTextEdit" /> 		Property: Constraints

<SfDiagramComponent Constraints="Syncfusion.Blazor.Diagram.DiagramConstraints.ZoomTextEdit" />
PanX - Enables or disables the Panning X coordinate support for the diagram Property: Constraints

<SfDiagram Constraints="Syncfusion.Blazor.Diagrams.DiagramConstraints.PanX" /> 		Property: Constraints

<SfDiagramComponent Constraints="Syncfusion.Blazor.Diagram.DiagramConstraints.PanX" />
PanY - Enables or disables the Panning Y coordinate support for the diagram Property: Constraints

<SfDiagram Constraints="Syncfusion.Blazor.Diagrams.DiagramConstraints.PanY" /> 		Property: Constraints

<SfDiagramComponent Constraints="Syncfusion.Blazor.Diagram.DiagramConstraints.PanY" />
Pan - Enables or disables the panning both X and Y coordinates support for the diagram Property: Constraints

<SfDiagram Constraints="Syncfusion.Blazor.Diagrams.DiagramConstraints.Pan" /> 		Property: Constraints

<SfDiagramComponent Constraints="Syncfusion.Blazor.Diagram.DiagramConstraints.Pan" />
None - Disables all the diagram functionalities except rendering Property: Constraints

<SfDiagram Constraints="Syncfusion.Blazor.Diagrams.DiagramConstraints.None" /> 		Property: Constraints

<SfDiagramComponent Constraints="Syncfusion.Blazor.Diagram.DiagramConstraints.None" />
Default - Enables all default constraints to the diagram Property: Constraints

<SfDiagram Constraints="Syncfusion.Blazor.Diagrams.DiagramConstraints.Default" /> 		Property: Constraints

<SfDiagramComponent Constraints="Syncfusion.Blazor.Diagram.DiagramConstraints.Default" />
Tooltip - Enables or disables the Tooltip option for the diagram Property: Constraints

<SfDiagram Constraints="Syncfusion.Blazor.Diagrams.DiagramConstraints.Tooltip" /> 		Property: Constraints

<SfDiagramComponent Constraints="Syncfusion.Blazor.Diagram.DiagramConstraints.Tooltip" />
UndoRedo - Enables or disables the Undo/Redo option for the diagram Property: Constraints

<SfDiagram Constraints="Syncfusion.Blazor.Diagrams.DiagramConstraints.UndoRedo" /> 		Property: Constraints

<SfDiagramComponent Constraints="Syncfusion.Blazor.Diagram.DiagramConstraints.UndoRedo" />

Drawing Object

Behavior API in SfDiagram API in SfDiagramComponent
Defines a shape or connector to be drawn in the diagram Property: DrawingObject

<SfDiagram DrawingObject="@DrawingObject" />
@code
{
 public object DrawingObject = new DiagramNode() { Shape = new DiagramShape() { Type = Shapes.Basic, BasicShape = BasicShapes.Rectangle } };
} 		Property: DrawingObject

<SfDiagramComponent DrawingObject="@drawingObject" />
@code{
 IDiagramObject drawingObject { get; set; }
 protected override void OnInitialized()
 {
  Node node = new Node()
  {
   Shape = new BasicShape() { Type = shapes.Basic, Shape = NodeBasicShapes.Rectangle }
  };
  drawingObject = node;
 }
}

Overview

Behavior API in SfDiagram API in SfDiagramComponent
Defines the overview control Property: SfOverview

<SfDiagram ID="diagram" Height="499px" Layout="@LayoutValue">
 <DiagramDataSource Id="Name" ParentId="Category" DataSource="@DataSource">
  <DiagramDataMapSettings>
   <DiagramDataMapSetting Property="Shape.TextContent" Field="Name"></DiagramDataMapSetting>
   <DiagramDataMapSetting Property="Style.StrokeColor" Field="FillColor"></DiagramDataMapSetting>
   <DiagramDataMapSetting Property="Style.Fill" Field="FillColor"></DiagramDataMapSetting>
  </DiagramDataMapSettings>
 </DiagramDataSource>
</SfDiagram>
<SfOverview Height="150px" SourceID="diagram" />
@code
{
 DiagramLayout LayoutValue = new DiagramLayout() { };
 public class HierarchicalDetails
 {
  public string Name { get; set; }
  public string FillColor { get; set; }
  public string Category { get; set; }

 }
 public List<object> DataSource = new List<object>()
 {
  new HierarchicalDetails(){ Name ="Diagram", Category="",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Layout", Category="Diagram",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Tree layout", Category="Layout",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Organizational chart", Category="Layout",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Hierarchical tree", Category="Tree layout",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Radial tree", Category="Tree layout",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Mind map", Category="Hierarchical tree",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Family tree", Category="Hierarchical tree",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Management", Category="Organizational chart",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Human resources", Category="Management",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="University", Category="Management",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Business", Category="#Management",FillColor="#659be5"}
 };
 protected override void OnInitialized()
 {
  LayoutValue = new DiagramLayout()
  {
   Type = LayoutType.HierarchicalTree, VerticalSpacing = 30, HorizontalSpacing = 30
  };
 }
} 		Property: SfDiagramOverviewComponent

<SfDiagramComponent ID="diagram" Width="100%" Height="810px" ConnectorCreating="@OnConnectorCreating" NodeCreating="@OnNodeCreating">
 <DataSourceSettings ID="Name" ParentID="Category" DataSource="DataSource"></DataSourceSettings>
 <Layout Type="LayoutType.HierarchicalTree" HorizontalSpacing="30" VerticalSpacing="30" />
</SfDiagramComponent>
<SfDiagramOverviewComponent Height="150px" SourceID="diagram"></SfDiagramOverviewComponent>
@code
{
 public class HierarchicalDetails
 {
  public string Name { get; set; }
  public string FillColor { get; set; }
  public string Category { get; set; }

 }
 public List<object> DataSource = new List<object>()
 {
  new HierarchicalDetails(){ Name ="Diagram", Category="",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Layout", Category="Diagram",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Tree layout", Category="Layout",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Organizational chart", Category="Layout",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Hierarchical tree", Category="Tree layout",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Radial tree", Category="Tree layout",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Mind map", Category="Hierarchical tree",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Family tree", Category="Hierarchical tree",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Management", Category="Organizational chart",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Human resources", Category="Management",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="University", Category="Management",FillColor="#659be5"},
  new HierarchicalDetails(){ Name ="Business", Category="#Management",FillColor="#659be5"}
 };
 public void OnNodeCreating(IDiagramObject obj)
 {
  if (obj is Node)
  {
   Node node = obj as Node;
   HierarchicalDetails hierarchicalDetailsData = System.Text.Json.JsonSerializer.Deserialize<HierarchicalDetails>(node.Data.ToString(), options);
   node.Style = new TextStyle() { Fill = hierarchicalDetailsData.FillColor, StrokeColor = hierarchicalDetailsData.FillColor, Color = "white", StrokeWidth = 2, };
   node.BackgroundColor = "#659be5";
   node.Shape = new TextShape() { Type = NodeShapes.Text, Content = hierarchicalDetailsData.Name };
   node.Margin = new DiagramThickness() { Left = 10, Right = 10, Bottom = 10, Top = 10 };
 }
 public void OnConnectorCreating(IDiagramObject obj)
 {
  if (obj is Connector)
  {
   Connector connector = obj as Connector;
   connector.Type = ConnectorSegmentType.Orthogonal;
   connector.Style = new ShapeStyle() { StrokeColor = "#6d6d6d", StrokeWidth = 1 };
  }
 }
}

Symbol Palette

Behavior API in SfDiagram API in SfDiagramComponent
Create a symbol palette Property: SfSymbolPalette
<SfSymbolPalette id="palettes" Height="600px" /> 		Property: SfSymbolPaletteComponent <SfSymbolPaletteComponent Height="600px" />
Add symbol group to palette Property Palettes

<SfSymbolPalette Height="600px" Palettes="@Palettes" />
@code
{
 public ObservableCollection<SymbolPalettePalette> Palettes;
 public ObservableCollection<Object> BasicShapes { get; set; }
 public ObservableCollection<Object> Connectors { get; set; }
 protected override void OnInitialized()
 {
  Palettes = new ObservableCollection<SymbolPalettePalette>();
  //Initialize the basic shapes for the symbol palette
  BasicShapes = new ObservableCollection<Object>()
  {
   new DiagramNode()
   {
    Id = "Rectangle",
    Shape = new DiagramShape()
    {
     Type = Shapes.Basic,
     BasicShape = Syncfusion.Blazor.Diagrams.BasicShapes.Rectangle
    }
   },
   new DiagramNode()
   {
    Id = "Ellipse",
    Shape = new DiagramShape()
    {
     Type = Shapes.Basic,
     BasicShape = Syncfusion.Blazor.Diagrams.BasicShapes.Ellipse
    }
   }
  };
  Palettes.Add(new SymbolPalettePalette()
  {
   Id = "BasicShapes",
   Expanded = true,
   Symbols = BasicShapes,
   Title = "Basic Shapes"
  });
  //Initializes connector symbols for the symbol palette.
  Connectors = new ObservableCollection<Object>()
  {
   new DiagramConnector()
   {
    Id = "Link1",
    Type = Segments.Orthogonal,
    SourcePoint = new ConnectorSourcePoint() { X = 0, Y = 0 },
    TargetPoint = new ConnectorTargetPoint() { X = 40, Y = 40 },
    Style = new ConnectorShapeStyle() { StrokeWidth = 1 },
    TargetDecorator = new ConnectorTargetDecorator() { Shape = DecoratorShapes.Arrow }
   },
   new DiagramConnector()
   {
    Id = "Link2",
    Type = Segments.Straight,
    SourcePoint = new ConnectorSourcePoint() { X = 0, Y = 0 },
    TargetPoint = new ConnectorTargetPoint() { X = 40, Y = 40 },
    Style = new ConnectorShapeStyle() { StrokeWidth = 1 },
    TargetDecorator = new ConnectorTargetDecorator() { Shape = DecoratorShapes.Arrow }
   },
  };
  Palettes.Add(new SymbolPalettePalette()
  {
   Id = "Connectors",
   Expanded = true,
   Symbols = Connectors,
   Title = "Connectors"
  });
 }
} 		Property Palettes

<SfSymbolPaletteComponent Height="300px" Width="200px" Palettes="@Palettes"></SfSymbolPaletteComponent>
@code
{
 DiagramObjectCollection<Palette> Palettes = new DiagramObjectCollection<Palette>();
 DiagramObjectCollection<NodeBase> PaletteNodes = new DiagramObjectCollection<NodeBase>();
 DiagramObjectCollection<NodeBase> PaletteConnectors = new DiagramObjectCollection<NodeBase>();
 protected override void OnInitialized()
 {
  InitPaletteModel();
 }

 private void InitPaletteModel()
 {
  CreatePaletteNode(NodeFlowShapes.Terminator, "Terminator");
  CreatePaletteConnector("Link1", ConnectorSegmentType.Orthogonal, DecoratorShape.Arrow);
  Palettes = new DiagramObjectCollection<Palette>()
  {
   new Palette(){Symbols =PaletteNodes, Title="Flow Shapes", ID="Flow Shapes" },
   new Palette(){Symbols = PaletteConnectors, Title = "Connectors" , IsExpanded = true},
  };
 }

 private void CreatePaletteNode(NodeFlowShapes flowShape, string id)
 {
  Node node = new Node()
  {
   ID = id,
   Shape = new FlowShape() { Type = NodeShapes.Flow, Shape = flowShape },
   Style = new ShapeStyle() {Fill="#6495ED", StrokeColor = "#757575" },
  };
  PaletteNodes.Add(node);
 }

 private void CreatePaletteConnector(string id, ConnectorSegmentType type, DecoratorShape decoratorShape)
 {
  Connector connector = new Connector()
  {
   ID = id,
   Type = type,
   SourcePoint = new DiagramPoint() { X = 0, Y = 0 },
   TargetPoint = new DiagramPoint() { X = 100, Y = 100 },
   Style = new ShapeStyle() { StrokeWidth = 1, StrokeColor = "#6495ED" },
   TargetDecorator = new DecoratorSettings()
   {
   &nbsp;Shape = decoratorShape,<br>&nbsp;&nbsp;&nbsp; Style = new ShapeStyle() { StrokeColor = "#6495ED", Fill = "#6495ED" }
   }
  };
  PaletteConnectors.Add(connector);
 }
}
How to drag and drop symbols from palette to diagram No properties require to drag and drop the symbols Property: Targets
<SfSymbolPaletteComponent @ref="@PaletteInstance" Height="700px" />
<SfDiagramComponent @ref="@Diagram" Height="687px" />
@code
{
 public SfDiagramComponent Diagram;
 public SfSymbolPaletteComponent PaletteInstance;
 protected override async Task OnAfterRenderAsync(bool firstRender)
 {
  PaletteInstance.Targets = new DiagramObjectCollection<SfDiagramComponent>
   {
    Diagram
  };
 }
}
Defines the palette items are to be expanded or not Property: SymbolPalette.ExpandMode

<SfSymbolPalette Height="600px" Palettes="@Palettes" ExpandMode="ExpandMode.Multiple" />
@code
{
 public ObservableCollection<SymbolPalettePalette> Palettes;
 public ObservableCollection<Object> BasicShapes { get; set; }
 public ObservableCollection<Object> Connectors { get; set; }
 protected override void OnInitialized()
 {
  Palettes = new ObservableCollection<SymbolPalettePalette>();
  //Initialize the basic shapes for the symbol palette
  BasicShapes = new ObservableCollection<Object>()
  {
   new DiagramNode()
   {
    Id = "Rectangle",
    Shape = new DiagramShape()
    {
     Type = Shapes.Basic,
     BasicShape = Syncfusion.Blazor.Diagrams.BasicShapes.Rectangle
    }
   },
   new DiagramNode()
   {
    Id = "Ellipse",
    Shape = new DiagramShape()
    {
     Type = Shapes.Basic,
     BasicShape = Syncfusion.Blazor.Diagrams.BasicShapes.Ellipse
    }
   }
  };
  Palettes.Add(new SymbolPalettePalette()
  {
   Id = "BasicShapes",
   Expanded = true,
   Symbols = BasicShapes,
   Title = "Basic Shapes"
  });
  //Initializes connector symbols for the symbol palette.
  Connectors = new ObservableCollection<Object>()
  {
   new DiagramConnector()
   {
    Id = "Link1",
    Type = Segments.Orthogonal,
    SourcePoint = new ConnectorSourcePoint() { X = 0, Y = 0 },
    TargetPoint = new ConnectorTargetPoint() { X = 40, Y = 40 },
    Style = new ConnectorShapeStyle() { StrokeWidth = 1 },
    TargetDecorator = new ConnectorTargetDecorator() { Shape = DecoratorShapes.Arrow }
   },
   new DiagramConnector()
   {
    Id = "Link2",
    Type = Segments.Straight,
    SourcePoint = new ConnectorSourcePoint() { X = 0, Y = 0 },
    TargetPoint = new ConnectorTargetPoint() { X = 40, Y = 40 },
    Style = new ConnectorShapeStyle() { StrokeWidth = 1 },
    TargetDecorator = new ConnectorTargetDecorator() { Shape = DecoratorShapes.Arrow }
   },
  };
  Palettes.Add(new SymbolPalettePalette()
  {
   Id = "Connectors",
   Expanded = true,
   Symbols = Connectors,
   Title = "Connectors"
  });
 }
} 		Property: SfSymbolPaletteComponent .PaletteExpandMode

<SfSymbolPaletteComponent Height="300px" Width="200px" Palettes="@Palettes" PaletteExpandMode="ExpandMode.Multiple"></SfSymbolPaletteComponent>
@code
{
 DiagramObjectCollection<Palette> Palettes = new DiagramObjectCollection<Palette>();
 DiagramObjectCollection<NodeBase> PaletteNodes = new DiagramObjectCollection<NodeBase>();
 DiagramObjectCollection<NodeBase> PaletteConnectors = new DiagramObjectCollection<NodeBase>();
 protected override void OnInitialized()
 {
  InitPaletteModel();
 }

 private void InitPaletteModel()
 {
  CreatePaletteNode(NodeFlowShapes.Terminator, "Terminator");
  CreatePaletteConnector("Link1", ConnectorSegmentType.Orthogonal, DecoratorShape.Arrow);
  Palettes = new DiagramObjectCollection<Palette>()
  {
   new Palette(){Symbols =PaletteNodes, Title="Flow Shapes", ID="Flow Shapes" },
   new Palette(){Symbols = PaletteConnectors, Title = "Connectors" , IsExpanded = true},
  };
 }

 private void CreatePaletteNode(NodeFlowShapes flowShape, string id)
 {
  Node node = new Node()
  {
   ID = id,
   Shape = new FlowShape() { Type = NodeShapes.Flow, Shape = flowShape },
   Style = new ShapeStyle() {Fill="#6495ED", StrokeColor = "#757575" },
  };
  PaletteNodes.Add(node);
 }

 private void CreatePaletteConnector(string id, ConnectorSegmentType type, DecoratorShape decoratorShape)
 {
  Connector connector = new Connector()
  {
   ID = id,
   Type = type,
   SourcePoint = new DiagramPoint() { X = 0, Y = 0 },
   TargetPoint = new DiagramPoint() { X = 100, Y = 100 },
   Style = new ShapeStyle() { StrokeWidth = 1, StrokeColor = "#6495ED" },
   TargetDecorator = new DecoratorSettings()
   {
    Shape = decoratorShape,
    Style = new ShapeStyle() { StrokeColor = "#6495ED", Fill = "#6495ED" }
   }
  };
  PaletteConnectors.Add(connector);
 }
}
Enables/Disables the animation while palette header is expanded/collapsed Property: SfSymbolPalette.EnableAnimation

<SfSymbolPalette Height="600px" Palettes="@Palettes" EnableAnimation="true" />
@code
{
 public ObservableCollection<SymbolPalettePalette> Palettes;
 public ObservableCollection<Object> BasicShapes { get; set; }
 public ObservableCollection<Object> Connectors { get; set; }
 protected override void OnInitialized()
 {
  Palettes = new ObservableCollection<SymbolPalettePalette>();
  //Initialize the basic shapes for the symbol palette
  BasicShapes = new ObservableCollection<Object>()
  {
   new DiagramNode()
   {
    Id = "Rectangle",
    Shape = new DiagramShape()
    {
     Type = Shapes.Basic,
     BasicShape = Syncfusion.Blazor.Diagrams.BasicShapes.Rectangle
    }
   },
   new DiagramNode()
   {
    Id = "Ellipse",
    Shape = new DiagramShape()
    {
     Type = Shapes.Basic,
     BasicShape = Syncfusion.Blazor.Diagrams.BasicShapes.Ellipse
    }
   }
  };
  Palettes.Add(new SymbolPalettePalette()
  {
   Id = "BasicShapes",
   Expanded = true,
   Symbols = BasicShapes,
   Title = "Basic Shapes"
  });
  //Initializes connector symbols for the symbol palette.
  Connectors = new ObservableCollection<Object>()
  {
   new DiagramConnector()
   {
    Id = "Link1",
    Type = Segments.Orthogonal,
    SourcePoint = new ConnectorSourcePoint() { X = 0, Y = 0 },
    TargetPoint = new ConnectorTargetPoint() { X = 40, Y = 40 },
    Style = new ConnectorShapeStyle() { StrokeWidth = 1 },
    TargetDecorator = new ConnectorTargetDecorator() { Shape = DecoratorShapes.Arrow }
   },
   new DiagramConnector()
   {
    Id = "Link2",
    Type = Segments.Straight,
    SourcePoint = new ConnectorSourcePoint() { X = 0, Y = 0 },
    TargetPoint = new ConnectorTargetPoint() { X = 40, Y = 40 },
    Style = new ConnectorShapeStyle() { StrokeWidth = 1 },
    TargetDecorator = new ConnectorTargetDecorator() { Shape = DecoratorShapes.Arrow }
   },
  };
  Palettes.Add(new SymbolPalettePalette()
  {
   Id = "Connectors",
   Expanded = true,
   Symbols = Connectors,
   Title = "Connectors"
  });
 }
} 		Not supported
Defines the palette items are to be expanded or not Property: SymbolPalette.Palettes[i].Expanded

<SfSymbolPalette Height="600px" Palettes="@Palettes" />
@code
{
 public ObservableCollection<SymbolPalettePalette> Palettes;
 public ObservableCollection<Object> BasicShapes { get; set; }
 public ObservableCollection<Object> Connectors { get; set; }
 protected override void OnInitialized()
 {
  Palettes = new ObservableCollection<SymbolPalettePalette>();
  //Initialize the basic shapes for the symbol palette
  BasicShapes = new ObservableCollection<Object>()
  {
   new DiagramNode()
   {
    Id = "Rectangle",
    Shape = new DiagramShape()
    {
     Type = Shapes.Basic,
     BasicShape = Syncfusion.Blazor.Diagrams.BasicShapes.Rectangle
    }
   },
   new DiagramNode()
   {
    Id = "Ellipse",
    Shape = new DiagramShape()
    {
     Type = Shapes.Basic,
     BasicShape = Syncfusion.Blazor.Diagrams.BasicShapes.Ellipse
    }
   }
  };
  Palettes.Add(new SymbolPalettePalette()
  {
   Id = "BasicShapes",
   Expanded = true,
   Symbols = BasicShapes,
   Title = "Basic Shapes"
  });
  //Initializes connector symbols for the symbol palette.
  Connectors = new ObservableCollection<Object>()
  {
   new DiagramConnector()
   {
    Id = "Link1",
    Type = Segments.Orthogonal,
    SourcePoint = new ConnectorSourcePoint() { X = 0, Y = 0 },
    TargetPoint = new ConnectorTargetPoint() { X = 40, Y = 40 },
    Style = new ConnectorShapeStyle() { StrokeWidth = 1 },
    TargetDecorator = new ConnectorTargetDecorator() { Shape = DecoratorShapes.Arrow }
   },
   new DiagramConnector()
   {
    Id = "Link2",
    Type = Segments.Straight,
    SourcePoint = new ConnectorSourcePoint() { X = 0, Y = 0 },
    TargetPoint = new ConnectorTargetPoint() { X = 40, Y = 40 },
    Style = new ConnectorShapeStyle() { StrokeWidth = 1 },
    TargetDecorator = new ConnectorTargetDecorator() { Shape = DecoratorShapes.Arrow }
   },
  };
  Palettes.Add(new SymbolPalettePalette()
  {
   Id = "Connectors",
   Expanded = true,
   Symbols = Connectors,
   Title = "Connectors"
  });
 }
} 		Property: SymbolPalette.Palettes[i].IsExpanded

<SfSymbolPaletteComponent Height="300px" Width="200px" Palettes="@Palettes"></SfSymbolPaletteComponent>
@code
{
 DiagramObjectCollection<Palette> Palettes = new DiagramObjectCollection<Palette>();
 DiagramObjectCollection<NodeBase> PaletteNodes = new DiagramObjectCollection<NodeBase>();
 DiagramObjectCollection<NodeBase> PaletteConnectors = new DiagramObjectCollection<NodeBase>();
 protected override void OnInitialized()
 {
  InitPaletteModel();
 }

 private void InitPaletteModel()
 {
  CreatePaletteNode(NodeFlowShapes.Terminator, "Terminator");
  CreatePaletteConnector("Link1", ConnectorSegmentType.Orthogonal, DecoratorShape.Arrow);
  Palettes = new DiagramObjectCollection<Palette>()
  {
   new Palette(){Symbols =PaletteNodes, Title="Flow Shapes", ID="Flow Shapes" },
   new Palette(){Symbols = PaletteConnectors, Title = "Connectors" , IsExpanded = true},
  };
 }

 private void CreatePaletteNode(NodeFlowShapes flowShape, string id)
 {
  Node node = new Node()
  {
   ID = id,
   Shape = new FlowShape() { Type = NodeShapes.Flow, Shape = flowShape },
   Style = new ShapeStyle() {Fill="#6495ED", StrokeColor = "#757575" },
  };
  PaletteNodes.Add(node);
 }

 private void CreatePaletteConnector(string id, ConnectorSegmentType type, DecoratorShape decoratorShape)
 {
  Connector connector = new Connector()
  {
   ID = id,
   Type = type,
   SourcePoint = new DiagramPoint() { X = 0, Y = 0 },
   TargetPoint = new DiagramPoint() { X = 100, Y = 100 },
   Style = new ShapeStyle() { StrokeWidth = 1, StrokeColor = "#6495ED" },
   TargetDecorator = new DecoratorSettings()
   {
   &nbsp;Shape = decoratorShape,<br>&nbsp;&nbsp;&nbsp; Style = new ShapeStyle() { StrokeColor = "#6495ED", Fill = "#6495ED" }
   }
  };
  PaletteConnectors.Add(connector);
 }
}
How to add the symbol description and appearance of the symbol Property: SymbolPalette.Palettes.Symbols[i].SymbolInfo

<SfSymbolPalette Height="600px" Palettes="@Palettes" SymbolInfo="@symbolInfo" />
@code
{
 public ObservableCollection<SymbolPalettePalette> Palettes;
 public ObservableCollection<Object> BasicShapes { get; set; }
 public ObservableCollection<Object> Connectors { get; set; }
 protected override void OnInitialized()
 {
  Palettes = new ObservableCollection<SymbolPalettePalette>();
  //Initialize the basic shapes for the symbol palette
  BasicShapes = new ObservableCollection<Object>()
  {
   new DiagramNode()
   {
    Id = "Rectangle",
    Shape = new DiagramShape()
    {
     Type = Shapes.Basic,
     BasicShape = Syncfusion.Blazor.Diagrams.BasicShapes.Rectangle
    }
   },
   new DiagramNode()
   {
    Id = "Ellipse",SymbolInfo = new SymbolInfo() { Description= new SymbolDescription { Text="Rectangle" } },
    Shape = new DiagramShape()
    {
     Type = Shapes.Basic,
     BasicShape = Syncfusion.Blazor.Diagrams.BasicShapes.Ellipse
    }
   }
  };
  Palettes.Add(new SymbolPalettePalette()
  {
   Id = "BasicShapes",
   Expanded = true,
   Symbols = BasicShapes,
   Title = "Basic Shapes"
  });
  //Initializes connector symbols for the symbol palette.
  Connectors = new ObservableCollection<Object>()
  {
   new DiagramConnector()
   {
    Id = "Link1",
    Type = Segments.Orthogonal,
    SourcePoint = new ConnectorSourcePoint() { X = 0, Y = 0 },
    TargetPoint = new ConnectorTargetPoint() { X = 40, Y = 40 },
    Style = new ConnectorShapeStyle() { StrokeWidth = 1 },
    TargetDecorator = new ConnectorTargetDecorator() { Shape = DecoratorShapes.Arrow }
   },
   new DiagramConnector()
   {
    Id = "Link2",
    Type = Segments.Straight,
    SourcePoint = new ConnectorSourcePoint() { X = 0, Y = 0 },
    TargetPoint = new ConnectorTargetPoint() { X = 40, Y = 40 },
    Style = new ConnectorShapeStyle() { StrokeWidth = 1 },
    TargetDecorator = new ConnectorTargetDecorator() { Shape = DecoratorShapes.Arrow }
   },
  };
  Palettes.Add(new SymbolPalettePalette()
  {
   Id = "Connectors",
   Expanded = true,
   Symbols = Connectors,
   Title = "Connectors"
  });
 }
} 		Property: SymbolPalette.GetSymbolInfo

<SfSymbolPaletteComponent Height="300px" Width="200px" Palettes="@Palettes" GetSymbolInfo="GetSymbolInfo"></SfSymbolPaletteComponent>
@code
{
 DiagramObjectCollection<Palette> Palettes = new DiagramObjectCollection<Palette>();
 DiagramObjectCollection<NodeBase> PaletteNodes = new DiagramObjectCollection<NodeBase>();
 DiagramObjectCollection<NodeBase> PaletteConnectors = new DiagramObjectCollection<NodeBase>();
 protected override void OnInitialized()
 {
  InitPaletteModel();
 }

 private void InitPaletteModel()
 {
  CreatePaletteNode(NodeFlowShapes.Terminator, "Terminator");
  CreatePaletteConnector("Link1", ConnectorSegmentType.Orthogonal, DecoratorShape.Arrow);
  Palettes = new DiagramObjectCollection<Palette>()
  {
   new Palette(){Symbols =PaletteNodes, Title="Flow Shapes", ID="Flow Shapes" },
   new Palette(){Symbols = PaletteConnectors, Title = "Connectors" , IsExpanded = true},
  };
 }

 private void CreatePaletteNode(NodeFlowShapes flowShape, string id)
 {
  Node node = new Node()
  {
   ID = id,
   Shape = new FlowShape() { Type = NodeShapes.Flow, Shape = flowShape },
   Style = new ShapeStyle() {Fill="#6495ED", StrokeColor = "#757575" },
  };
  PaletteNodes.Add(node);
 }

 private void CreatePaletteConnector(string id, ConnectorSegmentType type, DecoratorShape decoratorShape)
 {
  Connector connector = new Connector()
  {
   ID = id,
   Type = type,
   SourcePoint = new DiagramPoint() { X = 0, Y = 0 },
   TargetPoint = new DiagramPoint() { X = 100, Y = 100 },
   Style = new ShapeStyle() { StrokeWidth = 1, StrokeColor = "#6495ED" },
   TargetDecorator = new DecoratorSettings()
   {
   &nbsp;Shape = decoratorShape,<br>&nbsp;&nbsp;&nbsp; Style = new ShapeStyle() { StrokeColor = "#6495ED", Fill = "#6495ED" }
   }
  };
  PaletteConnectors.Add(connector);
 }

 private SymbolInfo GetSymbolInfo(IDiagramObject symbol)
 {
  SymbolInfo SymbolInfo = new SymbolInfo();
  string text = null;
  text = (symbol as Node).ID;
  SymbolInfo.Description = new SymbolDescription() { Text = text };
  return SymbolInfo;
 }
}
Add symbols to palette at runtime Method: SymbolPalette.AddPaletteItem

<SfSymbolPalette Height="600px" Palettes="@Palettes" />
@code
{
 public ObservableCollection<SymbolPalettePalette> Palettes;
 public ObservableCollection<Object> BasicShapes { get; set; }
 public ObservableCollection<Object> Connectors { get; set; }
 protected override void OnInitialized()
 {
  Palettes = new ObservableCollection<SymbolPalettePalette>();
  //Initialize the basic shapes for the symbol palette
  BasicShapes = new ObservableCollection<Object>()
  {
   new DiagramNode()
   {
    Id = "Rectangle",
    Shape = new DiagramShape()
    {
     Type = Shapes.Basic,
     BasicShape = Syncfusion.Blazor.Diagrams.BasicShapes.Rectangle
    }
   },
   new DiagramNode()
   {
    Id = "Ellipse",
    Shape = new DiagramShape()
    {
     Type = Shapes.Basic,
     BasicShape = Syncfusion.Blazor.Diagrams.BasicShapes.Ellipse
    }
   }
  };
  Palettes.Add(new SymbolPalettePalette()
  {
   Id = "BasicShapes",
   Expanded = true,
   Symbols = BasicShapes,
   Title = "Basic Shapes"
  });
  //Initializes connector symbols for the symbol palette.
  Connectors = new ObservableCollection<Object>()
  {
   new DiagramConnector()
   {
    Id = "Link1",
    Type = Segments.Orthogonal,
    SourcePoint = new ConnectorSourcePoint() { X = 0, Y = 0 },
    TargetPoint = new ConnectorTargetPoint() { X = 40, Y = 40 },
    Style = new ConnectorShapeStyle() { StrokeWidth = 1 },
    TargetDecorator = new ConnectorTargetDecorator() { Shape = DecoratorShapes.Arrow }
   },
   new DiagramConnector()
   {
    Id = "Link2",
    Type = Segments.Straight,
    SourcePoint = new ConnectorSourcePoint() { X = 0, Y = 0 },
    TargetPoint = new ConnectorTargetPoint() { X = 40, Y = 40 },
    Style = new ConnectorShapeStyle() { StrokeWidth = 1 },
    TargetDecorator = new ConnectorTargetDecorator() { Shape = DecoratorShapes.Arrow }
   },
  };
  Palettes.Add(new SymbolPalettePalette()
  {
   Id = "Connectors",
   Expanded = true,
   Symbols = Connectors,
   Title = "Connectors"
  });
 }
 Node decision = new Node()
 {
  ID = "Decision",
  Shape = new FlowShape() { Type = NodeShapes.Flow, Shape = NodeFlowShapes.Decision }
 };
 SymbolPalette.AddPaletteItem("Flow Shapes", decision, false);
} 		Method: SymbolPalette.AddPaletteItem

<SfSymbolPaletteComponent Height="300px" Width="200px" Palettes="@Palettes"></SfSymbolPaletteComponent>
@code
{
 DiagramObjectCollection<Palette> Palettes = new DiagramObjectCollection<Palette>();
 DiagramObjectCollection<NodeBase> PaletteNodes = new DiagramObjectCollection<NodeBase>();
 DiagramObjectCollection<NodeBase> PaletteConnectors = new DiagramObjectCollection<NodeBase>();
 protected override void OnInitialized()
 {
  InitPaletteModel();
 }

 private void InitPaletteModel()
 {
  CreatePaletteNode(NodeFlowShapes.Terminator, "Terminator");
  CreatePaletteConnector("Link1", ConnectorSegmentType.Orthogonal, DecoratorShape.Arrow);
  Palettes = new DiagramObjectCollection<Palette>()
  {
   new Palette(){Symbols =PaletteNodes, Title="Flow Shapes", ID="Flow Shapes" },
   new Palette(){Symbols = PaletteConnectors, Title = "Connectors" , IsExpanded = true},
  };
 }

 private void CreatePaletteNode(NodeFlowShapes flowShape, string id)
 {
  Node node = new Node()
  {
   ID = id,
   Shape = new FlowShape() { Type = NodeShapes.Flow, Shape = flowShape },
   Style = new ShapeStyle() {Fill="#6495ED", StrokeColor = "#757575" },
  };
  PaletteNodes.Add(node);
 }

 private void CreatePaletteConnector(string id, ConnectorSegmentType type, DecoratorShape decoratorShape)
 {
  Connector connector = new Connector()
  {
   ID = id,
   Type = type,
   SourcePoint = new DiagramPoint() { X = 0, Y = 0 },
   TargetPoint = new DiagramPoint() { X = 100, Y = 100 },
   Style = new ShapeStyle() { StrokeWidth = 1, StrokeColor = "#6495ED" },
   TargetDecorator = new DecoratorSettings()
   {
   &nbsp;Shape = decoratorShape,<br>&nbsp;&nbsp;&nbsp; Style = new ShapeStyle() { StrokeColor = "#6495ED", Fill = "#6495ED" }
   }
  };
  PaletteConnectors.Add(connector);
 }
 Node decision = new Node()
 {
  ID = "Decision",
  Shape = new FlowShape() { Type = NodeShapes.Flow, Shape = NodeFlowShapes.Decision }
 };
 SymbolPalette.AddPaletteItem("Flow Shapes", decision);
}
Customize the preview size of the symbol Property: SymbolPalette.SymbolPaletteSymbolPreview

<SfSymbolPalette Height="600px" Palettes="@Palettes">
 <SymbolPaletteSymbolPreview Height="100" Width="100"/>
</SfSymbolPalette>
@code
{
 public ObservableCollection<SymbolPalettePalette> Palettes;
 public ObservableCollection<Object> BasicShapes { get; set; }
 public ObservableCollection<Object> Connectors { get; set; }
 protected override void OnInitialized()
 {
  Palettes = new ObservableCollection<SymbolPalettePalette>();
  //Initialize the basic shapes for the symbol palette
  BasicShapes = new ObservableCollection<Object>()
  {
   new DiagramNode()
   {
    Id = "Rectangle",
    Shape = new DiagramShape()
    {
     Type = Shapes.Basic,
     BasicShape = Syncfusion.Blazor.Diagrams.BasicShapes.Rectangle
    }
   },
   new DiagramNode()
   {
    Id = "Ellipse",
    Shape = new DiagramShape()
    {
     Type = Shapes.Basic,
     BasicShape = Syncfusion.Blazor.Diagrams.BasicShapes.Ellipse
    }
   }
  };
  Palettes.Add(new SymbolPalettePalette()
  {
   Id = "BasicShapes",
   Expanded = true,
   Symbols = BasicShapes,
   Title = "Basic Shapes"
  });
  //Initializes connector symbols for the symbol palette.
  Connectors = new ObservableCollection<Object>()
  {
   new DiagramConnector()
   {
    Id = "Link1",
    Type = Segments.Orthogonal,
    SourcePoint = new ConnectorSourcePoint() { X = 0, Y = 0 },
    TargetPoint = new ConnectorTargetPoint() { X = 40, Y = 40 },
    Style = new ConnectorShapeStyle() { StrokeWidth = 1 },
    TargetDecorator = new ConnectorTargetDecorator() { Shape = DecoratorShapes.Arrow }
   },
   new DiagramConnector()
   {
    Id = "Link2",
    Type = Segments.Straight,
    SourcePoint = new ConnectorSourcePoint() { X = 0, Y = 0 },
    TargetPoint = new ConnectorTargetPoint() { X = 40, Y = 40 },
    Style = new ConnectorShapeStyle() { StrokeWidth = 1 },
    TargetDecorator = new ConnectorTargetDecorator() { Shape = DecoratorShapes.Arrow }
   },
  };
  Palettes.Add(new SymbolPalettePalette()
  {
   Id = "Connectors",
   Expanded = true,
   Symbols = Connectors,
   Title = "Connectors"
  });
 }
} 		Property: SymbolPalette.SymbolDragPreviewSize

<SfSymbolPaletteComponent Height="300px" Width="200px" Palettes="@Palettes" SymbolDragPreviewSize="@symbolDragPreviewSize"></SfSymbolPaletteComponent>
@code
{
 DiagramObjectCollection<Palette> Palettes = new DiagramObjectCollection<Palette>();
 DiagramSize symbolDragPreviewSize;
 DiagramObjectCollection<NodeBase> PaletteNodes = new DiagramObjectCollection<NodeBase>();
 DiagramObjectCollection<NodeBase> PaletteConnectors = new DiagramObjectCollection<NodeBase>();
 protected override void OnInitialized()
 {
  InitPaletteModel();
 }

 private void InitPaletteModel()
 {
  symbolDragPreviewSize = new DiagramSize() {Width = 100, Height = 100 };
  CreatePaletteNode(NodeFlowShapes.Terminator, "Terminator");
  CreatePaletteConnector("Link1", ConnectorSegmentType.Orthogonal, DecoratorShape.Arrow);
  Palettes = new DiagramObjectCollection<Palette>()
  {
   new Palette(){Symbols =PaletteNodes, Title="Flow Shapes", ID="Flow Shapes" },
   new Palette(){Symbols = PaletteConnectors, Title = "Connectors" , IsExpanded = true},
  };
 }

 private void CreatePaletteNode(NodeFlowShapes flowShape, string id)
 {
  Node node = new Node()
  {
   ID = id,
   Shape = new FlowShape() { Type = NodeShapes.Flow, Shape = flowShape },
   Style = new ShapeStyle() {Fill="#6495ED", StrokeColor = "#757575" },
  };
  PaletteNodes.Add(node);
 }

 private void CreatePaletteConnector(string id, ConnectorSegmentType type, DecoratorShape decoratorShape)
 {
  Connector connector = new Connector()
  {
   ID = id,
   Type = type,
   SourcePoint = new DiagramPoint() { X = 0, Y = 0 },
   TargetPoint = new DiagramPoint() { X = 100, Y = 100 },
   Style = new ShapeStyle() { StrokeWidth = 1, StrokeColor = "#6495ED" },
   TargetDecorator = new DecoratorSettings()
   {
    Shape = decoratorShape,
    Style = new ShapeStyle() { StrokeColor = "#6495ED", Fill = "#6495ED" }
   }
  };
  PaletteConnectors.Add(connector);
 }
}
Default settings for Node in Symbol palette Property: SfSymbolPalette.NodeDefaults

<SfSymbolPalette Height="600px" Palettes="@Palettes" NodeDefaults="@PaletteNodeDefaults"/>
@code
{
 public ObservableCollection<SymbolPalettePalette> Palettes;
 public ObservableCollection<Object> BasicShapes { get; set; }
 public DiagramNode PaletteNodeDefaults;
 public ObservableCollection<Object> Connectors { get; set; }
 protected override void OnInitialized()
 {
  Palettes = new ObservableCollection<SymbolPalettePalette>();
  //Initialize the basic shapes for the symbol palette
  BasicShapes = new ObservableCollection<Object>()
  {
   new DiagramNode()
   {
    Id = "Rectangle",
    Shape = new DiagramShape()
    {
     Type = Shapes.Basic,
     BasicShape = Syncfusion.Blazor.Diagrams.BasicShapes.Rectangle
    }
   },
   new DiagramNode()
   {
    Id = "Ellipse",
    Shape = new DiagramShape()
    {
     Type = Shapes.Basic,
     BasicShape = Syncfusion.Blazor.Diagrams.BasicShapes.Ellipse
    }
   }
  };
  Palettes.Add(new SymbolPalettePalette()
  {
   Id = "BasicShapes",
   Expanded = true,
   Symbols = BasicShapes,
   Title = "Basic Shapes"
  });
  //Initializes connector symbols for the symbol palette.
  Connectors = new ObservableCollection<Object>()
  {
   new DiagramConnector()
   {
    Id = "Link1",
    Type = Segments.Orthogonal,
    SourcePoint = new ConnectorSourcePoint() { X = 0, Y = 0 },
    TargetPoint = new ConnectorTargetPoint() { X = 40, Y = 40 },
    Style = new ConnectorShapeStyle() { StrokeWidth = 1 },
    TargetDecorator = new ConnectorTargetDecorator() { Shape = DecoratorShapes.Arrow }
   },
   new DiagramConnector()
   {
    Id = "Link2",
    Type = Segments.Straight,
    SourcePoint = new ConnectorSourcePoint() { X = 0, Y = 0 },
    TargetPoint = new ConnectorTargetPoint() { X = 40, Y = 40 },
    Style = new ConnectorShapeStyle() { StrokeWidth = 1 },
    TargetDecorator = new ConnectorTargetDecorator() { Shape = DecoratorShapes.Arrow }
   },
  };
  Palettes.Add(new SymbolPalettePalette()
  {
   Id = "Connectors",
   Expanded = true,
   Symbols = Connectors,
   Title = "Connectors"
  });
  PaletteNodeDefaults = new DiagramNode()
  {
   Width = 100, Height = 100, Style = new NodeShapeStyle() { StrokeColor = "#3A3A3A" }
  };
 }
} 		Property: SymbolPalette.NodeCreating

<SfSymbolPaletteComponent Height="300px" Width="200px" Palettes="@Palettes" NodeCreating="OnNodeCreating"></SfSymbolPaletteComponent>
@code
{
 DiagramObjectCollection<Palette> Palettes = new DiagramObjectCollection<Palette>();
 DiagramSize symbolDragPreviewSize;
 DiagramObjectCollection<NodeBase> PaletteNodes = new DiagramObjectCollection<NodeBase>();
 DiagramObjectCollection<NodeBase> PaletteConnectors = new DiagramObjectCollection<NodeBase>();
 protected override void OnInitialized()
 {
  InitPaletteModel();
 }

 private void InitPaletteModel()
 {
  symbolDragPreviewSize = new DiagramSize() {Width = 100, Height = 100 };
  CreatePaletteNode(NodeFlowShapes.Terminator, "Terminator");
  CreatePaletteConnector("Link1", ConnectorSegmentType.Orthogonal, DecoratorShape.Arrow);
  Palettes = new DiagramObjectCollection<Palette>()
  {
   new Palette(){Symbols =PaletteNodes, Title="Flow Shapes", ID="Flow Shapes" },
   new Palette(){Symbols = PaletteConnectors, Title = "Connectors" , IsExpanded = true},
  };
 }

 private void CreatePaletteNode(NodeFlowShapes flowShape, string id)
 {
  Node node = new Node()
  {
   ID = id,
   Shape = new FlowShape() { Type = NodeShapes.Flow, Shape = flowShape },
   Style = new ShapeStyle() {Fill="#6495ED", StrokeColor = "#757575" },
  };
  PaletteNodes.Add(node);
 }

 private void CreatePaletteConnector(string id, ConnectorSegmentType type, DecoratorShape decoratorShape)
 {
  Connector connector = new Connector()
  {
   ID = id,
   Type = type,
   SourcePoint = new DiagramPoint() { X = 0, Y = 0 },
   TargetPoint = new DiagramPoint() { X = 100, Y = 100 },
   Style = new ShapeStyle() { StrokeWidth = 1, StrokeColor = "#6495ED" },
   TargetDecorator = new DecoratorSettings()
   {
    Shape = decoratorShape,
    Style = new ShapeStyle() { StrokeColor = "#6495ED", Fill = "#6495ED" }
   }
  };
  PaletteConnectors.Add(connector);
 }
 public void OnNodeCreating(IDiagramObject args)
 {
  Node node = obj as Node;
  node.Style.Fill = "#357BD2";
  node.Style.StrokeColor = "White";
  node.Style.Opacity = 1;
 }
}
Default settings for connector in symbol palette Property: SfSymbolPalette.ConnectorDefaults

<SfSymbolPalette Height="600px" Palettes="@Palettes" ConnectorDefaults="@ConnectorDefaults"/>
@code
{
 public ObservableCollection<SymbolPalettePalette> Palettes;
 public ObservableCollection<Object> BasicShapes { get; set; }
 public DiagramNode ConnectorDefaults;
 public ObservableCollection<Object> Connectors { get; set; }
 protected override void OnInitialized()
 {
  Palettes = new ObservableCollection<SymbolPalettePalette>();
  //Initialize the basic shapes for the symbol palette
  BasicShapes = new ObservableCollection<Object>()
  {
   new DiagramNode()
   {
    Id = "Rectangle",
    Shape = new DiagramShape()
    {
     Type = Shapes.Basic,
     BasicShape = Syncfusion.Blazor.Diagrams.BasicShapes.Rectangle
    }
   },
   new DiagramNode()
   {
    Id = "Ellipse",
    Shape = new DiagramShape()
    {
     Type = Shapes.Basic,
     BasicShape = Syncfusion.Blazor.Diagrams.BasicShapes.Ellipse
    }
   }
  };
  Palettes.Add(new SymbolPalettePalette()
  {
   Id = "BasicShapes",
   Expanded = true,
   Symbols = BasicShapes,
   Title = "Basic Shapes"
  });
  //Initializes connector symbols for the symbol palette.
  Connectors = new ObservableCollection<Object>()
  {
   new DiagramConnector()
   {
    Id = "Link1",
    Type = Segments.Orthogonal,
    SourcePoint = new ConnectorSourcePoint() { X = 0, Y = 0 },
    TargetPoint = new ConnectorTargetPoint() { X = 40, Y = 40 },
    Style = new ConnectorShapeStyle() { StrokeWidth = 1 },
    TargetDecorator = new ConnectorTargetDecorator() { Shape = DecoratorShapes.Arrow }
   },
   new DiagramConnector()
   {
    Id = "Link2",
    Type = Segments.Straight,
    SourcePoint = new ConnectorSourcePoint() { X = 0, Y = 0 },
    TargetPoint = new ConnectorTargetPoint() { X = 40, Y = 40 },
    Style = new ConnectorShapeStyle() { StrokeWidth = 1 },
    TargetDecorator = new ConnectorTargetDecorator() { Shape = DecoratorShapes.Arrow }
   },
  };
  Palettes.Add(new SymbolPalettePalette()
  {
   Id = "Connectors",
   Expanded = true,
   Symbols = Connectors,
   Title = "Connectors"
  });
  
 ConnectorDefaults = new DiagramConnector()
 {
  Type = DiagramSegments.Orthogonal,
  Style = new ConnectorShapeStyle() { StrokeWidth = 2, StrokeColor = "#797979" }
 };
 }
} 		Property: SfSymbolPaletteComponent.ConnectorCreating

<SfSymbolPaletteComponent Height="300px" Width="200px" Palettes="@Palettes" ConnectorCreating="OnConnectorCreating"></SfSymbolPaletteComponent>
@code
{
 DiagramObjectCollection<Palette> Palettes = new DiagramObjectCollection<Palette>();
 DiagramSize symbolDragPreviewSize;
 DiagramObjectCollection<NodeBase> PaletteNodes = new DiagramObjectCollection<NodeBase>();
 DiagramObjectCollection<NodeBase> PaletteConnectors = new DiagramObjectCollection<NodeBase>();
 protected override void OnInitialized()
 {
  InitPaletteModel();
 }

 private void InitPaletteModel()
 {
  symbolDragPreviewSize = new DiagramSize() {Width = 100, Height = 100 };
  CreatePaletteNode(NodeFlowShapes.Terminator, "Terminator");
  CreatePaletteConnector("Link1", ConnectorSegmentType.Orthogonal, DecoratorShape.Arrow);
  Palettes = new DiagramObjectCollection<Palette>()
  {
   new Palette(){Symbols =PaletteNodes, Title="Flow Shapes", ID="Flow Shapes" },
   new Palette(){Symbols = PaletteConnectors, Title = "Connectors" , IsExpanded = true},
  };
 }

 private void CreatePaletteNode(NodeFlowShapes flowShape, string id)
 {
  Node node = new Node()
  {
   ID = id,
   Shape = new FlowShape() { Type = NodeShapes.Flow, Shape = flowShape },
   Style = new ShapeStyle() {Fill="#6495ED", StrokeColor = "#757575" },
  };
  PaletteNodes.Add(node);
 }

 private void CreatePaletteConnector(string id, ConnectorSegmentType type, DecoratorShape decoratorShape)
 {
  Connector connector = new Connector()
  {
   ID = id,
   Type = type,
   SourcePoint = new DiagramPoint() { X = 0, Y = 0 },
   TargetPoint = new DiagramPoint() { X = 100, Y = 100 },
   Style = new ShapeStyle() { StrokeWidth = 1, StrokeColor = "#6495ED" },
   TargetDecorator = new DecoratorSettings()
   {
    Shape = decoratorShape,
    Style = new ShapeStyle() { StrokeColor = "#6495ED", Fill = "#6495ED" }
   }
  };
  PaletteConnectors.Add(connector);
 }
 public void OnConnectorCreating(IDiagramObject args)
 {
  Connector connector = obj as Connector;
  connector.Style.StrokeColor = "#357BD2";
  connector.TargetDecorator.Style.StrokeColor = "#357BD2";
  connector.Style.Opacity = 1;
 }
}
Set the margin for the symbol Property: SfSymbolPalette.SymbolMargin

<SfSymbolPalette Height="600px" Palettes="@Palettes">
 <SymbolMargin Left="15" Bottom="15" Right="15" Top="15"></SymbolMargin>
</SfSymbolPalette>
@code
{
 public ObservableCollection<SymbolPalettePalette> Palettes;
 public ObservableCollection<Object> BasicShapes { get; set; }
 public ObservableCollection<Object> Connectors { get; set; }
 protected override void OnInitialized()
 {
  Palettes = new ObservableCollection<SymbolPalettePalette>();
  //Initialize the basic shapes for the symbol palette
  BasicShapes = new ObservableCollection<Object>()
  {
   new DiagramNode()
   {
    Id = "Rectangle",
    Shape = new DiagramShape()
    {
     Type = Shapes.Basic,
     BasicShape = Syncfusion.Blazor.Diagrams.BasicShapes.Rectangle
    }
   },
   new DiagramNode()
   {
    Id = "Ellipse",
    Shape = new DiagramShape()
    {
     Type = Shapes.Basic,
     BasicShape = Syncfusion.Blazor.Diagrams.BasicShapes.Ellipse
    }
   }
  };
  Palettes.Add(new SymbolPalettePalette()
  {
   Id = "BasicShapes",
   Expanded = true,
   Symbols = BasicShapes,
   Title = "Basic Shapes"
  });
  //Initializes connector symbols for the symbol palette.
  Connectors = new ObservableCollection<Object>()
  {
   new DiagramConnector()
   {
    Id = "Link1",
    Type = Segments.Orthogonal,
    SourcePoint = new ConnectorSourcePoint() { X = 0, Y = 0 },
    TargetPoint = new ConnectorTargetPoint() { X = 40, Y = 40 },
    Style = new ConnectorShapeStyle() { StrokeWidth = 1 },
    TargetDecorator = new ConnectorTargetDecorator() { Shape = DecoratorShapes.Arrow }
   },
   new DiagramConnector()
   {
    Id = "Link2",
    Type = Segments.Straight,
    SourcePoint = new ConnectorSourcePoint() { X = 0, Y = 0 },
    TargetPoint = new ConnectorTargetPoint() { X = 40, Y = 40 },
    Style = new ConnectorShapeStyle() { StrokeWidth = 1 },
    TargetDecorator = new ConnectorTargetDecorator() { Shape = DecoratorShapes.Arrow }
   },
  };
  Palettes.Add(new SymbolPalettePalette()
  {
   Id = "Connectors",
   Expanded = true,
   Symbols = Connectors,
   Title = "Connectors"
  });
 }
} 		Property: SfSymbolPaletteComponent.SymbolMargin

<SfSymbolPaletteComponent Height="300px" Width="200px" Palettes="@Palettes" SymbolMargin="@SymbolMargin"></SfSymbolPaletteComponent>
@code
{
 SymbolMargin SymbolMargin = new SymbolMargin { Left = 10, Right = 10, Top = 10, Bottom = 10 };
 DiagramObjectCollection<Palette> Palettes = new DiagramObjectCollection<Palette>();
 DiagramObjectCollection<NodeBase> PaletteNodes = new DiagramObjectCollection<NodeBase>();
 DiagramObjectCollection<NodeBase> PaletteConnectors = new DiagramObjectCollection<NodeBase>();
 protected override void OnInitialized()
 {
  InitPaletteModel();
 }

 private void InitPaletteModel()
 {
  CreatePaletteNode(NodeFlowShapes.Terminator, "Terminator");
  CreatePaletteConnector("Link1", ConnectorSegmentType.Orthogonal, DecoratorShape.Arrow);
  Palettes = new DiagramObjectCollection<Palette>()
  {
   new Palette(){Symbols =PaletteNodes, Title="Flow Shapes", ID="Flow Shapes" },
   new Palette(){Symbols = PaletteConnectors, Title = "Connectors" , IsExpanded = true},
  };
 }

 private void CreatePaletteNode(NodeFlowShapes flowShape, string id)
 {
  Node node = new Node()
  {
   ID = id,
   Shape = new FlowShape() { Type = NodeShapes.Flow, Shape = flowShape },
   Style = new ShapeStyle() {Fill="#6495ED", StrokeColor = "#757575" },
  };
  PaletteNodes.Add(node);
 }

 private void CreatePaletteConnector(string id, ConnectorSegmentType type, DecoratorShape decoratorShape)
 {
  Connector connector = new Connector()
  {
   ID = id,
   Type = type,
   SourcePoint = new DiagramPoint() { X = 0, Y = 0 },
   TargetPoint = new DiagramPoint() { X = 100, Y = 100 },
   Style = new ShapeStyle() { StrokeWidth = 1, StrokeColor = "#6495ED" },
   TargetDecorator = new DecoratorSettings()
   {
   &nbsp;Shape = decoratorShape,<br>&nbsp;&nbsp;&nbsp; Style = new ShapeStyle() { StrokeColor = "#6495ED", Fill = "#6495ED" }
   }
  };
  PaletteConnectors.Add(connector);
 }
}
Enables/Disables search option in symbol palette Property: SfSymbolPalette.EnableSearch

<SfSymbolPalette Height="600px" Palettes="@Palettes" EnableSearch="true"/>
@code
{
 public ObservableCollection<SymbolPalettePalette> Palettes;
 public ObservableCollection<Object> BasicShapes { get; set; }
 public ObservableCollection<Object> Connectors { get; set; }
 protected override void OnInitialized()
 {
  Palettes = new ObservableCollection<SymbolPalettePalette>();
  //Initialize the basic shapes for the symbol palette
  BasicShapes = new ObservableCollection<Object>()
  {
   new DiagramNode()
   {
    Id = "Rectangle",
    Shape = new DiagramShape()
    {
     Type = Shapes.Basic,
     BasicShape = Syncfusion.Blazor.Diagrams.BasicShapes.Rectangle
    }
   },
   new DiagramNode()
   {
    Id = "Ellipse",
    Shape = new DiagramShape()
    {
     Type = Shapes.Basic,
     BasicShape = Syncfusion.Blazor.Diagrams.BasicShapes.Ellipse
    }
   }
  };
  Palettes.Add(new SymbolPalettePalette()
  {
   Id = "BasicShapes",
   Expanded = true,
   Symbols = BasicShapes,
   Title = "Basic Shapes"
  });
  //Initializes connector symbols for the symbol palette.
  Connectors = new ObservableCollection<Object>()
  {
   new DiagramConnector()
   {
    Id = "Link1",
    Type = Segments.Orthogonal,
    SourcePoint = new ConnectorSourcePoint() { X = 0, Y = 0 },
    TargetPoint = new ConnectorTargetPoint() { X = 40, Y = 40 },
    Style = new ConnectorShapeStyle() { StrokeWidth = 1 },
    TargetDecorator = new ConnectorTargetDecorator() { Shape = DecoratorShapes.Arrow }
   },
   new DiagramConnector()
   {
    Id = "Link2",
    Type = Segments.Straight,
    SourcePoint = new ConnectorSourcePoint() { X = 0, Y = 0 },
    TargetPoint = new ConnectorTargetPoint() { X = 40, Y = 40 },
    Style = new ConnectorShapeStyle() { StrokeWidth = 1 },
    TargetDecorator = new ConnectorTargetDecorator() { Shape = DecoratorShapes.Arrow }
   },
  };
  Palettes.Add(new SymbolPalettePalette()
  {
   Id = "Connectors",
   Expanded = true,
   Symbols = Connectors,
   Title = "Connectors"
  });
 }
} 		Not supported
Defines the symbols to be ignore in search option Property: SfSymbolPalette.IgnoreSymbolsOnSearch

<SfSymbolPalette Height="600px" Palettes="@Palettes" IgnoreSymbolsOnSearch="@IgnoreSymbols"/>
@code
{
 public ObservableCollection<SymbolPalettePalette> Palettes;
 string[] IgnoreSymbols = new string[]{"Rectangle"};
 public ObservableCollection<Object> BasicShapes { get; set; }
 public ObservableCollection<Object> Connectors { get; set; }
 protected override void OnInitialized()
 {
  Palettes = new ObservableCollection<SymbolPalettePalette>();
  //Initialize the basic shapes for the symbol palette
  BasicShapes = new ObservableCollection<Object>()
  {
   new DiagramNode()
   {
    Id = "Rectangle",
    Shape = new DiagramShape()
    {
     Type = Shapes.Basic,
     BasicShape = Syncfusion.Blazor.Diagrams.BasicShapes.Rectangle
    }
   },
   new DiagramNode()
   {
    Id = "Ellipse",
    Shape = new DiagramShape()
    {
     Type = Shapes.Basic,
     BasicShape = Syncfusion.Blazor.Diagrams.BasicShapes.Ellipse
    }
   }
  };
  Palettes.Add(new SymbolPalettePalette()
  {
   Id = "BasicShapes",
   Expanded = true,
   Symbols = BasicShapes,
   Title = "Basic Shapes"
  });
  //Initializes connector symbols for the symbol palette.
  Connectors = new ObservableCollection<Object>()
  {
   new DiagramConnector()
   {
    Id = "Link1",
    Type = Segments.Orthogonal,
    SourcePoint = new ConnectorSourcePoint() { X = 0, Y = 0 },
    TargetPoint = new ConnectorTargetPoint() { X = 40, Y = 40 },
    Style = new ConnectorShapeStyle() { StrokeWidth = 1 },
    TargetDecorator = new ConnectorTargetDecorator() { Shape = DecoratorShapes.Arrow }
   },
   new DiagramConnector()
   {
    Id = "Link2",
    Type = Segments.Straight,
    SourcePoint = new ConnectorSourcePoint() { X = 0, Y = 0 },
    TargetPoint = new ConnectorTargetPoint() { X = 40, Y = 40 },
    Style = new ConnectorShapeStyle() { StrokeWidth = 1 },
    TargetDecorator = new ConnectorTargetDecorator() { Shape = DecoratorShapes.Arrow }
   },
  };
  Palettes.Add(new SymbolPalettePalette()
  {
   Id = "Connectors",
   Expanded = true,
   Symbols = Connectors,
   Title = "Connectors"
  });
 }
} 		Not supported

Events

Behavior API in SfDiagram API in SfDiagramComponent
Triggers when a node, connector or diagram is clicked Event: Clicked
<SfDiagram Height="600px">
 <DiagramEvents Created = "OnCreated"/>
</SfDiagram>
@code
{
 private void Clicked(IBlazorClickEventArgs args)
 {
  if (args.ActualObject != null) { Console.WriteLine("Clicked"); }
 }
} 		Event: Click
<SfDiagramComponent Width = "1000px" Height="1000px" Click="click"/>
@code
{
 private void click(ClickEventArgs args)
 {
  if (args.ActualObject != null) { Console.WriteLine("Clicked"); }
 }
}
Triggers when Diagram component is rendered Event: Created
<SfDiagram @ref="@Diagram" Height="600px">
 <DiagramEvents Created="OnCreated"/>
</SfDiagram>
@code
{
 SfDiagram Diagram;
 private void OnCreated(object args)
 {
  Diagram.SelectAll();
 }
} 		Event: Created
<SfDiagramComponent @ref="@Diagram" Width = "1000px" Height="1000px" Created="OnCreated"/>
@code
{
 SfDiagramComponent Diagram;
 private void OnCreated(object args)
 {
  Diagram.SelectAll();
 }
}
Triggers when a custom entry change is reverted or restored(undo/redo) Event: CustomHistoryChanged
<SfDiagram @ref="@Diagram" Height="600px">
 <DiagramEvents CustomHistoryChanged="OnCustomHistoryChanged"/>
</SfDiagram>
@code
{
 SfDiagram Diagram;
 private void OnCustomHistoryChanged(IBlazorCustomHistoryChangeArgs args)
 {

}
} 		Events: DiagramHistoryManager.Undo and DiagramHistoryManager.Redo
DiagramHistoryManager.Undo - Triggers when a custom entry change is reverted
DiagramHistoryManager.Redo - Triggers when a custom entry change is restored

<SfDiagramComponent Width="800px" Height="800px">
 <DiagramHistoryManager Undo="onCustomUndo" Redo="onCustomRedo"></DiagramHistoryManager>
</SfDiagramComponent>
@code
{
 private void onCustomUndo(HistoryEntryBase entry)
 {
  (entry.RedoObject) = entry.UndoObject.Clone() as Node;
  (entry.UndoObject as Node).AdditionalInfo[(entry.UndoObject as Node).ID] = "Start";
  entry.RedoObject = current;
 }

 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;
 }
}
Triggers when the diagram layout is rendered completely Event: DataLoaded
<SfDiagram @ref="@Diagram" Height="600px">
 <DiagramEvents DataLoaded ="OnDataLoaded"/>
</SfDiagram>
@code
{
 SfDiagram Diagram;
 private void OnDataLoaded(IDataLoadedEventArgs args)
 {

}
} 		Event: DataLoaded
<SfDiagramComponent @ref="@Diagram" Width = "1000px" Height="1000px" DataLoaded="OnDataLoaded"/>
@code
{
 SfDiagramComponent Diagram;
 private void OnDataLoaded(object args)
 {

 }
}
Triggers when a symbol is dragged into diagram from symbol palette Event: DragEnter
<SfDiagram @ref="@Diagram" Height="600px">
 <DiagramEvents DragEnter ="OnDragEnter"/>
</SfDiagram>
@code
{
 SfDiagram Diagram;
 private void OnDragEnter(IBlazorDragEnterEventArgs args)
 {

}
} 		Event: DragStart
<SfDiagramComponent @ref="@Diagram" Width = "1000px" Height="1000px" DragStart="OnDragStart"/>
@code
{
 SfDiagramComponent Diagram;
 private void OnDragStart(DragStartEventArgs args)
 {

 }
}
Triggers when an element drags over another diagram element Not supported Event: Dragging
<SfDiagramComponent @ref="@Diagram" Width = "1000px" Height="1000px" Dragging="OnDragging "/>
@code
{
 SfDiagramComponent Diagram;
 private void OnDragging(DraggingEventArgs args)
 {

 }
}
Triggers when a symbol is dragged outside of the diagram Event: DragLeave
<SfDiagram @ref="@Diagram" Height="600px">
 <DiagramEvents DragLeave ="OnDragLeave"/>
</SfDiagram>
@code
{
 SfDiagram Diagram;
 private void OnDragLeave(IBlazorDragLeaveEventArgs args)
 {

}
} 		Event: DragLeave
<SfDiagramComponent @ref="@Diagram" Width = "1000px" Height="1000px" DragLeave="OnDragLeave"/>
@code
{
 SfDiagramComponent Diagram;
 private void OnDragLeave(DragLeaveEventArgs args)
 {

 }
}
Triggers when a Fixed User Handle item is clicked Event: FixedUserHandleClick
<SfDiagram @ref="@Diagram" Height="600px">
 <DiagramEvents FixedUserHandleClick ="OnFixedUserHandleClick"/>
</SfDiagram>
@code
{
 SfDiagram Diagram;
 private void OnFixedUserHandleClick(FixedUserHandleClickEventArgs args)
 {

}
} 		Event: FixedUserHandleClick
<SfDiagramComponent @ref="@Diagram" Width = "1000px" Height="1000px" FixedUserHandleClick ="OnFixedUserHandleClick"/>
@code
{
 SfDiagramComponent Diagram;
 private void OnFixedUserHandleClick(FixedUserHandleClickEventArgs args)
 {

 }
}
Triggers when a change is reverted or restored(undo/redo) Event: HistoryChanged
<SfDiagram @ref="@Diagram" Height="600px">
 <DiagramEvents HistoryChanged ="OnHistoryChanged"/>
</SfDiagram>
@code
{
 SfDiagram Diagram;
 private void OnHistoryChanged(IBlazorHistoryChangeArgs args)
 {

}
} 		Event: HistoryChanged
<SfDiagramComponent @ref="@Diagram" Width = "1000px" Height="1000px" HistoryChanged ="OnHistoryChanged"/>
@code
{
 SfDiagramComponent Diagram;
 private void OnHistoryChanged(HistoryChangedEventArgs args)
 {

 }
}
Triggered when mouse enters a node/connector Event: MouseEnter
<SfDiagram @ref="@Diagram" Height="600px">
 <DiagramEvents MouseEnter="@MouseEnter"/>
</SfDiagram>
@code
{
 SfDiagram Diagram;
 private void MouseEnter(IBlazorMouseEventArgs args)
 {

}
} 		Event: MouseEnter
<SfDiagramComponent @ref="@Diagram" Width = "1000px" Height="1000px" MouseEnter="@MouseEnter"/>
@code
{
 SfDiagramComponent Diagram;
 private void MouseEnter(DiagramElementMouseEventArgs args)
 {

 }
}
Triggers when the mouse pointer rests on the node/connector Not supported Event: MouseHover
<SfDiagramComponent @ref="@Diagram" Width = "1000px" Height="1000px" MouseHover="@MouseHover"/>
@code
{
 SfDiagramComponent Diagram;
 private void MouseHover(DiagramElementMouseEventArgs args)
 {

 }
}
Triggered when mouse leaves node/connector Event: MouseLeave
<SfDiagram @ref="@Diagram" Height="600px">
 <DiagramEvents MouseLeave="@MouseLeave"/>
</SfDiagram>
@code
{
 SfDiagram Diagram;
 private void MouseLeave(IBlazorMouseEventArgs args)
 {

}
} 		Event: MouseLeave
<SfDiagramComponent @ref="@Diagram" Width = "1000px" Height="1000px" MouseLeave="@MouseLeave"/>
@code
{
 SfDiagramComponent Diagram;
 private void MouseLeave(DiagramElementMouseEventArgs args)
 {

 }
}
Triggers before the connector’s source or target point is connect or disconnect from the source or target Event: OnConnectionChange
Prevent the connection or disconnection of the connector by using Cancel arguments whether the State in Changing
<SfDiagram @ref="@Diagram" Height="600px">
 <DiagramEvents OnConnectionChange ="@OnConnectionChange">
</SfDiagram>
@code
{
 SfDiagram Diagram;
 private void OnConnectionChange(IBlazorConnectionChangeEventArgs args)
 {
if(args.State == EventState.Changing){args.Cancel = true;}
}
} 		Event: ConnectionChanging
Prevent the connection or disconnection of the connector by using Cancel arguments
<SfDiagramComponent ConnectionChanging="OnConnectionChanging"/>
@code
{
 SfDiagram Diagram;
 private void OnConnectionChanging(ConnectionChangingEventArgs args)
 {
args.Cancel = true;
}
}
Triggers when the connector’s source or target point is connected or disconnected from the source or target Event: OnConnectionChange
While the connection is changed then State is in Changed state
<SfDiagram @ref="@Diagram" Height="600px">
 <DiagramEvents OnConnectionChange ="@OnConnectionChange">
</SfDiagram>
@code
{
 SfDiagram Diagram;
 private void OnConnectionChange(IBlazorConnectionChangeEventArgs args)
 {
if(args.State == EventState.Changed){ }
}
} 		Event: ConnectionChanged
<SfDiagramComponent ConnectionChanged="OnConnectionChanged"/>
@code
{
 SfDiagram Diagram;
 private void OnConnectionChanged(ConnectionChangedEventArgs args)
 {}
}
Triggers when a node, connector or diagram model is clicked twice Event: OnDoubleClick
<SfDiagram @ref="@Diagram" Height="600px">
 <DiagramEvents OnDoubleClick ="@OnDoubleClick ">
</SfDiagram>
@code
{
 SfDiagram Diagram;
 private void OnDoubleClick (IBlazorDoubleClickEventArgs args)
 {
if(args.State == EventState.Changed){ }
}
} 		Not supported
Triggers when a symbol is dragged and dropped from the symbol palette to the drawing area Event: OnDrop
<SfDiagram @ref="@Diagram" Height="600px">
 <DiagramEvents OnDrop ="@OnDrop">
</SfDiagram>
@code
{
 SfDiagram Diagram;
 private void OnDrop(IBlazorDropEventArgs args)
 {
}
} 		Event: DragDrop
<SfDiagramComponent DragDrop="OnDragDrop"/>
@code
{
 SfDiagram Diagram;
 private void OnDragDrop(DropEventArgs args)
 {}
}
Triggers when a user is pressing a key Event: OnKeyDown
<SfDiagram @ref="@Diagram" Height="600px">
 <DiagramEvents OnKeyDown ="@OnKeyDown">
</SfDiagram>
@code
{
 SfDiagram Diagram;
 private void OnKeyDown(IKeyEventArgs args)
 {
}
} 		Event: KeyDown
<SfDiagramComponent KeyDown="OnKeyDown"/>
@code
{
 SfDiagram Diagram;
 private void OnKeyDown(KeyEventArgs args)
 {}
}
Triggers when a user is release a key Event: OnKeyUp
<SfDiagram @ref="@Diagram" Height="600px">
 <DiagramEvents OnKeyUp ="@OnKeyUp">
</SfDiagram>
@code
{
 SfDiagram Diagram;
 private void OnKeyUp(IKeyEventArgs args)
 {
}
} 		Event: KeyUp
<SfDiagramComponent KeyUp="@OnKeyUp"/>
@code
{
 SfDiagram Diagram;
 private void OnKeyUp(KeyEventArgs args)
 {}
}
Triggers while dragging the elements in the diagram Event: OnPositionChange
<SfDiagram @ref="@Diagram" Height="600px">
 <DiagramEvents OnPositionChange="@PositionChanged">
</SfDiagram>
@code
{
 SfDiagram Diagram;
 private void PositionChanged(IBlazorDraggingEventArgs args)
 {
if(args.State == State.Progress){ args.Cancel = true; }}
} 		Event: PositionChanging
<SfDiagramComponent PositionChanging="@PositionChanging"/>
@code
{
 private void PositionChanging(PositionChangingEventArgs args)
 {}
}
Triggers when the node’s/connector’s position is changed Event: OnPositionChange
<SfDiagram @ref="@Diagram" Height="600px">
 <DiagramEvents OnPositionChange="@PositionChanged">
</SfDiagram>
@code
{
 SfDiagram Diagram;
 private void PositionChanged(IBlazorDraggingEventArgs args)
 {
if(args.State == State.Completed){ args.Cancel = true; }}
} 		Event: PositionChanged
<SfDiagramComponent PositionChanged="@PositionChanged"/>
@code
{
 private void PositionChanged(PositionChangedEventArgs args)
 {}
}
Triggers before the diagram elements are rotated Event: OnRotateChange
<SfDiagram @ref="@Diagram" Height="600px">
 <DiagramEvents OnRotateChange="@OnRotateChange">
</SfDiagram>
@code
{
 SfDiagram Diagram;
 private void OnRotateChange(IRotationEventArgs args)
 {
if(args.State == State.Progress){ args.Cancel = true; }}
} 		Event: RotationChanging
<SfDiagramComponent RotationChanging="@RotationChanging"/>
@code
{
 private void RotationChanging(RotationChangingEventArgs args)
 { args.Cancel = true; }
}
Triggers when the diagram elements are rotated Event: OnRotateChange
<SfDiagram @ref="@Diagram" Height="600px">
 <DiagramEvents OnRotateChange="@OnRotateChange">
</SfDiagram>
@code
{
 SfDiagram Diagram;
 private void OnRotateChange(IRotationEventArgs args)
 {
if(args.State == State.Completed){ }}
} 		Event: RotationChanged
<SfDiagramComponent RotationChanged="@RotationChanged"/>
@code
{
 private void RotationChanging(RotationChanged args)
 {}
}
Triggers before a node is resize Event: OnSizeChange
<SfDiagram @ref="@Diagram" Height="600px">
 <DiagramEvents OnSizeChange="@OnSizeChange">
</SfDiagram>
@code
{
 SfDiagram Diagram;
 private void OnSizeChange(ISizeChangeEventArgs args)
 {
if(args.State == State.Progress){ args.Cancel = true; }}
} 		Event: SizeChanging
<SfDiagramComponent SizeChanging="@SizeChanging"/>
@code
{
 private void SizeChanging(SizeChangingEventArgs args)
 { args.Cancel = true; }
}
Triggers when a node is resized Event: OnSizeChange
<SfDiagram @ref="@Diagram" Height="600px">
 <DiagramEvents OnSizeChange="@OnSizeChange">
</SfDiagram>
@code
{
 SfDiagram Diagram;
 private void OnSizeChange(ISizeChangeEventArgs args)
 {
if(args.State == State.Completed){ }}
} 		Event: SizeChanged
<SfDiagramComponent SizeChanged="@SizeChanged"/>
@code
{
 private void SizeChanged(SizeChangedEventArgs args)
 {}
}
Triggers when a mouseDown on the user handle Event: OnUserHandleMouseDown
<SfDiagram @ref="@Diagram" Height="600px">
 <DiagramEvents OnUserHandleMouseDown="@OnUserHandleMouseDown">
</SfDiagram>
@code
{
 SfDiagram Diagram;
 private void OnUserHandleMouseDown(UserHandleEventsArgs args)
 {

} 		Use the custom tool option to handle the user handle mouse actions

<SfDiagramComponent @ref="@Diagram" Height="640px" Nodes="@nodes" SelectionSettings="@selectionSettings" GetCustomTool="@GetCustomTool" />
@code
{
 public SfDiagramComponent Diagram;
 public DiagramObjectCollection<Node> nodes { get; set; }
 UserHandle userhandle;
 UserHandle handle;
 DiagramSelectionSettings selectionSettings = new DiagramSelectionSettings();
 protected override void OnInitialized()
 {
  InitDiagramModel();
  }
 public InteractionControllerBase GetCustomTool(DiagramElementAction action, string id)
 {
  InteractionControllerBase tool = null;
  tool = new AddDeleteTool(Diagram);
  return tool;
 }
 public class AddDeleteTool : DragController
 {
  SfDiagramComponent sfDiagram;
  public AddDeleteTool(SfDiagramComponent Diagram) : base(Diagram)
  {
   sfDiagram = Diagram;
  }
  public override void OnMouseDown(DiagramMouseEventArgs args)
  {
   base.OnMouseDown(args);
   this.InAction = true;
  }
  public override void OnMouseMove(DiagramMouseEventArgs args)
  {
   base.OnMouseMove(args);
   this.InAction = true;
  }
  public override void OnMouseUp(DiagramMouseEventArgs args)
  {
   base.OnMouseUp(args);
   this.InAction = true;
  }
  public override void OnMouseLeave(DiagramMouseEventArgs args)
  {
   base.OnMouseLeave(args);
   this.InAction = true;
  }
 }
 private void InitDiagramModel()
 {
  handle = new UserHandle()
  {
   Name = "clone",
   PathData = "M60.3,18H27.5c-3,0-5.5,2.4-5.5,5.5v38.2h5.5V23.5h32.7V18z M68.5,28.9h-30c-3,0-5.5,2.4-5.5,5.5v38.2c0,3,2.4,5.5,5.5,5.5h30c3,0,5.5-2.4,5.5-5.5V34.4C73.9,31.4,71.5,28.9,68.5,28.9z M68.5,72.5h-30V34.4h30V72.5z",
   Visible = true,
   Offset = 0,
   Side = Direction.Bottom,
   Margin = new DiagramThickness() { Top = 0, Bottom = 0, Left = 0, Right = 0 }
  };
  DiagramObjectCollection<UserHandle> cloneHandle = new <br>&nbsp;&nbsp;DiagramObjectCollection<UserHandle>()
  {
   handle
  };
  selectionSettings.UserHandles = cloneHandle;
  userhandle = handle;
  userhandle.VisibleTarget = VisibleTarget.Node | VisibleTarget.Connector;
 }
}
Triggers when a mouseEnter on the user handle Event: OnUserHandleMouseEnter
<SfDiagram @ref="@Diagram" Height="600px">
 <DiagramEvents OnUserHandleMouseEnter="@OnUserHandleMouseEnter">
</SfDiagram>
@code
{
 SfDiagram Diagram;
 private void OnUserHandleMouseEnter(UserHandleEventsArgs args)
 {

} 		Use the custom tool option to handle the user handle mouse actions

<SfDiagramComponent @ref="@Diagram" Height="640px" Nodes="@nodes" SelectionSettings="@selectionSettings" GetCustomTool="@GetCustomTool" />
@code
{
 public SfDiagramComponent Diagram;
 public DiagramObjectCollection<Node> nodes { get; set; }
 UserHandle userhandle;
 UserHandle handle;
 DiagramSelectionSettings selectionSettings = new DiagramSelectionSettings();
 protected override void OnInitialized()
 {
  InitDiagramModel();
  }
 public InteractionControllerBase GetCustomTool(DiagramElementAction action, string id)
 {
  InteractionControllerBase tool = null;
  tool = new AddDeleteTool(Diagram);
  return tool;
 }
 public class AddDeleteTool : DragController
 {
  SfDiagramComponent sfDiagram;
  public AddDeleteTool(SfDiagramComponent Diagram) : base(Diagram)
  {
   sfDiagram = Diagram;
  }
  public override void OnMouseDown(DiagramMouseEventArgs args)
  {
   base.OnMouseDown(args);
   this.InAction = true;
  }
  public override void OnMouseMove(DiagramMouseEventArgs args)
  {
   base.OnMouseMove(args);
   this.InAction = true;
  }
  public override void OnMouseUp(DiagramMouseEventArgs args)
  {
   base.OnMouseUp(args);
   this.InAction = true;
  }
  public override void OnMouseLeave(DiagramMouseEventArgs args)
  {
   base.OnMouseLeave(args);
   this.InAction = true;
  }
 }
 private void InitDiagramModel()
 {
  handle = new UserHandle()
  {
   Name = "clone",
   PathData = "M60.3,18H27.5c-3,0-5.5,2.4-5.5,5.5v38.2h5.5V23.5h32.7V18z M68.5,28.9h-30c-3,0-5.5,2.4-5.5,5.5v38.2c0,3,2.4,5.5,5.5,5.5h30c3,0,5.5-2.4,5.5-5.5V34.4C73.9,31.4,71.5,28.9,68.5,28.9z M68.5,72.5h-30V34.4h30V72.5z",
   Visible = true,
   Offset = 0,
   Side = Direction.Bottom,
   Margin = new DiagramThickness() { Top = 0, Bottom = 0, Left = 0, Right = 0 }
  };
  DiagramObjectCollection<UserHandle> cloneHandle = new <br>&nbsp;&nbsp;DiagramObjectCollection<UserHandle>()
  {
   handle
  };
  selectionSettings.UserHandles = cloneHandle;
  userhandle = handle;
  userhandle.VisibleTarget = VisibleTarget.Node | VisibleTarget.Connector;
 }
}
Triggers when a mouseLeave on the user handle Event: OnUserHandleMouseLeave
<SfDiagram @ref="@Diagram" Height="600px">
 <DiagramEvents OnUserHandleMouseLeave="@OnUserHandleMouseLeave">
</SfDiagram>
@code
{
 SfDiagram Diagram;
 private void OnUserHandleMouseLeave(UserHandleEventsArgs args)
 {

} 		Use the custom tool option to handle the user handle mouse actions

<SfDiagramComponent @ref="@Diagram" Height="640px" Nodes="@nodes" SelectionSettings="@selectionSettings" GetCustomTool="@GetCustomTool" />
@code
{
 public SfDiagramComponent Diagram;
 public DiagramObjectCollection<Node> nodes { get; set; }
 UserHandle userhandle;
 UserHandle handle;
 DiagramSelectionSettings selectionSettings = new DiagramSelectionSettings();
 protected override void OnInitialized()
 {
  InitDiagramModel();
  }
 public InteractionControllerBase GetCustomTool(DiagramElementAction action, string id)
 {
  InteractionControllerBase tool = null;
  tool = new AddDeleteTool(Diagram);
  return tool;
 }
 public class AddDeleteTool : DragController
 {
  SfDiagramComponent sfDiagram;
  public AddDeleteTool(SfDiagramComponent Diagram) : base(Diagram)
  {
   sfDiagram = Diagram;
  }
  public override void OnMouseDown(DiagramMouseEventArgs args)
  {
   base.OnMouseDown(args);
   this.InAction = true;
  }
  public override void OnMouseMove(DiagramMouseEventArgs args)
  {
   base.OnMouseMove(args);
   this.InAction = true;
  }
  public override void OnMouseUp(DiagramMouseEventArgs args)
  {
   base.OnMouseUp(args);
   this.InAction = true;
  }
  public override void OnMouseLeave(DiagramMouseEventArgs args)
  {
   base.OnMouseLeave(args);
   this.InAction = true;
  }
 }
 private void InitDiagramModel()
 {
  handle = new UserHandle()
  {
   Name = "clone",
   PathData = "M60.3,18H27.5c-3,0-5.5,2.4-5.5,5.5v38.2h5.5V23.5h32.7V18z M68.5,28.9h-30c-3,0-5.5,2.4-5.5,5.5v38.2c0,3,2.4,5.5,5.5,5.5h30c3,0,5.5-2.4,5.5-5.5V34.4C73.9,31.4,71.5,28.9,68.5,28.9z M68.5,72.5h-30V34.4h30V72.5z",
   Visible = true,
   Offset = 0,
   Side = Direction.Bottom,
   Margin = new DiagramThickness() { Top = 0, Bottom = 0, Left = 0, Right = 0 }
  };
  DiagramObjectCollection<UserHandle> cloneHandle = new <br>&nbsp;&nbsp;DiagramObjectCollection<UserHandle>()
  {
   handle
  };
  selectionSettings.UserHandles = cloneHandle;
  userhandle = handle;
  userhandle.VisibleTarget = VisibleTarget.Node | VisibleTarget.Connector;
 }
}
Triggers when a mouse up on the user handle Event: OnUserHandleMouseUp
<SfDiagram @ref="@Diagram" Height="600px">
 <DiagramEvents OnUserHandleMouseUp="@OnUserHandleMouseUp">
</SfDiagram>
@code
{
 SfDiagram Diagram;
 private void OnUserHandleMouseUp(UserHandleEventsArgs args)
 {

} 		Use the custom tool option to handle the user handle mouse actions

<SfDiagramComponent @ref="@Diagram" Height="640px" Nodes="@nodes" SelectionSettings="@selectionSettings" GetCustomTool="@GetCustomTool" />
@code
{
 public SfDiagramComponent Diagram;
 public DiagramObjectCollection<Node> nodes { get; set; }
 UserHandle userhandle;
 UserHandle handle;
 DiagramSelectionSettings selectionSettings = new DiagramSelectionSettings();
 protected override void OnInitialized()
 {
  InitDiagramModel();
  }
 public InteractionControllerBase GetCustomTool(DiagramElementAction action, string id)
 {
  InteractionControllerBase tool = null;
  tool = new AddDeleteTool(Diagram);
  return tool;
 }
 public class AddDeleteTool : DragController
 {
  SfDiagramComponent sfDiagram;
  public AddDeleteTool(SfDiagramComponent Diagram) : base(Diagram)
  {
   sfDiagram = Diagram;
  }
  public override void OnMouseDown(DiagramMouseEventArgs args)
  {
   base.OnMouseDown(args);
   this.InAction = true;
  }
  public override void OnMouseMove(DiagramMouseEventArgs args)
  {
   base.OnMouseMove(args);
   this.InAction = true;
  }
  public override void OnMouseUp(DiagramMouseEventArgs args)
  {
   base.OnMouseUp(args);
   this.InAction = true;
  }
  public override void OnMouseLeave(DiagramMouseEventArgs args)
  {
   base.OnMouseLeave(args);
   this.InAction = true;
  }
 }
 private void InitDiagramModel()
 {
  handle = new UserHandle()
  {
   Name = "clone",
   PathData = "M60.3,18H27.5c-3,0-5.5,2.4-5.5,5.5v38.2h5.5V23.5h32.7V18z M68.5,28.9h-30c-3,0-5.5,2.4-5.5,5.5v38.2c0,3,2.4,5.5,5.5,5.5h30c3,0,5.5-2.4,5.5-5.5V34.4C73.9,31.4,71.5,28.9,68.5,28.9z M68.5,72.5h-30V34.4h30V72.5z",
   Visible = true,
   Offset = 0,
   Side = Direction.Bottom,
   Margin = new DiagramThickness() { Top = 0, Bottom = 0, Left = 0, Right = 0 }
  };
  DiagramObjectCollection<UserHandle> cloneHandle = new <br>&nbsp;&nbsp;DiagramObjectCollection<UserHandle>()
  {
   handle
  };
  selectionSettings.UserHandles = cloneHandle;
  userhandle = handle;
  userhandle.VisibleTarget = VisibleTarget.Node | VisibleTarget.Connector;
 }
}
Triggers once the node or connector property changed Event: PropertyChanged
<SfDiagram @ref="@Diagram" Height="600px">
 <DiagramEvents PropertyChanged="@PropertyChanged">
</SfDiagram>
@code
{
 SfDiagram Diagram;
 private void PropertyChanged(IBlazorPropertyChangeEventArgs args)
 {

} 		Event: PropertyChanged
<SfDiagramComponent PropertyChanged="@PropertyChanged"/>
@code
{
 private void PropertyChanged(PropertyChangedEventArgs args)
 {}
}
Triggers before the selection is change in the diagram Event: SelectionChanged
<SfDiagram @ref="@Diagram" Height="600px">
 <DiagramEvents SelectionChanged="@SelectionChanged">
</SfDiagram>
@code
{
 SfDiagram Diagram;
 private void SelectionChanged(IBlazorSelectionChangeEventArgs args)
 {

} 		Event: SelectionChanging
<SfDiagramComponent SelectionChanging="@SelectionChanging"/>
@code
{
 private void SelectionChanging(SelectionChangingEventArgs args)
 {}
}
Triggers when the selection is changed in the diagram Event: SelectionChanged
<SfDiagram @ref="@Diagram" Height="600px">
 <DiagramEvents SelectionChanged="@SelectionChanged">
</SfDiagram>
@code
{
 SfDiagram Diagram;
 private void SelectionChanged(IBlazorSelectionChangeEventArgs args)
 {
if(args.State == State.Progress){}
} 		Event: SelectionChanged
<SfDiagramComponent SelectionChanged="@SelectionChanged"/>
@code
{
 private void SelectionChanged(SelectionChangedEventArgs args)
 {}
}
Triggers when the node and connector’s label is changing in the diagram Event: TextEdited
<SfDiagram @ref="@Diagram" Height="600px">
 <DiagramEvents TextEdited="@TextEdited">
</SfDiagram>
@code
{
 SfDiagram Diagram;
 private void TextEdited(IBlazorTextEditEventArgs args)
 {
if(args.State == State.Progress){}
} 		Event: TextChanging
<SfDiagramComponent TextChanging="@TextChanging"/>
@code
{
 private void TextChanging(TextChangeEventArgs args)
 {}
}
Triggers when the node’s/connector’s label is changed in the diagram Event: TextEdited
<SfDiagram @ref="@Diagram" Height="600px">
 <DiagramEvents TextEdited="@TextEdited">
</SfDiagram>
@code
{
 SfDiagram Diagram;
 private void TextEdited(IBlazorTextEditEventArgs args)
 {
if(args.State == State.Progress){}
} 		Event: TextChanged
<SfDiagramComponent TextChanged="@TextChanged"/>
@code
{
 private void TextChanged(TextChangeEventArgs args)
 {}
}
Triggers before the node/connector is add or remove from the diagram Not supported Event: CollectionChanging
<SfDiagramComponent CollectionChanging="@CollectionChanging"/>
@code
{
 private void CollectionChanging(CollectionChangingEventArgs args)
 {}
}
Triggers when the node/connector is added or removed from the diagram Not supported Event: CollectionChanged
<SfDiagramComponent CollectionChanged="@CollectionChanged"/>
@code
{
 private void CollectionChanged (CollectionChangedEventArgs args)
 {}
}
Triggers when the scrollbar is updated Not supported Event: ScrollChanged
<SfDiagramComponent ScrollChanged="@ScrollChanged"/>
@code
{
 private void ScrollChanged(ScrollChangedEventArgs args)
 {}
}
Triggers when the connector’s segment collection is updated Not supported Event: SegmentCollectionChange
<SfDiagramComponent SegmentCollectionChange="@SegmentCollectionChange"/>
@code
{
 private void SegmentCollectionChange(SegmentCollectionChangeEventArgs args)
 {}
}
Triggers while dragging the connector’s source end in the diagram Not supported Event: SourcePointChanging
<SfDiagramComponent SourcePointChanging="@SourcePointChanging"/>
@code
{
 private void SourcePointChanging(EndPointChangingEventArgs args)
 {}
}
Triggers when the connector’s source point is changed Not supported Event: SourcePointChanged
<SfDiagramComponent SourcePointChanged="@SourcePointChanged"/>
@code
{
 private void SourcePointChanged(EndPointChangedEventArgs args)
 {}
}
Triggers while dragging the connector’s source end in the diagram Not supported Event: SourcePointChanging
<SfDiagramComponent SourcePointChanging="@SourcePointChanging"/>
@code
{
 private void SourcePointChanging(EndPointChangingEventArgs args)
 {}
}
Triggers while dragging the connector’s target end in the diagram Not supported Event: TargetPointChanging
<SfDiagramComponent TargetPointChanging="@TargetPointChanging"/>
@code
{
 private void TargetPointChanging(EndPointChangingEventArgs args)
 {}
}
Triggers when the connector’s target point is changed Not supported Event: TargetPointChanged
<SfDiagramComponent TargetPointChanged="@TargetPointChanged"/>
@code
{
 private void TargetPointChanged(EndPointChangedEventArgs args)
 {}
}