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
@@ -1,13 +1,13 @@
 ---
 layout: post
-title: Accessibility in Blazor Diagram Component | Syncfusion
+title: Controlling Accessibility in Blazor Diagrams | Syncfusion
 description: Checkout and Learn all about accessibility in Syncfusion Blazor Diagram component and many more details.
 platform: Blazor
 control: Diagram
 documentation: ug
 ---
 
-# Accessibility in Blazor Diagram Component
+# Controlling Accessibility in Blazor Diagrams
 
 Accessibility in the Blazor diagram component is achieved through compliance with the [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), and [WCAG 2.2](https://www.w3.org/TR/WCAG22/) standards, as well as [WCAG roles](https://www.w3.org/TR/wai-aria/#roles) and support for keyboard navigation. This ensures that users can effectively interact with the diagram features using assistive technologies such as screen readers.
 
@@ -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
@@ -1,15 +1,15 @@
 ---
 layout: post
-title: Appearance in Blazor Diagram Component | Syncfusion
+title: Controlling Annotation Appearance in Blazor Diagrams | Syncfusion
 description: Checkout and learn here all about Appearance in Syncfusion Blazor Diagram component and much more details.
 platform: Blazor
 control: Diagram Component
 documentation: ug
 ---
 
-# Appearance in Blazor Diagram Component
+# Controlling Annotation Appearance in Blazor Diagrams
 
-## 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
@@ -1,13 +1,13 @@
 ---
 layout: post
-title: Annotation for Connector in Blazor Diagram Component | Syncfusion
+title: Controlling Connector Annotation in Blazor Diagrams | Syncfusion
 description: Checkout and learn here all about Annotation for Connector in Syncfusion Blazor Diagram component and more.
 platform: Blazor
 control: Diagram Component
 documentation: ug
 ---
 
-# How to position connector’s annotation
+# Controlling Connector Annotation in Blazor Diagrams
 
 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
@@ -1,15 +1,15 @@
 ---
 layout: post
-title: Events in Blazor Diagram Component | Syncfusion
+title: Controlling Annotation Events in Blazor Diagrams | Syncfusion
 description: Checkout and learn here all about Events in Syncfusion Blazor Diagram component and much more details.
 platform: Blazor
 control: Diagram Component
 documentation: ug
 ---
 
-# Events in Blazor Diagram Component
+# Controlling Annotation Events in Blazor Diagrams
 
-## 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. 
@@ -65,7 +65,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync
 
 ## See also
 
-* [How to add or remove annotation constraints](../constraints/#annotation-constraints)
+* [How to add or remove annotation constraints](../constraints#annotation-constraints)
 
 * [How to customize the annotation](./appearance)
 

diff --git a/blazor/diagram/annotations/interactions.md b/blazor/diagram/annotations/interactions.md
@@ -1,13 +1,13 @@
 ---
 layout: post
-title: Interaction in Blazor Diagram Component | Syncfusion
+title: Controlling Annotation Interaction in Blazor Diagrams | Syncfusion
 description: Checkout and learn here all about Interaction in Syncfusion Blazor Diagram component and much more details.
 platform: Blazor
 control: Diagram Component
 documentation: ug
 ---
 
-# Annotation Interaction in Blazor Diagram Component
+# Controlling Annotation Interaction in Blazor Diagrams
 
 Diagram provides the support to the annotations rotation interactively.
 

diff --git a/blazor/diagram/annotations/labels.md b/blazor/diagram/annotations/labels.md
@@ -1,17 +1,17 @@
 ---
 layout: post
-title: Actions of Annotation in Blazor Diagram Component | Syncfusion
+title: Controlling Annotation in Blazor Diagrams | Syncfusion
 description: Checkout and learn here all about actions of annotation in Syncfusion Blazor Diagram component and more.
 platform: Blazor
 control: Diagram Component
 documentation: ug
 ---
 
-# Annotation in Blazor Diagram Component
+# Controlling Annotation in Blazor Diagrams
 
 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.