Add Meaningful Labels to Diagram Elements

Annotations are text labels displayed on nodes or connectors. They help describe diagram elements, relationships, conditions, values, and process flow, and multiple annotations can be added to the same element.

Annotation text can wrap onto multiple lines or be clipped and shortened with an ellipsis when it exceeds the available space. Alignment, size, and offset settings can also be adjusted to improve label placement in detailed diagrams.

Yes. Node annotations can be aligned and offset relative to the node’s bounds, while connector annotations can be positioned along a connector path. These settings help place labels where they are easier to read.

Yes. React Diagram supports multiple labels on the same node or connector to show primary text, secondary details, status, or other information. This groups related information in one location without creating additional diagram elements.

Yes. Node annotations add text labels to show names, roles, statuses, or values, while connector annotations explain relationships, transitions, conditions, or flow between connected elements. Using both together creates more complete and understandable diagrams.

Yes. Annotation text can be edited directly in the diagram when editing is enabled. Annotation properties can also be updated while the application is running, allowing labels to reflect changes without recreating the node or connector.

Yes. Annotation templates can display custom HTML or SVG content on nodes and connectors. For example, a template can show an icon alongside label text to help users identify applications, services, databases, and other diagram elements.

Yes. Label interaction can be enabled when users need to select or adjust annotations in the diagram, or disabled when label placement should remain fixed. This allows applications to control whether users can interact with annotations.