BPMN Text Annotation in Blazor Diagram Component

4 Mar 20247 minutes to read

A BPMN object can be associated with a text annotation that does not affect the flow but provides information about objects within a flow.
A TextAnnotation points to or references another BPMN shape, which we call the TextAnnotationTarget of the TextAnnotation. When a target shape is moved, copied, or deleted, any TextAnnotations attached to the shape will be moved, copied, or deleted too. Thus, the TextAnnotations remain with their target shapes though you can reposition the TextAnnotation to any offset from its target. The TextAnnotationTarget property of the BpmnTextAnnotation is used to connect an annotation element to the BPMN Node.
The annotation element can be switched from a BPMN node to another BPMN node simply by dragging the source end of the annotation connector into the other BPMN node.
By default, the TextAnnotation shape has a connection.
The TextAnnotationDirection property is used to set the shape direction of the text annotation.
By default, the TextAnnotationDirection is set to a Left.
To set the size for text annotation, use the Width and Height properties of the node.
The OffsetX and OffsetY properties are used to set the distance between the BPMN node and the TextAnnotation.
The TextAnnotation element can be moved (if their have connected with any BPMN Node) while dragging the BPMN node.

@using Syncfusion.Blazor.Diagram

@* Initialize Diagram *@
<SfDiagramComponent Height="600px" Nodes="@nodes" />

@code
{
    // Initialize node collection with Node.
    DiagramObjectCollection<Node> nodes;

    protected override void OnInitialized()
    {
        nodes = new DiagramObjectCollection<Node>();
        Node node = new Node()
        {
            // Position of the node.
            OffsetX = 100,
            OffsetY = 100,
            // Size of the node.
            Width = 100,
            Height = 100,
            // Unique Id of the node.
            ID = "node1",
            // Sets type as Bpmn and shape as DataObject
            Shape = new BpmnTextAnnotation()
            {
                TextAnnotationDirection = TextAnnotationDirection.Auto,
            },
            Annotations = new DiagramObjectCollection<ShapeAnnotation>()
            {
                new ShapeAnnotation()
                {
                    Content = "Text",
                },
            }
        };
        nodes.Add(node);
    }
}

You can download a complete working sample from GitHub

Auto BPMN Shape

The following code example represents how to create a TextAnnotation and connect the Activity and TextAnnotation shape.

@using Syncfusion.Blazor.Diagram

@* Initialize Diagram *@
<SfDiagramComponent Height="600px" Nodes="@nodes" />

@code
{
    // Initialize node collection with Node.
    DiagramObjectCollection<Node> nodes;

    protected override void OnInitialized()
    {
        nodes = new DiagramObjectCollection<Node>();
        Node node1 = new Node()
        {
            // Position of the node.
            OffsetX = 500,
            OffsetY = 500,
            // Size of the node.
            Width = 100,
            Height = 100,
            // Unique Id of the node.
            ID = "node1",
            // Sets the type of shape to Bpmn and shape to activity.
            Shape = new BpmnActivity() 
            { 
                ActivityType = BpmnActivityType.Task 
            },
        };
        nodes.Add(node1);
        Node node2 = new Node()
        {
            // Position of the node.
            OffsetX = 600,
            OffsetY = 350,
            // Size of the node.
            Width = 100,
            Height = 100,
            // Unique Id of the node.
            ID = "node2",
            // Sets type as Bpmn and shape as DataObject
            Shape = new BpmnTextAnnotation()
            {
                TextAnnotationDirection = TextAnnotationDirection.Bottom,
                TextAnnotationTarget = "node1"
            },
            Annotations = new DiagramObjectCollection<ShapeAnnotation>()
            {
                new ShapeAnnotation()
                {
                    Content = "Text",
                },
            }
        };
        nodes.Add(node2);
    }
}

You can download a complete working sample from GitHub

Auto BPMN Shape

How to connect the TextAnnotation to BPMNNode

Drag and drop any bpmn shapes from the palette to diagram and connect the BPMN Node and TextAnnotation.

The following image shows how to drag a symbol from the palette and connect the TextAnnotation to the BPMNNode with interaction.

Auto BPMN Shape