syncfusion-content · RamyaSubramaniSF4537 · May 21, 2025 · May 22, 2025 · May 27, 2025 · May 28, 2025
diff --git a/blazor/diagram/accessibility.md b/blazor/diagram/accessibility.md
@@ -37,7 +37,7 @@ The accessibility compliance for the Blazor diagram component is outlined below:
 
 <div><img src="https://cdn.syncfusion.com/content/images/documentation/not-supported.png" alt="No"> - The component does not meet the requirement.</div>
 
-## WAI-ARIA attributes
+## WAI-ARIA Attributes
 
 The Blazor Diagram component followed the WAI-ARIA patterns to meet the accessibility. The following ARIA attributes are used in the Blazor Diagram component:
 
@@ -157,7 +157,7 @@ The Blazor Diagram component followed the [keyboard interaction](https://www.w3.
 
 N> You can download a complete working sample for keyboard navigation from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Accessibility/KeyBoardNavigation)
 
-## Ensuring accessibility
+## Ensuring Accessibility
 
 The Blazor diagram component's accessibility levels are ensured through an [axe-core](https://www.nuget.org/packages/Deque.AxeCore.Playwright) with playwright tests.
 

diff --git a/blazor/diagram/annotations/appearance.md b/blazor/diagram/annotations/appearance.md
@@ -9,7 +9,7 @@ documentation: ug
 
 # Appearance in Blazor Diagram Component
 
-## How to update size of an annotation
+## How to Update Size of an Annotation
 
 The diagram allows you to set size for annotations by using the Height and Width properties. The default value of the [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Annotation.html#Syncfusion_Blazor_Diagram_Annotation_Width) and [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Annotation.html#Syncfusion_Blazor_Diagram_Annotation_Height) properties is 0, and it takes the node or connector size as default. The following code example shows how the annotation size is customized.
 
@@ -48,7 +48,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync
 
 ![Changing Annotation Size in Blazor Diagram](../images/blazor-diagram-annotation-size.png)
 
-## How to add hyperlink to an annotation
+## How to Add Hyperlink to an Annotation
 
 The diagram provides support to add a [Hyperlink](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Annotation.html#Syncfusion_Blazor_Diagram_Annotation_Hyperlink) to the node's or connector's annotation. It can also be customized.
 
@@ -94,7 +94,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync
 
 ![Annotation with Hyperlink in Blazor Diagram](../images/blazor-diagram-annotation-with-hyperlink.png)
 
-### How to update hyperlink with content
+### How to Update Hyperlink Content in Annotations
 
 ```cshtml
 @using Syncfusion.Blazor.Diagram
@@ -139,7 +139,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync
 
 ![HyperLink with Content in Blazor Diagram](../images/blazor-diagram-hyperlink-content.png)
 
-## How to change text wrapping
+## How to Change Text Wrapping
 
 The [TextWrapping](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.TextStyle.html#Syncfusion_Blazor_Diagram_TextStyle_TextWrapping) property of an annotation defines how the text should be wrapped. When text overflows node boundaries, you can control it by using the `TextWrapping`. So, it is wrapped into multiple lines. The following code explains how to wrap a text in a node.
 
@@ -190,7 +190,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync
 | Wrap | Text-wrapping occurs, when the text overflows beyond the available node width. | ![Text Wrapping in Blazor Diagram](../images/blazor-diagram-text-wrapping.png) |
 | WrapWithOverflow (Default) | Text-wrapping occurs, when the text overflows beyond the available node width. However, the text may overflow beyond the node width in the case of a very long word. | ![Blazor Diagram Text Wrapping with Overflow](../images/blazor-diagram-text-wrap-with-overflow.png) |
 
-### How to update text overflow
+### How to Update Text Overflow
 
 The [TextOverflow](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.TextStyle.html#Syncfusion_Blazor_Diagram_TextStyle_TextOverflow) property specifies how the overflowed content that is not displayed should be signaled to the user. The TextOverflow property can have the following values.
 
@@ -256,7 +256,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync
 
 N>**Note :** All the customization over the overflow is also applicable to connector’s annotation.
 
-## How to customize the appearance of an annotation
+## How to Customize the Appearance of an Annotation
 
 You can change the font style of the annotations with the font specific properties such as FontSize, FontFamily, and Color. The following code explains how to customize the appearance of the annotation.
 
@@ -316,7 +316,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync
 
 ![Blazor Diagram Label with Custom Annotation](../images/blazor-diagram-label-with-custom-annotation.png)
 
-## How to update the annotation style at runtime
+## How to Update the Annotation Style at Runtime
 
 You can change the font style of the annotations with the font specific properties such as [FontSize](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.TextStyle.html#Syncfusion_Blazor_Diagram_TextStyle_FontSize), [FontFamily](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.TextStyle.html#Syncfusion_Blazor_Diagram_TextStyle_FontFamily), and [Color](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.TextStyle.html#Syncfusion_Blazor_Diagram_TextStyle_Color). The following code explains how to update the font style of the annotation.
 
@@ -382,7 +382,7 @@ You can change the font style of the annotations with the font specific properti
 ```
 You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/Appearance/AnnotationStyleatRunTime)
 
-## How to change the editing mode
+## How to Change the Editing Mode
 
 The diagram provides support to edit an annotation at runtime, either programmatically or interactively. By default, the annotation is in view mode. However, it can be brought into edit mode in two ways.
 
@@ -393,7 +393,7 @@ The diagram provides support to edit an annotation at runtime, either programmat
 
 Double-clicking any annotation will enable the editing and the node enables first annotation editing. When the focus of editor is lost, the annotation for the node is updated. 
 
-## How to set read only constraints for annotation
+## How to Set Read Only Constraints for Annotation
 
 The diagram allows you to create read-only annotations. You have to set the read-only property of annotation to enable or disable the [ReadOnly](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.AnnotationConstraints.html#Syncfusion_Blazor_Diagram_AnnotationConstraints_ReadOnly) constraints. The following code explains how to enable read-only mode.
 
@@ -434,7 +434,7 @@ The diagram allows you to create read-only annotations. You have to set the read
 ```
 You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/Appearance/ReaonlyConstraints)
 
-## How to create multiple annotations
+## How to Create Multiple Annotations
 
 You can add any number of annotations to a node or connector. The following code example shows how to add multiple annotations to a node. 
 
@@ -522,7 +522,7 @@ N>* Type of the annotation’s property of the node or connector is ObservableCo
 <br/>* All the same customization can be applicable for the annotations.
 <br/>* Text Editing can be started only the first annotation of the annotation collection when you double click the node or connector.
 
-## How to update annotation constraints
+## How to Update Annotation Constraints
 
 [AnnotationConstraints](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.AnnotationConstraints.html) are used to enable or disable certain behaviors of the annotation. Constraints are provided as flagged enumerations, so that multiple behaviors can be enabled or disabled with bitwise operators.
 

diff --git a/blazor/diagram/annotations/connector-annotation.md b/blazor/diagram/annotations/connector-annotation.md
@@ -7,7 +7,7 @@ control: Diagram Component
 documentation: ug
 ---
 
-# How to position connector’s annotation
+# Connector Annotation in Blazor Diagram Component
 
 Annotations of a connector can be positioned using the following properties of Annotation class.
 
@@ -19,7 +19,7 @@ Annotations of a connector can be positioned using the following properties of A
 * VerticalAlignment
 * Margin
 
-## How to update offset for annotations
+## How to Update the Offset for Annotations
 
 The [Offset](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.PathAnnotation.html#Syncfusion_Blazor_Diagram_PathAnnotation_Offset) property of an annotation is used to align the annotations based on fractions. A value of 0 represents Top-Left corner, 1 represents Bottom-Right corner, and 0.5 represents half of Width/Height.
 
@@ -78,7 +78,7 @@ The following image shows the relationship between the annotation position and o
 > * By default, offset value of the connector annotation is 0.5.
 > * Connector annotation's Id should not start with numbers or special characters and should not contain special characters such as underscores(_) or spaces.
 
-## How to change the alignment of an annotation
+## How to Change the Alignment of an Annotation
 
 The connector’s annotation can be aligned over its segment path using the [Alignment](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.PathAnnotation.html#Syncfusion_Blazor_Diagram_PathAnnotation_Alignment) property of the annotation.
 
@@ -129,7 +129,7 @@ The following screenshot shows how the annotation of the connector aligned over
 
 N> By default, Alignment value of the connector annotation is `Center`.
 
-## How to change the displacement of an annotation
+## How to Change the Displacement of an Annotation
 
 The [Displacement](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.PathAnnotation.html#Syncfusion_Blazor_Diagram_PathAnnotation_Displacement) property is used to dislocate the annotation by the value given. By default, annotation will be in centered on the connector path. When you assign a value to the Displacement property, the annotation will be displaced from its position by displacement value.
 
@@ -173,7 +173,7 @@ The [Displacement](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagr
 ```
 You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/AnnotationOfConnector/DisplacementOfAnnotation)
 
-## How to update the segment angle of an annotation
+## How to Update the Segment Angle of an Annotation
 
 The [SegmentAngle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.PathAnnotation.html#Syncfusion_Blazor_Diagram_PathAnnotation_SegmentAngle) property is used to rotate the annotation based on the connectors segment direction. By default, the annotation will be rotated in the connector path. When you assign a value to the SegmentPath property, the annotation will be rotated from its position based on the connector segment direction.
 

diff --git a/blazor/diagram/annotations/events.md b/blazor/diagram/annotations/events.md
@@ -7,9 +7,9 @@ control: Diagram Component
 documentation: ug
 ---
 
-# Events in Blazor Diagram Component
+# Annotation Events in Blazor Diagram Component
 
-## Text Change event
+## Text Change Event
 
 * While editing a node's or connector's annotation, the following event can be used to do the customization.
 * When a node's or connector's annotation is changed in the diagram, this event is getting triggered. 

diff --git a/blazor/diagram/annotations/labels.md b/blazor/diagram/annotations/labels.md
@@ -11,7 +11,7 @@ documentation: ug
 
 The [Annotation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Annotation.html) is a block of text that can be displayed over a node or connector and it is used to textually represent an object with a string that can be edited at run time. Multiple annotations can be added to a node or connector.
 
-## How to create annotation
+## How to Create Annotation
 
 An annotation can be added to a node or connector by defining the annotation object and adding it to the annotation collection of the node or connector. The [Content](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Annotation.html#Syncfusion_Blazor_Diagram_Annotation_Content) property of the annotation defines the text to be displayed. 
 
@@ -78,7 +78,7 @@ N>* [ID](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Annotat
 <br/>* By default, connector’s path annotation positioned in center point of its path.
 >**Note:** Do not use underscores(_) for annotation's id.
 
-## How to add annotation at runtime
+## How to Add Annotation at Runtime
 
 You can add an annotation at runtime to the Annotations collection of the node/connector in the diagram component by using the `Add` method.
 
@@ -140,7 +140,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync
 
 ![Adding Annotation in Blazor Diagram](../images/blazor-diagram-add-annotation.png)
 
-## How to remove annotations at runtime
+## How to Remove Annotations at Runtime
 
 A collection of annotations can be removed from a node by using the `RemoveAt` method. The following code explains how to remove an annotation from a node.
 
@@ -202,7 +202,7 @@ Also, a collection of annotations can be removed from the node by using the `Rem
 N>* You can delete multiple annotations from a node to pass the collection of annotation objects as argument.
 <br/>* The `Add`, `Remove`, and `RemoveAt` methods are applicable for connectors too.
 
-## How to update annotation at runtime
+## How to Update Annotation at Runtime
 
 You can get the annotation directly from the node’s annotations collection property and you can change any annotation properties at runtime.
 

diff --git a/blazor/diagram/annotations/node-annotation.md b/blazor/diagram/annotations/node-annotation.md
@@ -7,7 +7,7 @@ control: Diagram Component
 documentation: ug
 ---
 
-# How to position node’s annotation
+# Node Annotation in Blazor Diagram Component
 
 The diagram allows you to customize the position and appearance of the annotation efficiently. Annotations can be aligned relative to the node boundaries. It has Margin, Offset, Horizontal, and Vertical alignment settings. It is quite tricky when all four alignments are used together but gives more control over alignments properties of the [ShapeAnnotation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ShapeAnnotation.html) class. Annotations of a node can be positioned using the following properties of `ShapeAnnotation`.
 
@@ -16,7 +16,7 @@ The diagram allows you to customize the position and appearance of the annotatio
 * VerticalAlignment
 * Margin
 
-## How to change the offset of an annotation
+## How to Change the Offset of an Annotation
 
 The [Offset](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ShapeAnnotation.html#Syncfusion_Blazor_Diagram_ShapeAnnotation_Offset) property of an annotation is used to align the annotations based on fractions. 0 represents top/left corner, 1 represents bottom/right corner, and 0.5 represents half of width/height.
 
@@ -77,7 +77,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync
 > * Type of the offset property for a connector’s path annotation is double.
 > * Node annotation's Id should not start with numbers or special characters and should not contain special characters such as underscores(_) or spaces.
 
-## How to change the alignment of an annotation
+## How to Change the Alignment of an Annotation
 
 The [HorizontalAlignment](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Annotation.html#Syncfusion_Blazor_Diagram_Annotation_HorizontalAlignment) property of an annotation is used to set how the annotation is horizontally aligned at the annotation position determined from the fraction values. The [VerticalAlignment](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Annotation.html#Syncfusion_Blazor_Diagram_Annotation_VerticalAlignment) property is used to set how the annotation is vertically aligned at the annotation position.
 
@@ -140,7 +140,7 @@ N>* The value of the `HorizontalAlignment` is [Center](https://help.syncfusion.c
 <br/>* The value of the `VerticalAlignment` is [Center](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.VerticalAlignment.html#Syncfusion_Blazor_Diagram_VerticalAlignment_Center) by default.
 <br/>* Alignment is positioned based on the offset value.
 
-## How to change the margin of an annotation
+## How to Change the Margin of an Annotation
 
 [Margin](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Annotation.html#Syncfusion_Blazor_Diagram_Annotation_Margin) is an absolute value used to add some blank space to any one of its four sides. The annotations can be displaced with the margin property. The following code example explains how to align an annotation based on its Offset, HorizontalAlignment, VerticalAlignment, and Margin values.
 
@@ -185,7 +185,7 @@ N>* The value of the `HorizontalAlignment` is [Center](https://help.syncfusion.c
 You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/AnnotationOfNode/MarginOfAnnotation)
 
 
-## How to align the text
+## How to Align the Text
 
 The [TextAlign](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.TextStyle.html#Syncfusion_Blazor_Diagram_TextStyle_TextAlign) property of an annotation allows you to set how the text should be aligned (Left, Right, Center, or Justify) inside the text block. The following code explains how to set TextAlign for an annotation.