Revamping the Ug

RamyaSubramaniSF4537 · RamyaSubramaniSF4537 · commit cbb066f9512d · 2025-10-13T10:24:02.000+05:30
diff --git a/blazor/diagram/connectors/connectors.md b/blazor/diagram/connectors/connectors.md
@@ -61,7 +61,7 @@ A complete working sample can be downloaded from [GitHub](https://github.com/Syn
 
 >**Note:** 
 > * The [ID](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.NodeBase.html#Syncfusion_Blazor_Diagram_NodeBase_ID) of each connector should be unique so it is further used to find the connector at runtime and perform any customization. 
-> * Connector IDs should not start with numbers or special characters and should not contain special characters such as underscores(_) or spaces.
+> * Connector ID should not start with numbers or special characters and should not contain special characters such as underscores(_) or spaces.
 
 ## How to Add Connectors at Runtime
 
@@ -178,7 +178,7 @@ The following code explains how to add a connector with annotation  at runtime b
 
     DiagramObjectCollection<NodeBase> NodeCollection = new DiagramObjectCollection<NodeBase>();
 
-    SfDiagramComponent Diagram;
+    private SfDiagramComponent Diagram;
 
     protected override void OnInitialized()
     {
@@ -499,7 +499,7 @@ A complete working sample can be downloaded from [GitHub](https://github.com/Syn
 
 * Removing [NodeConstraints.InConnect](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.NodeConstraints.html#Syncfusion_Blazor_Diagram_NodeConstraints_InConnect) from Default, the node accepts only an outgoing connection to dock in it. Similarly, when you remove [NodeConstraints.OutConnect](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.NodeConstraints.html#Syncfusion_Blazor_Diagram_NodeConstraints_OutConnect) from Default, the node accepts only an incoming connection to dock in it.
 
-* Removing both InConnect and OutConnect [NodeConstraints](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.NodeConstraints.html) from [Default](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.NodeConstraints.html#Syncfusion_Blazor_Diagram_NodeConstraints_Default), the node restricts connectors from establishing a connection to it.
+* Removing both `InConnect` and `OutConnect` [NodeConstraints](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.NodeConstraints.html) from `Default`, the node restricts connectors from establishing a connection to it.
 
 ### How to Connect Nodes Using Specific Ports
 
diff --git a/blazor/diagram/connectors/customization.md b/blazor/diagram/connectors/customization.md
@@ -13,9 +13,9 @@ documentation: ug
 
 Diagram allows you to customize the connector appearances. The following topics describe how to customize several properties of connectors.
 
-* The Starting and ending points of a connector can be decorated with shapes such as arrows, circles, diamonds, or custom paths. The connection end points can be decorated with the [SourceDecorator](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Connector.html#Syncfusion_Blazor_Diagram_Connector_SourceDecorator) and [TargetDecorator](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Connector.html#Syncfusion_Blazor_Diagram_Connector_TargetDecorator) properties of the connector.
+* The starting and ending points of a connector can be decorated with shapes such as arrows, circles, diamonds, or custom paths. The connection end points can be decorated with the [SourceDecorator](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Connector.html#Syncfusion_Blazor_Diagram_Connector_SourceDecorator) and [TargetDecorator](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Connector.html#Syncfusion_Blazor_Diagram_Connector_TargetDecorator) properties of the connector.
 
-* The [Shape](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DecoratorSettings.html#Syncfusion_Blazor_Diagram_DecoratorSettings_Shape) property of SourceDecorator allows you to define the shape of the source decorator. Similarly, the `Shape` property of TargetDecorator allows to define the shape of the target decorator.
+* The [Shape](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DecoratorSettings.html#Syncfusion_Blazor_Diagram_DecoratorSettings_Shape) property of `SourceDecorator` allows you to define the shape of the source decorator. Similarly, the `Shape` property of `TargetDecorator` allows to define the shape of the target decorator.
 
 * To create custom shape for source decorator, use the [PathData](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DecoratorSettings.html#Syncfusion_Blazor_Diagram_DecoratorSettings_PathData) property. Similarly, to create custom shape for the target decorator, use the `PathData` property.
 
@@ -227,7 +227,7 @@ A complete working sample can be downloaded from [GitHub](https://github.com/Syn
 
 ## How to Enable Bridging
 
-Line bridging draws a small arc where one connector crosses another to visually indicate the crossing. By default, [BridgeDirection](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_BridgeDirection) is [Top](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Direction.html#Syncfusion_Blazor_Diagram_Direction_Top). Depending upon the direction given bridging direction appears. Bridging can be enabled or disabled either with the [Connector.Constraints](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ConnectorConstraints.html) on a connector or [Diagram.Constraints](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramConstraints.html) on the diagram. 
+Line bridging draws a small arc where one connector crosses another to visually indicate the crossing. By default, [BridgeDirection](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_BridgeDirection) is **Top**. Depending upon the direction given bridging direction appears. Bridging can be enabled or disabled either with the [Connector.Constraints](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ConnectorConstraints.html) on a connector or [Diagram.Constraints](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramConstraints.html) on the diagram. 
 
 To learn more about connector bridging, watch the following segment:
 
@@ -322,7 +322,7 @@ A complete working sample can be downloaded from [GitHub](https://github.com/Syn
 
 >**Note:** Bridging support is not applicable for layout.
 
-The [BridgeSpace](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Connector.html#Syncfusion_Blazor_Diagram_Connector_BridgeSpace) property of connectors define the width of the line bridging. The default value is **10 px**.
+The [BridgeSpace](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Connector.html#Syncfusion_Blazor_Diagram_Connector_BridgeSpace) property of connectors define the width of the line bridging. The default value is **10** pixels.
 
 Limitation: [BezierSegment](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BezierSegment.html) does not support bridging.
 
@@ -385,6 +385,8 @@ Corner radius rounds the corners of connectors. Set the radius using the [Corner
 
 A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Connectors/Customization/CornerRadius)
 
+Limitation: [BezierSegment](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BezierSegment.html) does not support corner radius.
+
 ![Blazor Diagram Connector with Corner Radius](../images/blazor-diagram-connector-with-corner-radious.png)
 
 ## How to Customize Connector Appearance
@@ -393,7 +395,7 @@ A complete working sample can be downloaded from [GitHub](https://github.com/Syn
 
 * The [IsVisible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.NodeBase.html#Syncfusion_Blazor_Diagram_NodeBase_IsVisible) property determines whether the connector is visible.
 
-* Default values for all [Connectors](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Connector.html) can be set using the [ConnectorCreating](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_ConnectorCreating) event callback method. For example, if all connectors have the same type or property, then such properties can be moved into ConnectorCreating.
+* Default values for all [Connectors](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Connector.html) can be set using the [ConnectorCreating](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_ConnectorCreating) event callback method. For example, if all connectors have the same type or property, then such properties can be moved into `ConnectorCreating`.
 
 ### How to Customize Connector Segment Appearance
 
@@ -570,7 +572,7 @@ A complete working sample can be downloaded from [GitHub](https://github.com/Syn
 
 ## How to Set Connector Z-Index 
 
-* The connector's  [ZIndex](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.NodeBase.html#Syncfusion_Blazor_Diagram_NodeBase_ZIndex) property specifies the stack order of the connector. A connector with a higher ZIndex is rendered above one with a lower ZIndex. The default value is **-1**.
+* The connector's  [ZIndex](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.NodeBase.html#Syncfusion_Blazor_Diagram_NodeBase_ZIndex) property specifies the stack order of the connector. A connector with a higher `ZIndex` is rendered above one with a lower `ZIndex`. The default value is **-1**.
 
 
 The following code illustrates how to render a connector based on stack order.
@@ -612,7 +614,7 @@ A complete working sample can be downloaded from [GitHub](https://github.com/Syn
 
 ## How to Set Hit Padding for Connector
 
-* The [HitPadding](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Connector.html#Syncfusion_Blazor_Diagram_Connector_HitPadding) refers to the space around the connector's edges. To make it easy to select, selecting when the mouse comes near its vicinity area should be possible. The `HitPadding` property allows you to customize the vicinity area while selecting. The default value is **10 px**. Within the hit padding region, the connector can be selected and deselected.
+* The [HitPadding](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Connector.html#Syncfusion_Blazor_Diagram_Connector_HitPadding) refers to the space around the connector's edges. To make it easy to select, selecting when the mouse comes near its vicinity area should be possible. The `HitPadding` property allows you to customize the vicinity area while selecting. The default value is **10** pixels. Within the hit padding region, the connector can be selected and deselected.
 
 To learn more about connector hit padding, watch the following segment:
 
diff --git a/blazor/diagram/connectors/interactions.md b/blazor/diagram/connectors/interactions.md
@@ -165,7 +165,7 @@ Connectors can also be dragged through user interaction:
 
 ## How to Drag Connector Endpoints
 
-The connector can be selected by clicking it. When the connector is selected, circles will be added on the starting and ending of the connector that is represented by Thumbs. Clicking and dragging those handles helps you to adjusts the source and target points.
+The connector can be selected by clicking it. When the connector is selected, circles will be added on the starting and ending of the connector that is represented by thumbs. Clicking and dragging those handles helps you to adjusts the source and target points.
 
 ```cshtml
 @using Syncfusion.Blazor.Diagram
@@ -365,7 +365,7 @@ The [Advanced](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.R
 
 A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Connectors/Interaction/LineRoutingSettings)
 
-**Note:** The default value of [RoutingType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.LineRoutingSettings.html#Syncfusion_Blazor_Diagram_LineRoutingSettings_RoutingType) is [Classic](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.RoutingTypes.html#Syncfusion_Blazor_Diagram_RoutingTypes_Classic).
+**Note:** The default value of [RoutingType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.LineRoutingSettings.html#Syncfusion_Blazor_Diagram_LineRoutingSettings_RoutingType) is **Classic**.
 
 ### How to Enable or Disable Node Routing
 
@@ -508,7 +508,7 @@ A complete working sample can be downloaded from [GitHub](https://github.com/Syn
 
 ### How to Define Distance Between Nodes and Connectors
 
-The [ObstaclePadding](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.LineRoutingSettings.html#Syncfusion_Blazor_Diagram_LineRoutingSettings_ObstaclePadding) property defines the minimum distance between connectors and obstacles when Advanced routing is enabled. This ensures connectors are routed with clear spacing around obstacles for improved readability.
+The [ObstaclePadding](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.LineRoutingSettings.html#Syncfusion_Blazor_Diagram_LineRoutingSettings_ObstaclePadding) property defines the minimum distance between connectors and obstacles when advanced routing is enabled. This ensures connectors are routed with clear spacing around obstacles for improved readability.
 
 ```cshtml
 @using Syncfusion.Blazor.Diagram
@@ -595,7 +595,7 @@ The Avoid Connector Overlapping behavior ensures connectors do not visually over
 
 **Overview Behavior:** In the Overview panel, connectors outside the current viewport may initially appear overlapped. These will also be resolved dynamically as the corresponding area comes into focus in the main diagram view.
 
-The following example demonstrates enabling the AvoidLineOverlapping feature in the diagram.
+The following example demonstrates enabling the `AvoidLineOverlapping` feature in the diagram.
 
 
 ```cshtml
diff --git a/blazor/diagram/connectors/segments/bezier/bezier.md b/blazor/diagram/connectors/segments/bezier/bezier.md
@@ -275,7 +275,7 @@ A complete working sample can be downloaded from [GitHub](https://github.com/Syn
 
 The Bezier connector can have multiple segments between the source and target points. By default, these segments are rendered as **circles**, but this can be customized either globally or for individual connectors using the [SegmentThumbSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SegmentThumbSettings.html) class.
 
-To change the segment thumb shape for all Bezier connectors, configure the `SegmentThumbSettings` property of the SfDiagramComponent class and set the [Shape](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SegmentThumbSettings.html#Syncfusion_Blazor_Diagram_SegmentThumbSettings_Shape) property to the desired shape.
+To change the segment thumb shape for all Bezier connectors, configure the `SegmentThumbSettings` property of the `SfDiagramComponent` class and set the [Shape](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SegmentThumbSettings.html#Syncfusion_Blazor_Diagram_SegmentThumbSettings_Shape) property to the desired shape.
 
 To customize the segment thumb shape for a specific connector, first disable the [InheritSegmentThumbShape](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ConnectorConstraints.html#Syncfusion_Blazor_Diagram_ConnectorConstraints_InheritSegmentThumbShape) constraint. Then, configure the `SegmentThumbSettings` property of the Connector class, specifying the desired shape using the `Shape` property of the `SegmentThumbSettings` class. 
 
diff --git a/blazor/diagram/connectors/segments/orthogonal.md b/blazor/diagram/connectors/segments/orthogonal.md
@@ -220,7 +220,7 @@ A complete working sample can be downloaded from [GitHub](https://github.com/Syn
 
 When the `InheritSegmentThumbShape` constraint is enabled in the connector, the shape specified at the diagram level will be applied to the connector's segment thumb. This allows for consistent segment thumb shapes across the diagram.
 
-The following code example illustrates how to customize the orthogonal segment thumb shape using `InheritSegmentThumbShape`.
+The following code example illustrates how to customize the orthogonal segment thumb shape using `InheritSegmentThumbShape` constraints.
 
 ```cshtml
 @using Syncfusion.Blazor.Diagram
diff --git a/blazor/diagram/layout/automatic-layout.md b/blazor/diagram/layout/automatic-layout.md
@@ -113,11 +113,11 @@ The function can be called on-demand, making it flexible for use in scenarios wh
 
 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 customize the space between successive nodes in the diagram, both horizontally and vertically. These properties help control the overall layout and visual organization of nodes, ensuring clear and consistent spacing across the diagram.
 
-* **HorizontalSpacing**: Space between nodes along the horizontal axis. Useful for flowcharts, organizational charts, or radial layouts.
+* `HorizontalSpacing`: Space between nodes along the horizontal axis. Useful for flowcharts, organizational charts, or radial layouts.
 
-* **VerticalSpacing**: Space between nodes along the vertical axis. It ensures a balanced distribution of nodes in layouts such as hierarchical trees or mind maps.
+* `VerticalSpacing`: Space between nodes along the vertical axis. It ensures a balanced distribution of nodes in layouts such as hierarchical trees or mind maps.
 
-Default values: HorizontalSpacing is **30** and VerticalSpacing is **30**. Modify these to achieve the required layout density.
+Default values: `HorizontalSpacing` is **30** and `VerticalSpacing` is **30**. Modify these to achieve the required layout density.
 
 ```csharp
 <SfDiagramComponent @ref="diagram" Width="900px" Height="800px">
diff --git a/blazor/diagram/layout/complex-hierarchical-layout.md b/blazor/diagram/layout/complex-hierarchical-layout.md
@@ -154,7 +154,7 @@ A complete working sample can be downloaded from [GitHub](https://github.com/Syn
 
 ![Blazor complex hierarchical layout with SamePoint disabled](../images/blazor-diagram-samepoint.png)
 
->**Note:** In DataSourceSettings, the type of the ID and ParentID properties are **string**. The provided DataSource should have a parent-child relationship. It is necessary for at least one node to have an empty ParentID.
+>**Note:** In `DataSourceSettings`, the type of the `ID` and `ParentID` properties are **string**. The provided `DataSource` should have a parent-child relationship. It is necessary for at least one node to have an empty `ParentID`.
 
 ### How to Enable or Disable Linear Arrangement
 
diff --git a/blazor/diagram/layout/hierarchical-layout.md b/blazor/diagram/layout/hierarchical-layout.md
