BPMN Text Annotation in Blazor Diagram Component

7 Jul 20224 minutes to read

• A BPMN object can be associated with a text annotation that does not affect the flow but gives details about objects within a flow. The annotation property of the node 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.

• The annotation angle property is used to set the angle between the BPMN shape and the annotation.

• The annotation direction property is used to set the direction of the text annotation.

• To set the size for text annotation, use width and height properties.

• The annotation length property is used to set the distance between the BPMN shape and the annotation.

• The annotation text property defines the additional information about the flow object in a BPMN process.

@using Syncfusion.Blazor.Diagrams
@using System.Collections.ObjectModel

@* Initialize Diagram *@
<SfDiagram Height="600px" Nodes="@NodeCollection">
</SfDiagram>

@code{
    //Defines diagram's node collection
    public ObservableCollection<DiagramNode> NodeCollection { get; set; }

    protected override void OnInitialized()
    {
        NodeCollection = new ObservableCollection<DiagramNode>();
        DiagramNode node = new DiagramNode()
        {
            //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 DiagramShape()
            {
                Type = Shapes.Bpmn,
                BpmnShape = BpmnShapes.DataObject,
                //Sets collection as true when Dataobject is not a Single instance
                DataObject = new DiagramBpmnDataObject()
                {
                    Collection = true,
                    Type = BpmnDataObjects.Input
                }
            },
            //Sets the id, angle, and text for the annotation
            Annotations = new ObservableCollection<DiagramNodeAnnotation>()
            {
                new DiagramNodeAnnotation()
                {
                    Id="Left",
                    RotateAngle=45,
                    Content="Left"
                }
            }
        };
        NodeCollection.Add(node);
    }
}