How to Render Layout With Annotation Template in React Diagram?

In Syncfusion® React Diagram, you can render templated annotations for nodes using a template. This allows you to display custom HTML elements or styled content inside the diagram nodes. The position of the annotations can be controlled using the horizontalAlignment and verticalAlignment properties. To ensure proper alignment, it is necessary to specify the width and height properties for the annotations.

Below is a sample implementation of this approach.

1. Define the Template:
   Use the template property in the annotations array of a node to include custom HTML content, such as buttons, inputs, or any styled div elements.

let localBindData = [
 {
   Id: 'parent',
   Role: 'Board',
   color: '#71AF17',
   annotations: [
     {
       id: 'label1',
       template: '<div><input type="button" value="Submit"></div>',
     },
   ],
 },
] 

2. Configure the doBinding :
   When binding data to the diagram, use the doBinding method is used to dynamically assign the annotation template and set additional properties like width, height, and alignment. This ensures the template is displayed correctly within the node.

<DiagramComponent
           id="diagram"
           ref={(diagram) => (diagramInstance = diagram)}
           //configures data source settings
           dataSourceSettings={{
             dataSource: new DataManager(localBindData),
             doBinding: (nodeModel, data, diagram) => {
               nodeModel.shape = {
                 type: 'Basic',
               };
               nodeModel.annotations = data.annotations;
               nodeModel.annotations[0].width = 50;
               nodeModel.annotations[0].height = 50;
               nodeModel.annotations[0].horizontalAlignment = 'Center';
               nodeModel.annotations[0].verticalAlignment = 'Center';
             },
           }}
         > 

Sample: Click Here

Conclusion
I hope you enjoyed learning about how to render layout with annotation template in React Diagram.

You can refer to our React Diagram feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications.

You can also explore our React Diagram example to understand how to create and manipulate data. For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion®, you can try our 30-day free trial to check out our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!