Skip to content

958831: Update Ug for SEO #6031

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 4 commits into
base: development
Choose a base branch
from
Open

958831: Update Ug for SEO #6031

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
cf51fc5
958831: Update Ug for SEO
RamyaSubramaniSF4537 May 21, 2025
163e93f
958831: Update Ug for SEO
RamyaSubramaniSF4537 May 22, 2025
f1f68f8
958831: Update Ug for SEO
RamyaSubramaniSF4537 May 27, 2025
0b59892
Merge branch 'development' into ES-958831-SEO
RamyaSubramaniSF4537 May 28, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions blazor/diagram/accessibility.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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:

Expand Down Expand Up @@ -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.

Expand Down
22 changes: 11 additions & 11 deletions blazor/diagram/annotations/appearance.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.

Expand Down Expand Up @@ -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.

Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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.

Expand Down Expand Up @@ -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.

Expand Down Expand Up @@ -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.

Expand Down Expand Up @@ -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.

Expand Down Expand Up @@ -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.

Expand All @@ -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.

Expand Down Expand Up @@ -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.

Expand Down Expand Up @@ -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.

Expand Down
10 changes: 5 additions & 5 deletions blazor/diagram/annotations/connector-annotation.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ control: Diagram Component
documentation: ug
---

# How to position connector’s annotation
# How to Position Connector’s Annotation

Annotations of a connector can be positioned using the following properties of Annotation class.

Expand All @@ -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.

Expand Down Expand Up @@ -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.

Expand Down Expand Up @@ -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.

Expand Down Expand Up @@ -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.

Expand Down
2 changes: 1 addition & 1 deletion blazor/diagram/annotations/events.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ documentation: ug

# 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.
Expand Down
8 changes: 4 additions & 4 deletions blazor/diagram/annotations/labels.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.

Expand Down Expand Up @@ -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.

Expand Down Expand Up @@ -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.

Expand Down Expand Up @@ -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.

Expand Down
10 changes: 5 additions & 5 deletions blazor/diagram/annotations/node-annotation.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ control: Diagram Component
documentation: ug
---

# How to position node’s annotation
# How to Position a Node’s Annotation

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`.

Expand All @@ -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.

Expand Down Expand Up @@ -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.

Expand Down Expand Up @@ -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.

Expand Down Expand Up @@ -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.

Expand Down
Loading