Example of Annotations in Blazor Diagram Component

This sample demonstrates how to add textual annotations to diagram shapes and customize their position and appearance.

Annotation features:

• Add textual descriptions to diagram shapes using the Annotations property.
• Customize annotation position using the Offset, HorizontalAlignment, and VerticalAlignment properties.
• Style annotations using Bold, Italic, FontSize, and FontFamily properties.
• Interact with annotation text using AnnotationConstraints options such as Select, Drag, Resize, and Rotate, which define annotation behavior and user interaction.
• Configure hyperlinks using the HyperlinkSettings object. The Url property specifies the navigation link, and the Content property defines the display text (shown as Link Text in the UI). If no content is provided, the URL is displayed by default. The HyperlinkOpenMode property specifies how the hyperlink is opened when clicked:
  • Self - Opens the hyperlink in the current browser tab.
  • Blank - Opens the hyperlink in a new browser tab.

Looking for the full Blazor Diagram component overview, features, pricing, and documentation? Visit the Blazor Diagram page.