How to create layout with HTML node in React Diagram

HTML elements can be seamlessly integrated into diagrams using the HTML-type node. To designate a node as an HTML node, specify the type within the shape property of the node as HTML.

Our diagram tool comes equipped with a range of built-in automatic layout algorithms, designed to organize nodes automatically following predefined layout logics.
The available layout modes include:

Hierarchical Layout: Organizes nodes in a hierarchical structure.

Organization Chart Layout: Displays the structure of an organization and relationships

Radial Tree Layout: Arranges nodes in a radial pattern emanating from a central point.

Symmetric Layout: Provides a symmetrical arrangement of nodes.

Mind Map Layout: Positions nodes in a way that resembles a mind map.

Complex Hierarchical Tree Layout: An extended version of the hierarchical tree layout where a child can have two or more parents.

These layout modes enhance the visual representation of information in the diagram, offering flexibility and adaptability to different structural requirements.

To create a html node with template:

HTML elements can be incorporated into the diagram using the HTML-type node. The shape property of the node enables you to specify the type of node. The following code exemplifies the creation of an HTML node with a template.

let nodes = [{
   //Id of the node
   id: "Node",
   //Position of the node
   offsetX: 250,
   offsetY: 250,
   //Size of the node
   width: 100,
   height: 100,
   //sets the type of the shape as HTML
   shape: {
       type: 'HTML'
   }
}];
 function nodeTemplate(data) {
   return (
     <div>
       <button>button</button> 
     </div>
   );
 };
 return (
<DiagramComponent
           id="diagram"
           ref={(diagram) => (diagramInstance = diagram)}
           width={'100%'}
           nodes={nodes}
           height={'700px'}
           nodeTemplate={nodeTemplate}
           created={() => {
             diagramInstance.fitToPage();
           }}
         >
           <Inject
             services={[DataBinding, HierarchicalTree, LayoutAnimation]}
           />
         </DiagramComponent>
   )

To create an automatic layout with html node:

To implement an automatic layout, it is necessary to define the layout property of the diagram and specify the desired layout type. Refer to the code snippet below for guidance

 layout={{
             type: 'OrganizationalChart',
             horizontalSpacing: 80,
             verticalSpacing: 70,
           }}

The creation of nodes is determined by the parent-child relationships outlined in the provided data object. Each relationship within the data structure contributes to the generation and organization of nodes within the diagram.

let data = [
   { 'Id': 'parent', 'Role': 'Board', 'color': '#71AF17' },
   { 'Id': '1', 'Role': 'General Manager', 'Manager': 'parent', 'ChartType': 'right', 'color': '#71AF17' },
   { 'Id': '11', 'Role': 'Assistant General Manager', 'Manager': '1', 'color': '#71AF17' },
   { 'Id': '2', 'Role': 'Human Resource Manager', 'Manager': '1', 'ChartType': 'right', 'color': '#1859B7' },
   ]

To define the layout, it’s essential to set the data source using the dataSourceSettings property of the diagram. For implementation details, refer to the code snippet below.

//configures data source settings
           dataSourceSettings={{
             id: 'Id',
             parentId: 'Manager',
             dataSource: new DataManager(data),
           }}

The template for the HTML node can be defined as shown below.

function nodeTemplate(data) {
   return (
     <div>
       <div class=" componentSummary">
         <h1 class="myTitle">{data.data.Role}</h1>
         <div class="componentSummaryDetails">
           <div class="details">
             <h2>0.2 GB</h2>
             <span class="pf-emphasis">DATA2</span>
           </div>
           <div class="details">
             <h2>0.3%</h2>
             <span class="pf-emphasis">DATA3</span>
           </div>
         </div>
       </div>
     </div>
   );
 }

Sample:

Click here for sample

Conclusion

I hope you enjoyed learning about how to create layout with HTML node in React Diagram.

You can refer to our React Diagram feature tour page to know about its other groundbreaking feature representations and documentations. You can also explore our React Diagram example to understand how to present 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 React Diagram and other components.

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