diff --git a/blazor-toc.html b/blazor-toc.html
index 07f35e42a5..6d9d16c414 100644
--- a/blazor-toc.html
+++ b/blazor-toc.html
@@ -2455,6 +2455,9 @@
Organizational Chart
+
+ Flowchart Layout
+
Mind Map Layout
diff --git a/blazor/diagram/images/FlowShapes_Connector.png b/blazor/diagram/images/FlowShapes_Connector.png
new file mode 100644
index 0000000000..2b9a53a2a3
Binary files /dev/null and b/blazor/diagram/images/FlowShapes_Connector.png differ
diff --git a/blazor/diagram/images/FlowShapes_Data.png b/blazor/diagram/images/FlowShapes_Data.png
new file mode 100644
index 0000000000..35adb71945
Binary files /dev/null and b/blazor/diagram/images/FlowShapes_Data.png differ
diff --git a/blazor/diagram/images/FlowShapes_Decision.png b/blazor/diagram/images/FlowShapes_Decision.png
new file mode 100644
index 0000000000..dd0528fa58
Binary files /dev/null and b/blazor/diagram/images/FlowShapes_Decision.png differ
diff --git a/blazor/diagram/images/FlowShapes_DirectData.png b/blazor/diagram/images/FlowShapes_DirectData.png
new file mode 100644
index 0000000000..94bc4bd435
Binary files /dev/null and b/blazor/diagram/images/FlowShapes_DirectData.png differ
diff --git a/blazor/diagram/images/FlowShapes_Document.png b/blazor/diagram/images/FlowShapes_Document.png
new file mode 100644
index 0000000000..51a44fdeef
Binary files /dev/null and b/blazor/diagram/images/FlowShapes_Document.png differ
diff --git a/blazor/diagram/images/FlowShapes_ManualInput.png b/blazor/diagram/images/FlowShapes_ManualInput.png
new file mode 100644
index 0000000000..1e80582eaf
Binary files /dev/null and b/blazor/diagram/images/FlowShapes_ManualInput.png differ
diff --git a/blazor/diagram/images/FlowShapes_ManualOperation.png b/blazor/diagram/images/FlowShapes_ManualOperation.png
new file mode 100644
index 0000000000..1f7903a2d0
Binary files /dev/null and b/blazor/diagram/images/FlowShapes_ManualOperation.png differ
diff --git a/blazor/diagram/images/FlowShapes_MultiDocument.png b/blazor/diagram/images/FlowShapes_MultiDocument.png
new file mode 100644
index 0000000000..52191c0294
Binary files /dev/null and b/blazor/diagram/images/FlowShapes_MultiDocument.png differ
diff --git a/blazor/diagram/images/FlowShapes_OffPageReference.png b/blazor/diagram/images/FlowShapes_OffPageReference.png
new file mode 100644
index 0000000000..e358930057
Binary files /dev/null and b/blazor/diagram/images/FlowShapes_OffPageReference.png differ
diff --git a/blazor/diagram/images/FlowShapes_PreDefinedProcess.png b/blazor/diagram/images/FlowShapes_PreDefinedProcess.png
new file mode 100644
index 0000000000..4e3a2071ce
Binary files /dev/null and b/blazor/diagram/images/FlowShapes_PreDefinedProcess.png differ
diff --git a/blazor/diagram/images/FlowShapes_Preparation.png b/blazor/diagram/images/FlowShapes_Preparation.png
new file mode 100644
index 0000000000..caeb18de65
Binary files /dev/null and b/blazor/diagram/images/FlowShapes_Preparation.png differ
diff --git a/blazor/diagram/images/FlowShapes_Process.png b/blazor/diagram/images/FlowShapes_Process.png
new file mode 100644
index 0000000000..d6e83d1eb7
Binary files /dev/null and b/blazor/diagram/images/FlowShapes_Process.png differ
diff --git a/blazor/diagram/images/FlowShapes_StoredData.png b/blazor/diagram/images/FlowShapes_StoredData.png
new file mode 100644
index 0000000000..fd1b6bd273
Binary files /dev/null and b/blazor/diagram/images/FlowShapes_StoredData.png differ
diff --git a/blazor/diagram/images/FlowShapes_Terminator.png b/blazor/diagram/images/FlowShapes_Terminator.png
new file mode 100644
index 0000000000..eed31a23c8
Binary files /dev/null and b/blazor/diagram/images/FlowShapes_Terminator.png differ
diff --git a/blazor/diagram/images/Flowchart_CustomYesOrNoBranches.png b/blazor/diagram/images/Flowchart_CustomYesOrNoBranches.png
new file mode 100644
index 0000000000..cce84ce5ed
Binary files /dev/null and b/blazor/diagram/images/Flowchart_CustomYesOrNoBranches.png differ
diff --git a/blazor/diagram/images/Flowchart_HorizontalLeftAndRightBranches.png b/blazor/diagram/images/Flowchart_HorizontalLeftAndRightBranches.png
new file mode 100644
index 0000000000..c3813e0b7a
Binary files /dev/null and b/blazor/diagram/images/Flowchart_HorizontalLeftAndRightBranches.png differ
diff --git a/blazor/diagram/images/Flowchart_HorizontalRightAndLeftBranches.png b/blazor/diagram/images/Flowchart_HorizontalRightAndLeftBranches.png
new file mode 100644
index 0000000000..3cfc1c4a0b
Binary files /dev/null and b/blazor/diagram/images/Flowchart_HorizontalRightAndLeftBranches.png differ
diff --git a/blazor/diagram/images/Flowchart_HorizontalRightAndSameBranches.png b/blazor/diagram/images/Flowchart_HorizontalRightAndSameBranches.png
new file mode 100644
index 0000000000..b1af3db0a8
Binary files /dev/null and b/blazor/diagram/images/Flowchart_HorizontalRightAndSameBranches.png differ
diff --git a/blazor/diagram/images/Flowchart_HorizontalSameAndRightBranches.png b/blazor/diagram/images/Flowchart_HorizontalSameAndRightBranches.png
new file mode 100644
index 0000000000..c974fcd25b
Binary files /dev/null and b/blazor/diagram/images/Flowchart_HorizontalSameAndRightBranches.png differ
diff --git a/blazor/diagram/images/Flowchart_HorizontalSameBranches.png b/blazor/diagram/images/Flowchart_HorizontalSameBranches.png
new file mode 100644
index 0000000000..dfd1d10027
Binary files /dev/null and b/blazor/diagram/images/Flowchart_HorizontalSameBranches.png differ
diff --git a/blazor/diagram/images/Flowchart_Layout.png b/blazor/diagram/images/Flowchart_Layout.png
new file mode 100644
index 0000000000..59114fb82d
Binary files /dev/null and b/blazor/diagram/images/Flowchart_Layout.png differ
diff --git a/blazor/diagram/images/Flowchart_LeftToRight.png b/blazor/diagram/images/Flowchart_LeftToRight.png
new file mode 100644
index 0000000000..2c4ae05806
Binary files /dev/null and b/blazor/diagram/images/Flowchart_LeftToRight.png differ
diff --git a/blazor/diagram/images/Flowchart_VerticalLeftAndRightBranches.png b/blazor/diagram/images/Flowchart_VerticalLeftAndRightBranches.png
new file mode 100644
index 0000000000..a31cfc015a
Binary files /dev/null and b/blazor/diagram/images/Flowchart_VerticalLeftAndRightBranches.png differ
diff --git a/blazor/diagram/images/Flowchart_VerticalRightAndLeftBranches.png b/blazor/diagram/images/Flowchart_VerticalRightAndLeftBranches.png
new file mode 100644
index 0000000000..a549cec67d
Binary files /dev/null and b/blazor/diagram/images/Flowchart_VerticalRightAndLeftBranches.png differ
diff --git a/blazor/diagram/images/Flowchart_VerticalRightAndSameBranches.png b/blazor/diagram/images/Flowchart_VerticalRightAndSameBranches.png
new file mode 100644
index 0000000000..fede549147
Binary files /dev/null and b/blazor/diagram/images/Flowchart_VerticalRightAndSameBranches.png differ
diff --git a/blazor/diagram/images/Flowchart_VerticalSameAndRightBranches.png b/blazor/diagram/images/Flowchart_VerticalSameAndRightBranches.png
new file mode 100644
index 0000000000..1a9be0fe95
Binary files /dev/null and b/blazor/diagram/images/Flowchart_VerticalSameAndRightBranches.png differ
diff --git a/blazor/diagram/images/Flowchart_VerticalSameBranches.png b/blazor/diagram/images/Flowchart_VerticalSameBranches.png
new file mode 100644
index 0000000000..2492c82e37
Binary files /dev/null and b/blazor/diagram/images/Flowchart_VerticalSameBranches.png differ
diff --git a/blazor/diagram/layout/flowchart-layout.md b/blazor/diagram/layout/flowchart-layout.md
new file mode 100644
index 0000000000..8051e22da1
--- /dev/null
+++ b/blazor/diagram/layout/flowchart-layout.md
@@ -0,0 +1,428 @@
+---
+layout: post
+title: Flowchart layout in Blazor Diagram Component | Syncfusion
+description: Learn here all about how to create flowchart layout in Syncfusion Blazor Diagram component and more.
+platform: Blazor
+control: Diagram Component
+documentation: ug
+---
+
+# Flowchart layout in Blazor Diagram Component
+
+The flowchart layout provides a visual representation of processes, workflows, systems, or algorithms in a diagrammatic format. It uses various symbols to depict different actions, with arrows connecting these symbols to indicate the flow or direction of the process. Flowcharts are essential tools for illustrating step-by-step sequences, making complex processes easier to understand and communicate.
+
+## Common flowchart symbols
+
+Different flowchart symbols have different meanings that are used to represent different states in flowchart. The following table describes the most common flowchart symbols that are used in creating flowchart.
+
+|Symbol|Shape name|Description|
+|---|---|---|
+||Terminator|Indicates the beginning and ending of the process.|
+||Data|Indicates data input or output for a process.|
+||Process|Represents an operation or set of operations and data manipulations.|
+||Decision|Shows a branching point where the decision is made to choose one of the two paths|
+||Document|Represents a single document or report in the process.|
+||PreDefinedProcess|Represents a sequence of actions that combine to perform a specific task that is defined elsewhere.|
+||DirectData|Represents a collection of information that allows searching, sorting, and filtering.|
+||StoredData|Represents a step where data get stored within a process.|
+||ManualInput|Represents the manual input of data into a field or step in a process.|
+||ManualOperation|Represents an operation in a process that must be done manually, not automatically.|
+||Preparation|Represents a setup or initialization process to another step in the process.|
+||OffPageReference|Represents a labeled connector used to link two flowcharts on different pages.|
+||MultiDocument|Represents multiple documents or reports in the process.|
+|||Represents a direction of flow from one step to another. It will get created automatically based on the relationship between the parent and child.|
+
+```csharp
+@using Syncfusion.Blazor.Diagram
+
+
+
+
+
+
+
+@code
+{
+ //Initialize diagram component.
+ SfDiagramComponent Diagram;
+ //Initialize flowchart layout settings.
+ FlowchartLayoutSettings flowchartSettings = new FlowchartLayoutSettings()
+ {
+ YesBranchDirection = BranchDirection.LeftInFlow,
+ NoBranchDirection = BranchDirection.RightInFlow
+ };
+
+ private void OnDataLoaded(object obj)
+ {
+ for (int i = 0; i < Diagram.Connectors.Count; i++)
+ {
+ Connector connector = Diagram.Connectors[i];
+ Node node = Diagram.GetObject(connector.TargetID) as Node;
+ Node srcNode = Diagram.GetObject(connector.SourceID) as Node;
+ if (node.Data != null && node.Data is ItemInfo itemInfo)
+ {
+ if (itemInfo.Label != null && itemInfo.Label.Count > 0)
+ {
+ if (itemInfo.ParentId.IndexOf((srcNode.Data as ItemInfo).Id) != -1)
+ {
+ var parentIndex = itemInfo.ParentId.IndexOf((srcNode.Data as ItemInfo).Id);
+ if (itemInfo.Label.Count > parentIndex)
+ {
+ connector.Annotations = new DiagramObjectCollection()
+ {
+ new PathAnnotation() { Content = itemInfo.Label[parentIndex], Style = new TextStyle(){ Bold = true} }
+ };
+ }
+ }
+ }
+ }
+ }
+ }
+ //Creates connectors with some default values.
+ private void OnConnectorCreating(IDiagramObject obj)
+ {
+ if (obj is Connector connector)
+ {
+ connector.Type = ConnectorSegmentType.Orthogonal;
+ }
+ }
+ //Creates nodes with some default values.
+ private void OnNodeCreating(IDiagramObject obj)
+ {
+ Node node = obj as Node;
+ if (node.Data != null && node.Data is ItemInfo)
+ {
+ ItemInfo employeeDetails = node.Data as ItemInfo;
+ node.Width = employeeDetails._Width;
+ node.Height = employeeDetails._Height;
+ if (employeeDetails._Shape == "StartOrEnd")
+ {
+ node.Shape = new FlowShape() { Shape = NodeFlowShapes.Terminator };
+ }
+ else
+ node.Shape = new FlowShape() { Shape = (NodeFlowShapes)Enum.Parse(typeof(NodeFlowShapes), employeeDetails._Shape.ToString()) };
+ node.Style.Fill = employeeDetails._Color;
+ node.Style.StrokeColor = employeeDetails._Color;
+ node.Annotations = new DiagramObjectCollection()
+ {
+ new ShapeAnnotation(){ Content = employeeDetails.Name, Style = new TextStyle(){ Color = "white", Bold = true} }
+ };
+ }
+ }
+ //Initialize data source collection.
+ public List DataSource = new List(){
+ new ItemInfo()
+ {
+ Id = "1",
+ Name = "Start",
+ _Shape = "StartOrEnd",
+ _Width = 80,
+ _Height = 35,
+ _Color = "#6CA0DC"
+ },
+ new ItemInfo()
+ {
+ Id = "2",
+ Name = "Input",
+ ParentId = new List { "1" },
+ _Shape = "Data",
+ _Width = 90,
+ _Height = 35,
+ _Color = "#6CA0DC"
+ },
+ new ItemInfo()
+ {
+ Id = "3",
+ Name = "Decision?",
+ ParentId = new List { "2" },
+ _Shape = "Decision",
+ _Width = 80,
+ _Height = 60,
+ _Color = "#6CA0DC"
+ },
+ new ItemInfo()
+ {
+ Id = "4",
+ Label = new List { "No" },
+ Name = "Process1",
+ ParentId = new List { "3" },
+ _Shape = "Process",
+ _Width = 80,
+ _Height = 40,
+ _Color = "#6CA0DC"
+ },
+ new ItemInfo()
+ {
+ Id = "5",
+ Label = new List { "Yes" },
+ Name = "Process2",
+ ParentId = new List() { "3" },
+ _Shape = "Process",
+ _Width = 80,
+ _Height = 40,
+ _Color = "#6CA0DC"
+ },
+ new ItemInfo()
+ {
+ Id = "6",
+ Name = "Output",
+ ParentId = new List { "5" },
+ _Shape = "Data",
+ _Width = 90,
+ _Height = 35,
+ _Color = "#6CA0DC"
+ },
+ new ItemInfo()
+ {
+ Id = "7",
+ Name = "Output",
+ ParentId = new List { "4" },
+ _Shape = "Data",
+ _Width = 90,
+ _Height = 35,
+ _Color = "#6CA0DC"
+ },
+ new ItemInfo()
+ {
+ Id = "8",
+ Name = "End",
+ ParentId = new List { "6","7" },
+ _Shape = "Terminator",
+ _Width = 80,
+ _Height = 35,
+ _Color = "#6CA0DC"
+ },
+ };
+ public class ItemInfo
+ {
+ public string Name { get; set; }
+ public string Id { get; set; }
+ public List Label { get; set; }
+ public List ParentId { get; set; }
+ public string _Shape { get; set; }
+ public double _Width { get; set; }
+ public double _Height { get; set; }
+ public string _Color { get; set; }
+ }
+}
+```
+>**Note:** When rendering a flowchart layout using a datasource, the connector labels must be set manually through the [DataLoaded](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_DataLoaded) event.
+
+
+
+You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Layout/FlowchartLayout/FlowchartLayout).
+
+## How to customize flowchart layout orientation
+
+The sequence of a node's direction can be customized by flowchart's orientation, either vertically from top to bottom or horizontally from left to right. The [Orientation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Layout.html#Syncfusion_Blazor_Diagram_Layout_Orientation) property of the layout class allows you to define the flow direction for the flowchart as either [TopToBottom](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.LayoutOrientation.html#Syncfusion_Blazor_Diagram_LayoutOrientation_TopToBottom) or [LeftToRight](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.LayoutOrientation.html#Syncfusion_Blazor_Diagram_LayoutOrientation_LeftToRight).
+
+### TopToBottom orientation
+
+This orientation arranges elements in the layout vertically, flowing from top to bottom. It is commonly used in flowcharts to represent the sequential progression of steps or actions in a process.
+
+```csharp
+@using Syncfusion.Blazor.Diagram
+
+
+
+
+
+```
+
+
+### LeftToRight orientation
+
+This orientation arranges elements in the layout horizontally, flowing from left to right. It is typically used to represent processes or workflows that move sequentially across the page, emphasizing a linear progression of steps or actions.
+
+```csharp
+@using Syncfusion.Blazor.Diagram
+
+
+
+
+
+```
+
+
+## How to customize the decision output directions
+
+The decision symbol in a flowchart represents a question or condition that leads to different paths based on a binary outcome (Yes/No, True/False). You can customize the output direction of these paths using the [YesBranchDirection](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.FlowchartLayoutSettings.html#Syncfusion_Blazor_Diagram_FlowchartLayoutSettings_YesBranchDirection) and [NoBranchDirection](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.FlowchartLayoutSettings.html#Syncfusion_Blazor_Diagram_FlowchartLayoutSettings_NoBranchDirection) properties of the [FlowchartLayoutSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.FlowchartLayoutSettings.html) class.
+
+[Left In Flow](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BranchDirection.html#Syncfusion_Blazor_Diagram_BranchDirection_LeftInFlow) - Arranges the Yes/No branch to the left of the decision symbol.
+
+[Right In Flow](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BranchDirection.html#Syncfusion_Blazor_Diagram_BranchDirection_RightInFlow) - Arranges the Yes/No branch to the right of the decision symbol.
+
+[Same As Flow](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BranchDirection.html#Syncfusion_Blazor_Diagram_BranchDirection_SameAsFlow) - Aligns the Yes/No branch in the same direction as the flow of the decision symbol.
+
+The following table will explain the pictorial representation of the behavior:
+
+|YesBranchDirection| NoBranchDirection | TopToBottom | LeftToRight |
+|---|---|---|---|
+| Left In Flow |Right In Flow|||
+| Right In Flow |Left In Flow || |
+| Same As Flow |Right In Flow || |
+| Right In Flow | Same As Flow || |
+|Same As Flow |Same As Flow|||
+
+>**Note:** If both branch directions are same, **Yes** branch will be prioritized.
+
+You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Layout/FlowchartLayout/FlowchartLayoutSettings).
+
+### Custom Yes and No branch values
+
+The decision symbol will produce the two branches as output, which will be **Yes** branch and **No** branch. If the output branch connector text value matches the values in the [YesBranchValues](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.FlowchartLayoutSettings.html#Syncfusion_Blazor_Diagram_FlowchartLayoutSettings_YesBranchValues) property of [FlowchartLayoutSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.FlowchartLayoutSettings.html) class, it will be considered as **Yes** branch and similarly if connector text value matches the values in the [NoBranchValues](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.FlowchartLayoutSettings.html#Syncfusion_Blazor_Diagram_FlowchartLayoutSettings_NoBranchValues) property, it will be considered as **No** branch. By default, the [YesBranchValues](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.FlowchartLayoutSettings.html#Syncfusion_Blazor_Diagram_FlowchartLayoutSettings_YesBranchValues) property will contain **Yes** and **True** string values and the [NoBranchValues](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.FlowchartLayoutSettings.html#Syncfusion_Blazor_Diagram_FlowchartLayoutSettings_NoBranchValues) property will contain **No** and **False** string values.
+
+Any text value can be given as a connector text to describe the flow. Also, any string value can be given in the [YesBranchValues](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.FlowchartLayoutSettings.html#Syncfusion_Blazor_Diagram_FlowchartLayoutSettings_YesBranchValues) and [NoBranchValues](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.FlowchartLayoutSettings.html#Syncfusion_Blazor_Diagram_FlowchartLayoutSettings_NoBranchValues). To decide the flow based on if or else, that connector text should match the values in the [YesBranchValues](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.FlowchartLayoutSettings.html#Syncfusion_Blazor_Diagram_FlowchartLayoutSettings_YesBranchValues) and [NoBranchValues](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.FlowchartLayoutSettings.html#Syncfusion_Blazor_Diagram_FlowchartLayoutSettings_NoBranchValues).
+
+```csharp
+@using Syncfusion.Blazor.Diagram
+
+
+
+
+
+
+
+@code
+{
+ //Initialize diagram component.
+ SfDiagramComponent Diagram;
+ //Initialize flowchart layout settings.
+ FlowchartLayoutSettings flowchartSettings = new FlowchartLayoutSettings()
+ {
+ YesBranchValues = new List { "Accept", "Yes" },
+ NoBranchValues = new List { "Reject", "No" },
+ };
+
+ private void OnDataLoaded(object obj)
+ {
+ for (int i = 0; i < Diagram.Connectors.Count; i++)
+ {
+ Connector connector = Diagram.Connectors[i];
+ Node node = Diagram.GetObject(connector.TargetID) as Node;
+ Node srcNode = Diagram.GetObject(connector.SourceID) as Node;
+ if (node.Data != null && node.Data is ItemInfo itemInfo)
+ {
+ if (itemInfo.Label != null && itemInfo.Label.Count > 0)
+ {
+ if (itemInfo.ParentId.IndexOf((srcNode.Data as ItemInfo).Id) != -1)
+ {
+ var parentIndex = itemInfo.ParentId.IndexOf((srcNode.Data as ItemInfo).Id);
+ if (itemInfo.Label.Count > parentIndex)
+ {
+ connector.Annotations = new DiagramObjectCollection()
+ {
+ new PathAnnotation() { Content = itemInfo.Label[parentIndex], Style = new TextStyle(){ Bold = true} }
+ };
+ }
+ }
+ }
+ }
+ }
+ }
+ //Creates connectors with some default values.
+ private void OnConnectorCreating(IDiagramObject obj)
+ {
+ if (obj is Connector connector)
+ {
+ connector.Type = ConnectorSegmentType.Orthogonal;
+ }
+ }
+ //Creates nodes with some default values.
+ private void OnNodeCreating(IDiagramObject obj)
+ {
+ Node node = obj as Node;
+ if (node.Data != null && node.Data is ItemInfo)
+ {
+ ItemInfo employeeDetails = node.Data as ItemInfo;
+ node.Width = employeeDetails._Width;
+ node.Height = employeeDetails._Height;
+ if (employeeDetails._Shape == "StartOrEnd")
+ {
+ node.Shape = new FlowShape() { Shape = NodeFlowShapes.Terminator };
+ }
+ else
+ node.Shape = new FlowShape() { Shape = (NodeFlowShapes)Enum.Parse(typeof(NodeFlowShapes), employeeDetails._Shape.ToString()) };
+ node.Style.Fill = employeeDetails._Color;
+ node.Style.StrokeColor = employeeDetails._Color;
+ node.Annotations = new DiagramObjectCollection()
+ {
+ new ShapeAnnotation(){ Content = employeeDetails.Name, Style = new TextStyle(){ Color = "white", Bold = true} }
+ };
+ }
+ }
+ //Initialize data source collection.
+ public List DataSource = new List(){
+ new ItemInfo()
+ {
+ Id = "1",
+ Name = "Start",
+ _Shape = "StartOrEnd",
+ _Width = 100,
+ _Height = 50,
+ _Color = "#6CA0DC"
+ },
+ new ItemInfo()
+ {
+ Id = "2",
+ Name = "Decision?",
+ ParentId = new List { "1" },
+ _Shape = "Decision",
+ _Width = 100,
+ _Height = 80,
+ _Color = "#6CA0DC"
+ },
+ new ItemInfo()
+ {
+ Id = "3",
+ Label = new List { "Reject" },
+ Name = "Process1",
+ ParentId = new List { "2" },
+ _Shape = "Process",
+ _Width = 100,
+ _Height = 60,
+ _Color = "#6CA0DC"
+ },
+ new ItemInfo()
+ {
+ Id = "4",
+ Label = new List { "Accept" },
+ Name = "Process2",
+ ParentId = new List() { "2" },
+ _Shape = "Process",
+ _Width = 100,
+ _Height = 60,
+ _Color = "#6CA0DC"
+ },
+ new ItemInfo()
+ {
+ Id = "5",
+ Name = "End",
+ ParentId = new List { "4"},
+ _Shape = "Terminator",
+ _Width = 100,
+ _Height = 50,
+ _Color = "#6CA0DC"
+ },
+ };
+ public class ItemInfo
+ {
+ public string Name { get; set; }
+ public string Id { get; set; }
+ public List Label { get; set; }
+ public List ParentId { get; set; }
+ public string _Shape { get; set; }
+ public double _Width { get; set; }
+ public double _Height { get; set; }
+ public string _Color { get; set; }
+ }
+}
+```
+
+
+
+You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Layout/FlowchartLayout/CustomYesOrNoBranch).
+
+## How to update the spacing between nodes
+
+You can control the spacing between nodes in your diagram layout using the [HorizontalSpacing](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Layout.html#Syncfusion_Blazor_Diagram_Layout_HorizontalSpacing) and [VerticalSpacing](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Layout.html#Syncfusion_Blazor_Diagram_Layout_VerticalSpacing) properties of the layout class. These properties allow you to adjust the distance between nodes both horizontally and vertically, giving you precise control over the appearance and organization of your diagram.
\ No newline at end of file