Class Annotation

Represents the textual content of nodes and connectors in a diagram.

Inheritance
System.Object
DiagramObject
Annotation
PathAnnotation
ShapeAnnotation
Implements
System.ICloneable
Inherited Members
Namespace: Syncfusion.Blazor.Diagram
Assembly: Syncfusion.Blazor.dll
Syntax
public class Annotation : DiagramObject, IDiagramObject, ICloneable
Remarks

The Annotation class is used to provide text annotations for diagram elements such as nodes and connectors.

This class is typically used within a Node or Connector to specify text content that appears on the diagram element.

///
Examples
Node node = new Node() {
    Width = 100,
    Height = 100,
    OffsetX = 100,
    OffsetY = 100,
    Annotations = new DiagramObjectCollection<ShapeAnnotation>() 
    {
        new ShapeAnnotation { Content = "Node" }
    }
};

Constructors

Annotation()

Initializes a new instance of an Annotation.

Declaration
public Annotation()

Annotation(Annotation)

Initializes a new instance of the Annotation class by copying details from the specified source Annotation.

Declaration
public Annotation(Annotation src)
Parameters
Type Name Description
Annotation src

The source Annotation to copy from. Must not be null.

Properties

AdditionalInfo

Gets or sets the custom properties of an Annotation.

Declaration
public Dictionary<string, object> AdditionalInfo { get; set; }
Property Value
Type Description
System.Collections.Generic.Dictionary<System.String, System.Object>

A System.Collections.Generic.Dictionary<, > of System.String keys and System.Object values containing custom data. The default value is null.
Remarks

This property is useful for storing application-specific metadata that needs to persist with the annotation across save and load operations.

Examples

This example demonstrates how to set custom properties for an annotation using the AdditionalInfo property.

Dictionary<string, object> dict = new Dictionary<string, object>();
dict.Add("node", "Annotation1");
Annotations = new DiagramObjectCollection<ShapeAnnotation>()
{
    new ShapeAnnotation()
    {
       Content = "Annotation",
       AdditionalInfo = dict
    }
};

Constraints

Gets or sets the behavioral constraints that control annotation interactions and capabilities.

Declaration
public AnnotationConstraints Constraints { get; set; }
Property Value
Type Description
AnnotationConstraints

An AnnotationConstraints enumeration specifying the enabled behaviors. The default value is InheritReadOnly.
Remarks

Constraints enable or disable specific interactive functionalities.

For instance, setting ReadOnly makes the annotation non-editable while preserving other interactions.

Examples
Node node = new Node()
{
    Annotations = new DiagramObjectCollection<ShapeAnnotation>() 
    { 
        new ShapeAnnotation 
        { 
            Content = "Node",
            Constraints = AnnotationConstraints.ReadOnly,
        }
    },
};

Content

Gets or sets the textual information of the node or connector.

Declaration
public string Content { get; set; }
Property Value
Type Description
System.String

A System.String representing the content of the annotation. The default value is null.
Remarks

This property holds the main textual content that describes the connected diagram elements.

Examples

How to add content to a node annotation:

Node node = new Node()
{
    Annotations = new DiagramObjectCollection<ShapeAnnotation>() 
    { 
        new ShapeAnnotation { Content = "Node" }
    },
};

Height

Gets or sets the height of the Annotation in pixels.

Declaration
public Nullable<double> Height { get; set; }
Property Value
Type Description
System.Nullable<System.Double>

A nullable System.Double representing the height of the annotation in pixels. The default value is null.
Remarks

When the height is not specified (null), the annotation renders based on the height of its content automatically.

Examples

The following example demonstrates how to set the height of an annotation:

Node node = new Node()
{
    Annotations = new DiagramObjectCollection<ShapeAnnotation>() 
    { 
        new ShapeAnnotation 
        { 
            Content = "Node",
            ID = "Annotation",
            Height = 100,
        }
    },
};

HorizontalAlignment

Gets or sets the horizontal alignment of the text within the Annotation relative to its parent node or connector.

Declaration
public HorizontalAlignment HorizontalAlignment { get; set; }
Property Value
Type Description
HorizontalAlignment

A HorizontalAlignment value that specifies how the annotation text is horizontally positioned. The default value is Center.
Remarks

This property determines how the annotation content is aligned horizontally within its bounds, affecting the visual positioning of text relative to the parent diagram element.

  • Stretch - Stretches the diagram element throughout the node
  • Left - Aligns the diagram element at the left of the node
  • Right - Aligns the diagram element at the right of the node
  • Center - Aligns the diagram element at the center of the node
  • Auto - Aligns the diagram element based on the characteristics of the node
Examples

The following example demonstrates how to set the horizontal alignment of an annotation:

Node node = new Node()
{
    Annotations = new DiagramObjectCollection<ShapeAnnotation>() 
    { 
        new ShapeAnnotation 
        { 
            Content = "Node",
            ID = "Annotation",
            HorizontalAlignment = HorizontalAlignment.Center,
        }
    },
};

Gets or sets the hyperlink URL associated with the annotation.

Declaration
public HyperlinkSettings Hyperlink { get; set; }
Property Value
Type Description
HyperlinkSettings

A System.String representing the hyperlink URL. The default value is string.Empty.

When specified, the annotation becomes clickable and navigates to the provided URL.

Node node = new Node()
{
    Annotations = new DiagramObjectCollection<ShapeAnnotation>() 
    { 
        new ShapeAnnotation 
        { 
            Content = "Node",
            ID = "Annotation",
            Hyperlink =new HyperlinkSettings
             {
               Url=https://hr.syncfusion.com/home
             }
        }
    },
};

ID

Gets or sets the unique identifier of the node's or connector's annotation. Ensures uniqueness among all annotations.

Declaration
public string ID { get; set; }
Property Value
Type Description
System.String

A System.String representing the unique identifier of the annotation. Initialized as null with no default value.
Remarks

The ID needs to be unique. While creating a label, do not use the same ID for multiple labels.

Examples
Node node = new Node()
{
    Annotations = new DiagramObjectCollection<ShapeAnnotation>() 
    { 
        new ShapeAnnotation 
        { 
            Content = "Node",
            ID = "Annotation",
        }
    },
};

Margin

Gets or sets the extra space around an Annotation present in the node/connector.

Declaration
public DiagramThickness Margin { get; set; }
Property Value
Type Description
DiagramThickness

A DiagramThickness representing the margin space around the annotation. The default value is null.
Remarks

The margin property allows you to define additional spacing around the annotation content, providing better visual separation from the parent node or connector boundaries.

Examples
Annotations = new DiagramObjectCollection<ShapeAnnotation>()
{
    new ShapeAnnotation 
    { 
        Content = "Task1",
        Margin = new DiagramThickness() { Top = 10},
    }
}

RotationAngle

Gets or sets the rotation angle of the Annotation in degrees.

Declaration
public double RotationAngle { get; set; }
Property Value
Type Description
System.Double

A System.Double representing the rotation angle in degrees. The default value is 0.
Remarks

The rotation angle is applied clockwise from the annotation's original position, allowing for precise control over the annotation's orientation within the diagram.

Examples

This example demonstrates how to set the rotation angle for a shape annotation.

Node node = new Node()
{
    Annotations = new DiagramObjectCollection<ShapeAnnotation>() 
    { 
        new ShapeAnnotation 
        { 
            Content = "Node",
            ID = "Annotation",
            RotationAngle = 30,    
        }
    },
};

Style

Gets or sets the text style properties for the Annotation.

Declaration
public TextStyle Style { get; set; }
Property Value
Type Description
TextStyle

A TextStyle object that defines the appearance characteristics of the annotation text, including font, color, alignment, and other styling properties. The default value is null.
Remarks

The Style property controls the visual presentation of annotation text, including properties such as font family, font size, text color, text alignment, and text decoration. When set to null, the annotation will use default styling behavior.

Examples
Node node = new Node()
{
    Annotations = new DiagramObjectCollection<ShapeAnnotation>()
    {
        new ShapeAnnotation 
        { 
            Content = "Text align is set as Left",
            Style = new TextStyle() { TextAlign = TextAlign.Left}
        }
    },
    Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "white" },
};

UseTemplate

Gets or sets a value indicating whether the Annotation should be rendered using a custom template defined in AnnotationTemplate.

Declaration
public bool UseTemplate { get; set; }
Property Value
Type Description
System.Boolean

A System.Boolean indicating whether template rendering is enabled. The default value is false.
Remarks

When set to true, the annotation will be rendered using the template defined in the AnnotationTemplate property instead of the default text rendering.

If this property is true but no template is defined in AnnotationTemplate, an empty content will be rendered.

Examples

The following example demonstrates how to enable template rendering for an annotation:

<SfDiagramComponent Nodes="@nodes"/>
<DiagramTemplates>
    <AnnotationTemplate>
        @if(context is Annotation annotation)
        {
            if (annotation.ID == "Annotation1")
            {
                <div style="display: flex; justify-content: center; align-items: center; height: 50px;">
                    <SfTextBox Value="Syncfusion"></SfTextBox>
                </div>
            }
        }
    </AnnotationTemplate>
</DiagramTemplates>
@code
{
    DiagramObjectCollection<Node> nodes = new DiagramObjectCollection<Node>();
    protected override void OnInitialized()
    {
        Node node = new Node()
        {
            ID = "node1",
            Annotations = new DiagramObjectCollection<ShapeAnnotation>()
            {
                new ShapeAnnotation()
                {
                    ID = "Annotation1",
                    UseTemplate = true,
                    Height = 50,
                    Width = 75,
                },
            },
        };
        nodes.Add(node);
    }
}

VerticalAlignment

Gets or sets the vertical alignment of the text to the parent node/connector.

Declaration
public VerticalAlignment VerticalAlignment { get; set; }
Property Value
Type Description
VerticalAlignment

A VerticalAlignment specifying how the annotation is vertically positioned relative to its parent element. The default value is Center.
Remarks

This property determines how the annotation content is positioned vertically within the bounds of its parent node or connector.

The vertical alignment affects the visual positioning and can be combined with horizontal alignment for precise annotation placement.

  • Stretch - Stretches the diagram element throughout the node
  • Top - Aligns the diagram element at the top of the node
  • Bottom - Aligns the diagram element at the bottom of the node
  • Center - Aligns the diagram element at the center of the node
  • Auto - Aligns the diagram element based on the characteristics of the node
Examples

The following example demonstrates how to set the vertical alignment of an annotation to center position.

Node node = new Node()
{
    Annotations = new DiagramObjectCollection<ShapeAnnotation>() 
    { 
        new ShapeAnnotation 
        { 
            Content = "Node",
            ID = "Annotation",
            VerticalAlignment = VerticalAlignment.Center,
        }
    },
};

Visibility

Gets or sets the visibility of the Annotation. When set to true, the annotation is visible on the diagram; when set to false, the annotation is hidden.

Declaration
public bool Visibility { get; set; }
Property Value
Type Description
System.Boolean

A System.Boolean indicating whether the annotation is visible on the diagram. The default value is true.
Remarks

This property controls the visual display of the annotation within the diagram. Hidden annotations do not participate in layout calculations or user interactions.

Changing the visibility dynamically will trigger property change notifications to update the diagram rendering.

Examples

This example demonstrates how to set the visibility of an annotation when creating a node.

Node node = new Node()
{
    Annotations = new DiagramObjectCollection<ShapeAnnotation>() 
    { 
        new ShapeAnnotation 
        { 
            Content = "Node",
            ID = "Annotation",
            Visibility = true,
        }
    },
};

Width

Gets or sets the width of the Annotation. If the width is not specified, it displays based on the content's width.

Declaration
public Nullable<double> Width { get; set; }
Property Value
Type Description
System.Nullable<System.Double>

A System.Double? representing the width of the annotation in pixels. The default value is null.
Remarks

When the width is set to null, the annotation automatically adjusts its width based on the content size.

Examples

The following example demonstrates how to set the width of an annotation:

Node node = new Node()
{
    Annotations = new DiagramObjectCollection<ShapeAnnotation>() 
    { 
        new ShapeAnnotation 
        { 
            Content = "Node",
            ID = "Annotation",
            Width = 100,
        }
    },
};

Methods

Clone()

Creates a new object that is a copy of the current annotation.

Declaration
public override object Clone()
Returns
Type Description
System.Object

A new object that is a copy of this annotation
Overrides

Implements

System.ICloneable