Revamping the Ug

RamyaSubramaniSF4537 · RamyaSubramaniSF4537 · commit df3b2cb499c2 · 2025-10-10T20:20:08.000+05:30
diff --git a/blazor/diagram/commands.md b/blazor/diagram/commands.md
@@ -781,7 +781,7 @@ The following example demonstrates the grouping commands.
 A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Commands/GroupingCommands)
 ## How to Arrange Diagram Elements Using Z-Order Commands
 
-Z – Order commands are used to control the stacking order (Z-Order) of the diagram elements such as nodes, connectors, and groups. Also, arrange the selected objects on the diagram page with their Z-order values by using the Bring to front, Bring forward, Send to back, and Send backward features.
+Z-Order commands are used to control the stacking order (Z-Order) of the diagram elements such as nodes, connectors, and groups. Also, arrange the selected objects on the diagram page with their Z-order values by using the Bring to front, Bring forward, Send to back, and Send backward features.
 
 ### How to Use the Bring To Front Commands
 
@@ -1257,7 +1257,7 @@ A complete working sample can be downloaded from [GitHub](https://github.com/Syn
 
 ## How to Bring the Entire Diagram into the Current Viewport Using Fit to Page Command
 
-The `FitToPage` command is used to bring the entire diagram (including large diagrams) into view. Customize the behavior of the FitToPage command by passing a [FitOptions](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.FitOptions.html) object as a parameter. If no parameter is provided, the entire diagram is fit into the view using default settings.
+The [FitToPage](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.FitMode.html) command is used to bring the entire diagram (including large diagrams) into view. Customize the behavior of the `FitToPage` command by passing a [FitOptions](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.FitOptions.html) object as a parameter. If no parameter is provided, the entire diagram is fit into the view using default settings.
 
 The following code illustrates how to execute the FitToPage method.
 
@@ -1397,7 +1397,7 @@ A complete working sample can be downloaded from [GitHub](https://github.com/Syn
 
 #### FitToPage Parameters
 
-The [FitOptions](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.FitOptions.html) parameter allows you to customize the behavior of the FitToPage command. By configuring various properties of the FitOptions object, Control how the diagram is adjusted within the view. 
+The [FitOptions](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.FitOptions.html) parameter allows you to customize the behavior of the `FitToPage` command. By configuring various properties of the `FitOptions` object, Control how the diagram is adjusted within the view. 
 
 #### FitToPage
 
diff --git a/blazor/diagram/constraints.md b/blazor/diagram/constraints.md
@@ -41,7 +41,7 @@ To learn more about bitwise operators, refer to [Bitwise Operations](constraints
 |[Routing](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramConstraints.html#Syncfusion_Blazor_Diagram_DiagramConstraints_Routing)|Determines if automatic line routing is enabled or disabled for connectors. When enabled, lines are automatically routed to avoid overlapping with nodes and other obstacles.|
 |[Default](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramConstraints.html#Syncfusion_Blazor_Diagram_DiagramConstraints_Default)|Enables or disables all constraints in diagram.|
 
-The following example shows how to disable the PageEditable constraint from the default diagram constraints.
+The following example shows how to disable the `PageEditable` constraint from the default diagram constraints.
 
 ```cshtml
 @using Syncfusion.Blazor.Diagram
@@ -142,7 +142,7 @@ The [Constraints](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagra
 |[RoutingObstacle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.NodeConstraints.html#Syncfusion_Blazor_Diagram_NodeConstraints_RoutingObstacle)|Enables or disables the node to be treated as obstacle while in routing.|
 |[Default](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.NodeConstraints.html#Syncfusion_Blazor_Diagram_NodeConstraints_Default)|Enables all default constraints for the node.|
 
-The following example shows how to disable the rotate constraint from the default node constraints.
+The following example shows how to disable the `Rotate` constraint from the default node constraints.
 
 ```cshtml
 @using Syncfusion.Blazor.Diagram
@@ -178,7 +178,7 @@ A complete working sample can be downloaded from [GitHub](https://github.com/Syn
 
 ![Node Constraints in Blazor Diagram](images/blazor-diagram-node-constraints.png)
 
-The following example shows how to add the Shadow constraint to the default constraints of a node.
+The following example shows how to add the `Shadow` constraint to the default constraints of a node.
 
 ```csharp
 NodeConstraints NodeConstraints = NodeConstraints.Default | NodeConstraints.Shadow;
@@ -255,7 +255,7 @@ The [Constraints](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagra
 |[ReadOnly](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ConnectorConstraints.html#Syncfusion_Blazor_Diagram_ConnectorConstraints_ReadOnly)|Enables or disables readonly for the connector.|
 |[Default](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ConnectorConstraints.html#Syncfusion_Blazor_Diagram_ConnectorConstraints_Default)|Enables all constraints for the connector.|
 
-The following code shows how to disable the Select constraint from the default connector constraints.
+The following code shows how to disable the `Select` constraint from the default connector constraints.
 
 ```cshtml
 @using Syncfusion.Blazor.Diagram
@@ -287,7 +287,7 @@ The following code shows how to disable the Select constraint from the default c
 
 A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Constraints/ConnectorConstraints)
 
-The following example shows how to add the Bridging constraint to the default constraints of a connector.
+The following example shows how to add the `Bridging` constraint to the default constraints of a connector.
 
 ```csharp
 ConnectorConstraints ConnectorConstraints = ConnectorConstraints.Default | ConnectorConstraints.Bridging;
@@ -613,7 +613,7 @@ N> By default, the following constraints are enabled for the selected items,
 
 ## How to Enable or Disable Snap Constraints
 
-The [Constraints](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SnapSettings.html#Syncfusion_Blazor_Diagram_SnapSettings_Constraints) property of the SnapConstraints controls the visibility of gridlines and enables or disables snapping. Snap constraints allow the following behaviors.
+The [Constraints](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SnapSettings.html#Syncfusion_Blazor_Diagram_SnapSettings_Constraints) property of the `SnapConstraints` controls the visibility of gridlines and enables or disables snapping. Snap constraints allow the following behaviors.
 
 * Show only horizontal or vertical gridlines.
 * Show both horizontal and vertical gridlines.
@@ -686,7 +686,7 @@ N> By default, the following constraints are enabled for the snap functionality
 
 ## How to Use Boundary Constraints
 
-Boundary [constraints](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BoundaryConstraints.html) defines a boundary for the diagram inside that the interaction should be done. Boundary constraints allow the following behaviors:
+[BoundaryConstraints](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BoundaryConstraints.html) defines a boundary for the diagram inside that the interaction should be done. Boundary constraints allow the following behaviors:
 
 * Infinity
 * Diagram
diff --git a/blazor/diagram/context-menu.md b/blazor/diagram/context-menu.md
@@ -155,7 +155,7 @@ A complete working sample can be downloaded from [GitHub](https://github.com/Syn
 
 ### How to Show Custom Context Menu Alone
 
-Set the [ShowCustomMenuOnly](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ContextMenuSettings.html#Syncfusion_Blazor_Diagram_ContextMenuSettings_ShowCustomMenuOnly) property to true to display only custom context menu items.
+Set the [ShowCustomMenuOnly](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ContextMenuSettings.html#Syncfusion_Blazor_Diagram_ContextMenuSettings_ShowCustomMenuOnly) property to **true** to display only custom context menu items.
 The following code example shows how to show custom context menu items alone.
 
 ```cshtml
diff --git a/blazor/diagram/how-to.md b/blazor/diagram/how-to.md
@@ -13,7 +13,7 @@ The diagram's core functionalities are implemented through a comprehensive set o
 
 ## How to Add Nodes Using the Add Method
 
-Create a node in a Blazor diagram, define a Node object and add it to the diagram's nodes collection using the `Add()` method. It's crucial to call the Add() method within the OnInitialized() lifecycle method. This approach ensures that each diagram element is properly measured and rendered individually before the entire diagram is displayed. Attempting to use the Add() method outside of OnInitialized() is not recommended, as it may lead to unexpected behavior or rendering issues in the diagram. The following code example shows how to add a node to the diagram.
+Create a node in a Blazor diagram, define a Node object and add it to the diagram's nodes collection using the `Add` method. It's crucial to call the `Add` method within the `OnInitialized` lifecycle method. This approach ensures that each diagram element is properly measured and rendered individually before the entire diagram is displayed. Attempting to use the `Add` method outside of `OnInitialized` is not recommended, as it may lead to unexpected behavior or rendering issues in the diagram. The following code example shows how to add a node to the diagram.
 
 ```cshtml
 @using Syncfusion.Blazor.Diagram
@@ -723,7 +723,7 @@ The [GetPageBounds](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diag
 A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Methods/GetPageBounds)
 
 ## How to Select All Objects in the Diagram
-  The [SelectAll](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_SelectAll) method selects all objects (nodes, connectors, and annotations) in the diagram simultaneously. This feature is particularly useful for performing bulk operations or applying changes to multiple elements at once.
+  The [SelectAll](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_SelectAll) method selects all objects (like nodes, connectors, and groups) in the diagram simultaneously. This feature is particularly useful for performing bulk operations or applying changes to multiple elements at once.
 
 ```cshtml
 @using Syncfusion.Blazor.Diagram
diff --git a/blazor/diagram/interaction.md b/blazor/diagram/interaction.md
@@ -376,6 +376,7 @@ The DiagramSelectionSettings provides access to:
 A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Interaction/CurrentSelection)
 
 ### How to clone the selected nodes and connector at runtime
+
 Clone is a virtual method of the node used to create a copy of a diagram object. After cloning, it is necessary to set a unique ID for the cloned nodes and connectors. The following code demonstrates how to clone selected nodes during runtime.
 ```cshtml
 @using Syncfusion.Blazor.Diagram
diff --git a/blazor/diagram/swimlane/phase.md b/blazor/diagram/swimlane/phase.md
@@ -407,13 +407,13 @@ Below is an example demonstrating how to set the orientation for phases in an Sf
 
 You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Swimlanes/Phase/PhaseOrientation).
 
-![Phse](Swimlane-images/PhaseOrientation.PNG).
+![Phase](Swimlane-images/PhaseOrientation.PNG).
 
 ## How to Select and Resize Phase Header
 
  * Select an individual phase header by clicking the header twice. The first click selects the phase, and the second click selects the header. 
 
- * Resize an individual phase header. While resizing a phase, a 20 px distance is maintained from the lane children.
+ * Resize an individual phase header. While resizing a phase, a 20 pixels distance is maintained from the lane children.
 
   * When an element is resized, the [SizeChanging](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_SizeChanging) and [SizeChanged](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_SizeChanged) events are triggered.
 
diff --git a/blazor/diagram/swimlane/swimlane.md b/blazor/diagram/swimlane/swimlane.md
@@ -65,7 +65,7 @@ To create a swimlane, you have to define the swimlane object and add it to the [
 ```
 {% previewsample "https://blazorplayground.syncfusion.com/embed/LNBIiDNcgwRwLkFg?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
 
->**Note:** Swimlane IDs should not start with numbers or special characters and should not contain special characters such as underscore(_) or spaces.
+>**Note:** Swimlane ID should not start with numbers or special characters and should not contain special characters such as underscore(_) or spaces.
 
 The swimlane appears as follows.
 
@@ -319,13 +319,13 @@ A complete working sample can be downloaded from [GitHub](https://github.com/Syn
 | Vertical | ![Vertical](Swimlane-images/Swimlane_Vertical.PNG) |
 
 
-## How to set pacing between lane or phase header and its children
+## How to set spacing between lane or phase header and its children
 
-Define custom spacing between a lane or phase header and its child elements (nodes, connectors, or groups) using the [ChildrenSpacing](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Swimlane.html#Syncfusion_Blazor_Diagram_Swimlane_ChildrenSpacing) property, which accepts a DiagramThickness with Top, Bottom, Left, and Right values.
+Define custom spacing between a lane or phase header and its child elements (nodes, connectors, or groups) using the [ChildrenSpacing](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Swimlane.html#Syncfusion_Blazor_Diagram_Swimlane_ChildrenSpacing) property, which accepts a `DiagramThickness` with `Top`, `Bottom`, `Left`, and `Right` values.
 
-By default, ChildrenSpacing is 20 px on all sides. Adjust these values to control padding between the header and its children within the swimlane layout.
+By default, `ChildrenSpacing` is 20 pixels on all sides. Adjust these values to control padding between the header and its children within the `Swimlane`.
 
-The following example shows how to apply custom spacing using ChildrenSpacing property.
+The following example shows how to apply custom spacing using `ChildrenSpacing` property.
 
 ```cshtml
 @using Syncfusion.Blazor.Diagram
@@ -433,7 +433,7 @@ A complete working sample can be downloaded from [GitHub](https://github.com/Syn
 
 ### How to Select the Swimlane
 
-Select a swimlane by clicking (tapping) the header of the swimlane. Also, it can be selected at runtime by using the [Select](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_Select_System_Collections_ObjectModel_ObservableCollection_Syncfusion_Blazor_Diagram_IDiagramObject__System_Nullable_System_Boolean__) method and clear the selection in the diagram by using the [ClearSelection](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_ClearSelection)
+Select a `Swimlane` by clicking (tapping) the header of the swimlane. Also, it can be selected at runtime by using the [Select](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_Select_System_Collections_ObjectModel_ObservableCollection_Syncfusion_Blazor_Diagram_IDiagramObject__System_Nullable_System_Boolean__) method and clear the selection in the diagram by using the [ClearSelection](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_ClearSelection)
 
 ### How to Drag the Swimlane
 
diff --git a/blazor/diagram/symbol-palette/customization.md b/blazor/diagram/symbol-palette/customization.md
diff --git a/blazor/diagram/symbol-palette/symbol-palette.md b/blazor/diagram/symbol-palette/symbol-palette.md
