Customizing layout in EJ2 JavaScript Diagram control

1 Jan 202524 minutes to read

Orientation, spacings, and alignment of the layout can be customized with a set of properties.

To explore layout properties, refer to Layout Properties.

Layout bounds

Diagram provides support to align the layout within any custom rectangular area.

The following example shows how to align the layout within the given layout bounds.

ej.diagrams.Diagram.Inject(
  ej.diagrams.UndoRedo,
  ej.diagrams.HierarchicalTree,
  ej.diagrams.DataBinding
);
//Initializes data source
let data = [
  {
    Name: 'Steve-Ceo',
  },
  {
    Name: 'Kevin-Manager',
    ReportingPerson: 'Steve-Ceo',
  },
  {
    Name: 'Peter-Manager',
    ReportingPerson: 'Kevin-Manager',
  },
  {
    Name: 'John- Manager',
    ReportingPerson: 'Peter-Manager',
  },
  {
    Name: 'Mary-CSE ',
    ReportingPerson: 'Peter-Manager',
  },
];
var nodes = [
  {
    id: 'Start',
    width: 140,
    height: 50,
    offsetX: 300,
    offsetY: 50,
    annotations: [
      {
        id: 'label1',
        content: 'Start',
      },
    ],
    shape: { type: 'Flow', shape: 'Terminator' },
  },
];
let items = new ej.data.DataManager(data, new ej.data.Query().take(7));
var diagram = new ej.diagrams.Diagram({
  width: '100%',
  height: '550px',
  //Uses layout to auto-arrange nodes on the Diagram page
  layout: {
    //Sets layout type
    type: 'HierarchicalTree',
    //set layout alignment
    bounds: new ej.diagrams.Rect(0, 0, 500, 500),
    horizontalSpacing: 25,
    verticalSpacing: 30,
    horizontalAlignment: 'Left',
    verticalAlignment: 'Top',
  },
  dataSourceSettings: {
    id: 'Name',
    parentId: 'ReportingPerson',
    dataManager: items,
  },
  getNodeDefaults: (obj) => {
    obj.shape = {
      type: 'Text',
      content: obj.data.Name,
    };
    obj.style = {
      fill: 'None',
      strokeColor: 'none',
      strokeWidth: 2,
      bold: true,
      color: 'white',
    };
    obj.width = 100;
    obj.height = 40;
    obj.borderColor = 'white';
    obj.backgroundColor = '#6BA5D7';
    obj.borderWidth = 1;
    return obj;
  },
  getConnectorDefaults: (connector) => {
    connector.style = {
      strokeColor: '#6BA5D7',
      strokeWidth: 2,
    };
    connector.targetDecorator.style.fill = '#6BA5D7';
    connector.targetDecorator.style.strokeColor = '#6BA5D7';
    connector.type = 'Orthogonal';
    return connector;
  },
});
diagram.appendTo('#element');

// canLog decide whether the entry add or not in history List
diagram.historyManager.canLog = function (entry) {
  //Prevents history entry
  entry.cancel = true;
  console.log(entry);
  return entry;
};
<!DOCTYPE html><html lang="en"><head>
    <title>EJ2 Diagram</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Typescript UI Controls">
    <meta name="author" content="Syncfusion">
    <link href="index.css" rel="stylesheet">
    
    <link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-base/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-buttons/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-popups/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-splitbuttons/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-diagrams/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-navigations/styles/fabric.css" rel="stylesheet">
    
<script src="https://cdn.syncfusion.com/ej2/28.2.3/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    
    <div id="container">
        <div id="element"></div>
    </div>


<script>
var ele = document.getElementById('container');
if(ele) {
  ele.style.visibility = "visible";
}   
      </script>
<script src="index.js" type="text/javascript"></script>
</body></html>

For more information about bounds, refer to bounds.

Layout alignment

The layout can be aligned anywhere over the layout bounds/viewport using the horizontalAlignment and verticalAlignment properties of the layout.

The following code illustrates how to align the layout and how to change layout horizontal and vertical alignment at runtime.

ej.diagrams.Diagram.Inject(
    ej.diagrams.DataBinding,
    ej.diagrams.ComplexHierarchicalTree
  );
  var data = [
    {
      Name: 'Steve-Ceo',
    },
    {
      Name: 'Kevin-Manager',
      ReportingPerson: 'Steve-Ceo',
    },
    {
      Name: 'Peter-Manager',
      ReportingPerson: 'Kevin-Manager',
    },
    {
      Name: 'John- Manager',
      ReportingPerson: 'Peter-Manager',
    },
    {
      Name: 'Mary-CSE ',
      ReportingPerson: 'Peter-Manager',
    },
  ];
  
  var items = new ej.data.DataManager(data, new ej.data.Query().take(7));
  
  var diagram = new ej.diagrams.Diagram({
    width: '100%',
    height: '550px',
    //Uses layout to auto-arrange nodes on the Diagram page
    layout: {
      //Sets layout type
      type: 'HierarchicalTree',
      //set layout alignment
      horizontalSpacing: 25,
      verticalSpacing: 30,
      horizontalAlignment: 'Left',
      verticalAlignment: 'Top',
    },
    dataSourceSettings: {
      id: 'Name',
      parentId: 'ReportingPerson',
      dataManager: items,
    },
    getNodeDefaults: (obj) => {
      obj.shape = {
        type: 'Text',
        content: obj.data.Name,
      };
      obj.style = {
        fill: 'None',
        strokeColor: 'none',
        strokeWidth: 2,
        bold: true,
        color: 'white',
      };
      obj.width = 100;
      obj.height = 40;
      obj.borderColor = 'white';
      obj.backgroundColor = '#6BA5D7';
      obj.borderWidth = 1;
      return obj;
    },
    getConnectorDefaults: (connector) => {
      connector.style = {
        strokeColor: '#6BA5D7',
        strokeWidth: 2,
      };
      connector.targetDecorator.style.fill = '#6BA5D7';
      connector.targetDecorator.style.strokeColor = '#6BA5D7';
      connector.type = 'Orthogonal';
      return connector;
    },
  });
  diagram.appendTo('#element');
  
  let horizontalAlignment = document.getElementById('horizontalAlignment');
  let verticalAlignment = document.getElementById('verticalAlignment');
  
  horizontalAlignment.onchange = (args) => {
    diagram.layout.horizontalAlignment = args.target.value;
    diagram.dataBind();
  };
  
  verticalAlignment.onchange = (args) => {
    diagram.layout.verticalAlignment = args.target.value;
    diagram.dataBind();
  };
<!DOCTYPE html><html lang="en"><head>
    <title>EJ2 Diagram</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Typescript UI Controls">
    <meta name="author" content="Syncfusion">
    <link href="index.css" rel="stylesheet">
    
    <link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-base/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-buttons/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-popups/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-splitbuttons/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-diagrams/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-navigations/styles/fabric.css" rel="stylesheet">
    
<script src="https://cdn.syncfusion.com/ej2/28.2.3/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    
    <div id="container">
        <label>Horizontal Alignment</label>
            <select id="horizontalAlignment">
              <option value="Left">Left</option>
              <option value="Center">Center</option>
              <option value="Right">Right</option>
            </select>

            <label>Vertical Alignment</label>
            <select id="verticalAlignment">
              <option value="Top">Top</option>
              <option value="Center">Center</option>
              <option value="Bottom">Bottom</option>
            </select>
        <div id="element"></div>
    </div>


<script>
var ele = document.getElementById('container');
if(ele) {
  ele.style.visibility = "visible";
}   
      </script>
<script src="index.js" type="text/javascript"></script>
</body></html>

Layout spacing

Layout provides support to add space horizontally and vertically between the nodes. The horizontalSpacing and verticalSpacing properties of the layout allows you to set the space between the nodes in horizontally and vertically.

The following code illustrates how to set the initial horizontal and vertical spacing for the layout, as well as how to change these spacing values at runtime

ej.diagrams.Diagram.Inject(
  ej.diagrams.DataBinding,
  ej.diagrams.ComplexHierarchicalTree
);
var data = [
  {
    Name: 'Steve-Ceo',
  },
  {
    Name: 'Kevin-Manager',
    ReportingPerson: 'Steve-Ceo',
  },
  {
    Name: 'Peter-Manager',
    ReportingPerson: 'Kevin-Manager',
  },
  {
    Name: 'John- Manager',
    ReportingPerson: 'Peter-Manager',
  },
  {
    Name: 'Mary-CSE ',
    ReportingPerson: 'Peter-Manager',
  },
];

var items = new ej.data.DataManager(data, new ej.data.Query().take(7));

var diagram = new ej.diagrams.Diagram({
  width: '100%',
  height: '550px',
  //Uses layout to auto-arrange nodes on the Diagram page
  layout: {
    //Sets layout type
    type: 'HierarchicalTree',
    //set layout alignment
    horizontalSpacing: 25,
    verticalSpacing: 30,
    horizontalAlignment: 'Center',
    verticalAlignment: 'Top',
  },
  dataSourceSettings: {
    id: 'Name',
    parentId: 'ReportingPerson',
    dataManager: items,
  },
  getNodeDefaults: (obj) => {
    obj.shape = {
      type: 'Text',
      content: obj.data.Name,
    };
    obj.style = {
      fill: 'None',
      strokeColor: 'none',
      strokeWidth: 2,
      bold: true,
      color: 'white',
    };
    obj.width = 100;
    obj.height = 40;
    obj.borderColor = 'white';
    obj.backgroundColor = '#6BA5D7';
    obj.borderWidth = 1;
    return obj;
  },
  getConnectorDefaults: (connector) => {
    connector.style = {
      strokeColor: '#6BA5D7',
      strokeWidth: 2,
    };
    connector.targetDecorator.style.fill = '#6BA5D7';
    connector.targetDecorator.style.strokeColor = '#6BA5D7';
    connector.type = 'Orthogonal';
    return connector;
  },
});
diagram.appendTo('#element');

let horizontalSpacing = document.getElementById('horizontalSpacing');
let verticalSpacing = document.getElementById('verticalSpacing');

horizontalSpacing.onchange = (args) => {
  let value = Number(args.target.value);
  if (value < 20) {
    value = 20;
  }
  if (value > 100) {
    value = 100;
  }
  horizontalSpacing.value = value.toString();
  diagram.layout.horizontalSpacing = value;
  diagram.dataBind();
};

verticalSpacing.onchange = (args) => {
  let value = Number(args.target.value);
  if (value < 20) {
    value = 20;
  }
  if (value > 100) {
    value = 100;
  }
  verticalSpacing.value = value.toString();
  diagram.layout.verticalSpacing = value;
  diagram.dataBind();
};
<!DOCTYPE html><html lang="en"><head>
    <title>EJ2 Diagram</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Typescript UI Controls">
    <meta name="author" content="Syncfusion">
    <link href="index.css" rel="stylesheet">
    
    <link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-base/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-buttons/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-popups/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-splitbuttons/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-diagrams/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-navigations/styles/fabric.css" rel="stylesheet">
    
<script src="https://cdn.syncfusion.com/ej2/28.2.3/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    
    <div id="container">
        <label>Horizontal Alignment</label>
        <label>Horizontal Spacing</label>
        <input
          type="number"
          value="30"
          id="horizontalSpacing"
          min="20"
          max="100"
        />
        <label>Vertical Spacing</label>
        <input
          type="number"
          value="30"
          id="verticalSpacing"
          min="20"
          max="100"
        />
        <div id="element"></div>
    </div>


<script>
var ele = document.getElementById('container');
if(ele) {
  ele.style.visibility = "visible";
}   
      </script>
<script src="index.js" type="text/javascript"></script>
</body></html>

Layout margin

Layout provides support to add some blank space between the layout bounds/viewport and the layout. The margin property of the layout allows you to set the blank space.

The following code demonstrates how to set the initial layout margin and how to modify the layout margin dynamically at runtime.

ej.diagrams.Diagram.Inject(
    ej.diagrams.DataBinding,
    ej.diagrams.HierarchicalTree
  );
  var data = [
    {
      Name: 'Steve-Ceo',
    },
    {
      Name: 'Kevin-Manager',
      ReportingPerson: 'Steve-Ceo',
    },
    {
      Name: 'Peter-Manager',
      ReportingPerson: 'Kevin-Manager',
    },
    {
      Name: 'John- Manager',
      ReportingPerson: 'Peter-Manager',
    },
    {
      Name: 'Mary-CSE ',
      ReportingPerson: 'Peter-Manager',
    },
  ];
  
  var items = new ej.data.DataManager(data, new ej.data.Query().take(7));
  
  var diagram = new ej.diagrams.Diagram({
    width: '100%',
    height: '550px',
    //Uses layout to auto-arrange nodes on the Diagram page
    layout: {
      //Sets layout type
      type: 'HierarchicalTree',
      //set layout alignment
      horizontalSpacing: 25,
      verticalSpacing: 30,
      horizontalAlignment: 'Left',
      verticalAlignment: 'Top',
      margin: { left: 100, top: 100 },
    },
    dataSourceSettings: {
      id: 'Name',
      parentId: 'ReportingPerson',
      dataManager: items,
    },
    getNodeDefaults: (obj) => {
      obj.shape = {
        type: 'Text',
        content: obj.data.Name,
      };
      obj.style = {
        fill: 'None',
        strokeColor: 'none',
        strokeWidth: 2,
        bold: true,
        color: 'white',
      };
      obj.width = 100;
      obj.height = 40;
      obj.borderColor = 'white';
      obj.backgroundColor = '#6BA5D7';
      obj.borderWidth = 1;
      return obj;
    },
    getConnectorDefaults: (connector) => {
      connector.style = {
        strokeColor: '#6BA5D7',
        strokeWidth: 2,
      };
      connector.targetDecorator.style.fill = '#6BA5D7';
      connector.targetDecorator.style.strokeColor = '#6BA5D7';
      connector.type = 'Orthogonal';
      return connector;
    },
  });
  diagram.appendTo('#element');
  
  let marginLeft = document.getElementById('marginLeft');
  let marginTop = document.getElementById('marginTop');
  
  marginLeft.onchange = (args) => {
    let value = Number(args.target.value);
    if (value < 20) {
      value = 20;
    }
    if (value > 500) {
      value = 500;
    }
    marginLeft.value = value.toString();
    diagram.layout.margin.left = value;
    diagram.dataBind();
  };
  
  marginTop.onchange = (args) => {
    let value = Number(args.target.value);
    if (value < 20) {
      value = 20;
    }
    if (value > 500) {
      value = 500;
    }
    marginTop.value = value.toString();
    diagram.layout.margin.top = value;
    diagram.dataBind();
  };
<!DOCTYPE html><html lang="en"><head>
    <title>EJ2 Diagram</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Typescript UI Controls">
    <meta name="author" content="Syncfusion">
    <link href="index.css" rel="stylesheet">
    
    <link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-base/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-buttons/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-popups/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-splitbuttons/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-diagrams/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-navigations/styles/fabric.css" rel="stylesheet">
    
<script src="https://cdn.syncfusion.com/ej2/28.2.3/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    
    <div id="container">
        <label>Margin Left</label>
        <input
          type="number"
          value="100"
          id="marginLeft"
          min="20"
          max="500"
        />
        <label>Margin Top</label>
        <input
          type="number"
          value="100"
          id="marginTop"
          min="20"
          max="500"
        />
        <div id="element"></div>
    </div>


<script>
var ele = document.getElementById('container');
if(ele) {
  ele.style.visibility = "visible";
}   
      </script>
<script src="index.js" type="text/javascript"></script>
</body></html>

Layout orientation

The layout orientation can used to arrange the layout based on the direction. there are different orientation types that are defined in the following table.

Orientation Description
TopToBottom Aligns the layout from top to bottom. All the roots are placed at top of diagram.
LeftToRight Aligns the layout from left to right. All the roots are placed at left of diagram.
BottomToTop Aligns the layout from bottom to top. All the roots are placed at bottom of the diagram.
RightToLeft Aligns the layout from right to left. All the roots are placed at right of the diagram.

Diagram provides support to customize the orientation of layout. You can set the desired orientation using layout.orientation.

NOTE

In the diagram the default orientation is TopToBottom.

The following code demonstrates how to set the initial orientation for the layout and how to change it dynamically at runtime.

ej.diagrams.Diagram.Inject(
    ej.diagrams.DataBinding,
    ej.diagrams.HierarchicalTree
  );
  var data = [
    {
      Name: 'Steve-Ceo',
    },
    {
      Name: 'Kevin-Manager',
      ReportingPerson: 'Steve-Ceo',
    },
    {
      Name: 'Peter-Manager',
      ReportingPerson: 'Kevin-Manager',
    },
    {
      Name: 'John- Manager',
      ReportingPerson: 'Peter-Manager',
    },
    {
      Name: 'Mary-CSE ',
      ReportingPerson: 'Peter-Manager',
    },
  ];
  
  var items = new ej.data.DataManager(data, new ej.data.Query().take(7));
  
  var diagram = new ej.diagrams.Diagram({
    width: '100%',
    height: '550px',
    //Uses layout to auto-arrange nodes on the Diagram page
    layout: {
      //Sets layout type
      type: 'HierarchicalTree',
      //set layout alignment
      horizontalSpacing: 25,
      verticalSpacing: 30,
      horizontalAlignment: 'Left',
      verticalAlignment: 'Top',
      margin: { left: 100, top: 100 },
    },
    dataSourceSettings: {
      id: 'Name',
      parentId: 'ReportingPerson',
      dataManager: items,
    },
    getNodeDefaults: (obj) => {
      obj.shape = {
        type: 'Text',
        content: obj.data.Name,
      };
      obj.style = {
        fill: 'None',
        strokeColor: 'none',
        strokeWidth: 2,
        bold: true,
        color: 'white',
      };
      obj.width = 100;
      obj.height = 40;
      obj.borderColor = 'white';
      obj.backgroundColor = '#6BA5D7';
      obj.borderWidth = 1;
      return obj;
    },
    getConnectorDefaults: (connector) => {
      connector.style = {
        strokeColor: '#6BA5D7',
        strokeWidth: 2,
      };
      connector.targetDecorator.style.fill = '#6BA5D7';
      connector.targetDecorator.style.strokeColor = '#6BA5D7';
      connector.type = 'Orthogonal';
      return connector;
    },
  });
  diagram.appendTo('#element');
  
  let orientation = document.getElementById('orientation');
  orientation.onchange = (args) => {
    diagram.layout.orientation = args.target.value;
    diagram.dataBind();
  };
<!DOCTYPE html><html lang="en"><head>
    <title>EJ2 Diagram</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Typescript UI Controls">
    <meta name="author" content="Syncfusion">
    <link href="index.css" rel="stylesheet">
    
    <link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-base/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-buttons/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-popups/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-splitbuttons/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-diagrams/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-navigations/styles/fabric.css" rel="stylesheet">
    
<script src="https://cdn.syncfusion.com/ej2/28.2.3/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    
    <div id="container">
        <label>Layout Orientation</label>
        <select id="orientation">
            <option value="TopToBottom">TopToBottom</option>
            <option value="BottomToTop">BottomToTop</option>
            <option value="LeftToRight">LeftToRight</option>
            <option value="RightToLeft">RightToLeft</option>
          </select>
        <div id="element"></div>
    </div>


<script>
var ele = document.getElementById('container');
if(ele) {
  ele.style.visibility = "visible";
}   
      </script>
<script src="index.js" type="text/javascript"></script>
</body></html>

Exclude from layout

In some cases, you may need one or two nodes not to be arranged based on the layout algorithm but instead positioned manually. You can exclude these nodes from the layout algorithm by setting the excludeFromLayout property to true.

The following code example demonstrates how to exclude a node from the layout and position it manually:

import {
  Diagram,
  ConnectorModel,
  NodeModel,
  HierarchicalTree,
  TextModel,
  DataBinding,
  Rect,
} from '@syncfusion/ej2-diagrams';
import { DataManager, Query } from '@syncfusion/ej2-data';
Diagram.Inject(DataBinding, HierarchicalTree);
//Initializes data source
let data: object[] = [
  {
    Name: 'Steve-Ceo',
  },
  {
    Name: 'Kevin-Manager',
    ReportingPerson: 'Steve-Ceo',
  },
  {
    Name: 'Robert',
    ReportingPerson: 'Steve-Ceo',
  },
  {
    Name: 'Peter-Manager',
    ReportingPerson: 'Steve-Ceo',
  },
  {
    Name: 'John- Manager',
    ReportingPerson: 'Peter-Manager',
  },
  {
    Name: 'Mary-CSE ',
    ReportingPerson: 'Peter-Manager',
  },
  {
    Name: 'Jim-CSE ',
    ReportingPerson: 'Kevin-Manager',
  },
  {
    Name: 'Martin-CSE',
    ReportingPerson: 'Kevin-Manager',
  },
];

let items: DataManager = new DataManager(data as JSON[], new Query().take(7));

let diagram: Diagram = new Diagram({
  width: '100%',
  height: '550px',
  //Uses layout to auto-arrange nodes on the diagram page
  layout: {
    //Sets layout type
    type: 'HierarchicalTree',
  },
  dataSourceSettings: {
    id: 'Name',
    parentId: 'ReportingPerson',
    dataManager: items,
  }, //Sets the default properties for nodes and connectors
  getNodeDefaults: (obj: NodeModel) => {
    obj.shape = {
      type: 'Text',
      content: (
        obj.data as {
          Name: 'string';
        }
      ).Name,
    };
    if ((obj.data as any).Name === 'Robert') {
      //Excludes node from layout
      obj.excludeFromLayout = true;
      obj.offsetX = 150;
      obj.offsetY = 75;
    }
    obj.width = 100;
    obj.height = 50;
    obj.style = {
      fill: '#6BA5D7',
      strokeColor: '#6BA5D7',
      strokeWidth: 2,
      bold: true,
      color: 'white',
    };
    return obj;
  },
  getConnectorDefaults: (connector: ConnectorModel, diagram: Diagram) => {
    connector.style = {
      strokeColor: '#6BA5D7',
      strokeWidth: 2,
    };
    connector.targetDecorator.style.fill = '#6BA5D7';
    connector.targetDecorator.style.strokeColor = '#6BA5D7';
    connector.type = 'Orthogonal';
    return connector;
  },
});

diagram.appendTo('#element');
<!DOCTYPE html><html lang="en"><head>
    <title>EJ2 Diagram</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Typescript UI Controls">
    <meta name="author" content="Syncfusion">
    <link href="index.css" rel="stylesheet">
    
    <link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-base/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-buttons/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-popups/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-splitbuttons/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-diagrams/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-navigations/styles/fabric.css" rel="stylesheet">
    
<script src="https://cdn.syncfusion.com/ej2/28.2.3/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    
    <div id="container">
        <div id="element"></div>
    </div>


<script>
var ele = document.getElementById('container');
if(ele) {
  ele.style.visibility = "visible";
}   
      </script>
<script src="index.js" type="text/javascript"></script>
</body></html>

Fixed node

Layout provides support to arrange the nodes with reference to the position of a fixed node and set it to the fixedNode of the layout property. This is helpful when you try to expand/collapse a node. It might be expected that the position of the double-clicked node should not be changed.

ej.diagrams.Diagram.Inject(ej.diagrams.DataBinding, ej.diagrams.HierarchicalTree);
 var data= [
	{Name: "Steve-Ceo"},
	{Name: "Kevin-Manager", ReportingPerson: "Steve-Ceo"},
	{Name: "Peter-Manager", ReportingPerson: "Steve-Ceo"},
	{Name: "John- Manager", ReportingPerson: "Peter-Manager"},
	{Name: "Mary-CSE ", ReportingPerson: "Peter-Manager"},
	{Name: "Jim-CSE ", ReportingPerson: "Kevin-Manager"},
	{Name: "Martin-CSE", ReportingPerson: "Kevin-Manager"}];

var items = new ej.data.DataManager(data , new ej.data.Query().take(7));

var diagram = new ej.diagrams.Diagram({
    width: '100%', height: '550px',
     layout: { type: 'HierarchicalTree',bounds:new ej.diagrams.Rect(0,0,500,500),horizontalSpacing:25,verticalSpacing:30,horizontalAlignment:'Left',verticalAlignment:'Top',orientation:'BottomToTop'},
    dataSourceSettings: { id: 'Name', parentId: 'ReportingPerson', dataManager: items },
    getNodeDefaults: (obj) => {
        obj.shape = { type: 'Text', content: (obj.data).Name };
        obj.style = { fill:'None', strokeColor: 'none',strokeWidth: 2, bold: true, color: 'white'};
        obj.borderColor = 'black';
        obj.width=100;
        obj.height=40;
        obj.backgroundColor = 'darkcyan';
        obj.borderWidth = 1;
        (obj.shape ).margin = { left: 25, right: 25, top: 25, bottom: 25 };
        return obj;
    }, getConnectorDefaults: (connector, diagram) => {
        connector.type = 'Orthogonal';
        return connector;
    }
});
diagram.appendTo('#element');
<!DOCTYPE html><html lang="en"><head>
    <title>EJ2 Diagram</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Typescript UI Controls">
    <meta name="author" content="Syncfusion">
    <link href="index.css" rel="stylesheet">
    
    <link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-base/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-buttons/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-popups/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-splitbuttons/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-diagrams/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-navigations/styles/fabric.css" rel="stylesheet">
    
<script src="https://cdn.syncfusion.com/ej2/28.2.3/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    
    <div id="container">
        <div id="element"></div>
    </div>


<script>
var ele = document.getElementById('container');
if(ele) {
  ele.style.visibility = "visible";
}   
      </script>
<script src="index.js" type="text/javascript"></script>
</body></html>

Expand and collapse

Diagram allows to expand/collapse the subtrees of a layout. The node’s isExpanded property allows you to expand/collapse its children. The following code example shows how to expand/collapse the children of a node.

ej.diagrams.Diagram.Inject(
    ej.diagrams.DataBinding,
    ej.diagrams.HierarchicalTree
  );
  var data = [
    {
      Id: 'parent1',
      Name: 'Maria ',
      Designation: 'Managing Director',
      ImageUrl: '../content/images/orgchart/Clayton.png',
      IsExpand: 'true',
      RatingColor: '#C34444',
    },
    {
      Id: 'parent',
      Name: ' sam',
      Designation: 'Managing Director',
      ReportingPerson: 'parent1',
      ImageUrl: '../content/images/orgchart/Clayton.png',
      IsExpand: 'true',
      RatingColor: '#C34444',
    },
    {
      Id: 'parent3',
      Name: ' sam geo',
      Designation: 'Managing Director',
      ReportingPerson: 'parent1',
      ImageUrl: '../content/images/orgchart/Clayton.png',
      IsExpand: 'true',
      RatingColor: '#C34444',
    },
    {
      Id: '80',
      Name: ' david',
      Designation: 'Managing Director',
      ReportingPerson: 'parent3',
      ImageUrl: '../content/images/orgchart/Clayton.png',
      IsExpand: 'true',
      RatingColor: '#C34444',
    },
    {
      Id: '82',
      Name: ' pirlo',
      Designation: 'Managing Director',
      ReportingPerson: 'parent',
      ImageUrl: '../content/images/orgchart/Clayton.png',
      IsExpand: 'true',
      RatingColor: '#C34444',
    },
  ];
  
  var items = new ej.data.DataManager(data, new ej.data.Query().take(7));
  
  var diagram = new ej.diagrams.Diagram({
    width: '100%',
    height: '590px',
    selectedItems: { constraints: ~ej.diagrams.SelectorConstraints.ResizeAll },
    snapSettings: { constraints: 0 },
    layout: {
      enableAnimation: true,
      type: 'OrganizationalChart',
      margin: { top: 20 },
    },
    dataSourceSettings: {
      id: 'Id',
      parentId: 'ReportingPerson',
      dataManager: items,
    },
  
    getNodeDefaults: (obj, diagram) => {
      obj.expandIcon = {
        height: 15,
        width: 15,
        shape: 'Plus',
        fill: 'lightgray',
        offset: {
          x: 0.5,
          y: 0.85,
        },
      };
      obj.collapseIcon.offset = {
        x: 0.5,
        y: 0.85,
      };
      obj.collapseIcon.height = 15;
      obj.collapseIcon.width = 15;
      obj.collapseIcon.shape = 'Minus';
      obj.height = 50;
      obj.borderColor = 'white';
      obj.backgroundColor = '#6BA5D7';
      obj.borderWidth = 1;
      obj.style = {
        fill: 'transparent',
        strokeWidth: 2,
      };
      return obj;
    },
    getConnectorDefaults: (connector, diagram) => {
      connector.style = { strokeColor: '#6BA5D7', strokeWidth: 2 };
      connector.targetDecorator.style.fill = '#6BA5D7';
      connector.targetDecorator.style.strokeColor = 'white';
      connector.targetDecorator.shape = 'None';
      connector.type = 'Orthogonal';
      return connector;
    },
  });
  diagram.appendTo('#element');
<!DOCTYPE html><html lang="en"><head>
    <title>EJ2 Diagram</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Typescript UI Controls">
    <meta name="author" content="Syncfusion">
    <link href="index.css" rel="stylesheet">
    
    <link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-base/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-buttons/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-popups/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-splitbuttons/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-diagrams/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-navigations/styles/fabric.css" rel="stylesheet">
    
<script src="https://cdn.syncfusion.com/ej2/28.2.3/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    
    <div id="container">
        <div id="element"></div>
    </div>


<script>
var ele = document.getElementById('container');
if(ele) {
  ele.style.visibility = "visible";
}   
      </script>
<script src="index.js" type="text/javascript"></script>
</body></html>

For more details about customizing the expand and collapse icon refer expand Collapse

Layout animation

While performing expand and collapse operations, the layout can be animated by applying a small delay. This can be achieved by setting the enableAnimation property of the layout. By default, enableAnimation is set to true.

In the following example, the enableAnimation property ensures that the layout changes are animated, enhancing the visual experience during expand and collapse operations.

ej.diagrams.Diagram.Inject(
  ej.diagrams.DataBinding,
  ej.diagrams.HierarchicalTree,
  ej.diagrams.LayoutAnimation
);
var data = [
  {
    Name: 'Steve-Ceo',
  },
  {
    Name: 'Kevin-Manager',
    ReportingPerson: 'Steve-Ceo',
  },
  {
    Name: 'Robert-Manager',
    ReportingPerson: 'Steve-Ceo',
  },
  {
    Name: 'Peter-Manager',
    ReportingPerson: 'Kevin-Manager',
  },
  {
    Name: 'Hary-Manager',
    ReportingPerson: 'Robert-Manager',
  },
  {
    Name: 'John- Manager',
    ReportingPerson: 'Hary-Manager',
  },
  {
    Name: 'Mary-CSE ',
    ReportingPerson: 'Hary-Manager',
  },
  {
    Name: 'John- Manager',
    ReportingPerson: 'Peter-Manager',
  },
  {
    Name: 'Mary-CSE ',
    ReportingPerson: 'Peter-Manager',
  },
];

var items = new ej.data.DataManager(data, new ej.data.Query().take(7));

var diagram = new ej.diagrams.Diagram({
  width: '100%',
  height: '550px',
  //Uses layout to auto-arrange nodes on the Diagram page
  layout: {
    //Sets layout type
    type: 'HierarchicalTree',
    //set layout alignment
    horizontalSpacing: 25,
    verticalSpacing: 30,
    horizontalAlignment: 'Left',
    verticalAlignment: 'Top',
    enableAnimation: true,
  },
  dataSourceSettings: {
    id: 'Name',
    parentId: 'ReportingPerson',
    dataManager: items,
  },
  getNodeDefaults: (obj) => {
    obj.shape = {
      type: 'Text',
      content: obj.data.Name,
    };
    obj.style = {
      fill: 'None',
      strokeColor: 'none',
      strokeWidth: 2,
      bold: true,
      color: 'white',
    };
    obj.expandIcon.shape = 'Minus';
    obj.collapseIcon.shape = 'Plus';
    obj.width = 100;
    obj.height = 40;
    obj.borderColor = 'white';
    obj.backgroundColor = '#6BA5D7';
    obj.borderWidth = 1;
    return obj;
  },
  getConnectorDefaults: (connector) => {
    connector.style = {
      strokeColor: '#6BA5D7',
      strokeWidth: 2,
    };
    connector.targetDecorator.style.fill = '#6BA5D7';
    connector.targetDecorator.style.strokeColor = '#6BA5D7';
    connector.type = 'Orthogonal';
    return connector;
  },
});
diagram.appendTo('#element');
<!DOCTYPE html><html lang="en"><head>
    <title>EJ2 Diagram</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Typescript UI Controls">
    <meta name="author" content="Syncfusion">
    <link href="index.css" rel="stylesheet">
    
    <link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-base/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-buttons/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-popups/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-splitbuttons/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-diagrams/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-navigations/styles/fabric.css" rel="stylesheet">
    
<script src="https://cdn.syncfusion.com/ej2/28.2.3/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    
    <div id="container">
        <div id="element"></div>
    </div>


<script>
var ele = document.getElementById('container');
if(ele) {
  ele.style.visibility = "visible";
}   
      </script>
<script src="index.js" type="text/javascript"></script>
</body></html>

NOTE

To enable layout animation, you need to inject LayoutAnimation module in diagram.

Parent - child relation with dropped nodes from symbol palette

You can create a layout with dropped nodes from symbol palette using the drop event. In drop event, you have to create a connection between the source and target item.

Find the code example to create parent - child relation between source and target nodes in drop event.

ej.diagrams.Diagram.Inject(
    ej.diagrams.DataBinding,
    ej.diagrams.HierarchicalTree
  );
  var data = [
    {
      Name: 'Steve-Ceo',
    },
    {
      Name: 'Kevin-Manager',
      ReportingPerson: 'Steve-Ceo',
    },
    {
      Name: 'Peter-Manager',
      ReportingPerson: 'Steve-Ceo',
    },
    {
      Name: 'John- Manager',
      ReportingPerson: 'Peter-Manager',
    },
    {
      Name: 'Mary-CSE ',
      ReportingPerson: 'Peter-Manager',
    },
    {
      Name: 'Jim-CSE ',
      ReportingPerson: 'Kevin-Manager',
    },
    {
      Name: 'Martin-CSE',
      ReportingPerson: 'Kevin-Manager',
    },
  ];
  
  var items = new ej.data.DataManager(data, new ej.data.Query().take(7));
  
  var diagram = new ej.diagrams.Diagram({
    width: '70%',
    height: '650px',
    //Uses layout to auto-arrange nodes on the diagram page
    layout: {
      //Sets layout type
      type: 'HierarchicalTree',
    }, //Configures data source for diagram
    dataSourceSettings: {
      id: 'Name',
      parentId: 'ReportingPerson',
      dataManager: items,
    }, //Sets the default properties for nodes
    getNodeDefaults: (obj) => {
      obj.style = {
        fill: 'None',
        strokeColor: 'none',
        strokeWidth: 2,
        bold: true,
        color: 'white',
      };
      obj.constraints =
        ej.diagrams.NodeConstraints.Default |
        ej.diagrams.NodeConstraints.AllowDrop;
      obj.borderColor = 'white';
      obj.width = 100;
      obj.height = 40;
      obj.backgroundColor = '#6BA5D7';
      obj.borderWidth = 1;
      return obj;
    }, //Sets the default properties for and connectors
    getConnectorDefaults: (connector, diagram) => {
      connector.style = {
        strokeColor: '#6BA5D7',
        strokeWidth: 2,
      };
      connector.targetDecorator.style.fill = '#6BA5D7';
      connector.targetDecorator.style.strokeColor = '#6BA5D7';
      connector.type = 'Orthogonal';
      return connector;
    },
    drop: function (args) {
      setTimeout(() => {
        //Argument element is used to get the dropped node.
        let node = args.element;
        let bottomNode = args.target;
        //Gets the connector that connected to dropped node
        let edges = diagram.getEdges(node);
        if (edges && edges.length > 0) {
          let connector = diagram.getObject(edges[0]);
          //Argument target is used to get the hovered node
          connector.sourceID = args.target.id;
          diagram.dataBind();
        } else {
          let newCon = {
            id: 'newcon' + ej.diagrams.randomId(),
            sourceID: args.target.id,
            targetID: args.element.id,
          };
          diagram.dataBind();
          diagram.add(newCon);
        }
        diagram.doLayout();
      }, 100);
    },
  });
  diagram.appendTo('#element');
  
  let symbolPalette = new ej.diagrams.SymbolPalette({
    width: 300,
    height: 600,
    palettes: [
      {
        title: 'Basic shapes',
        id: 'basicShapes',
        symbols: [
          {
            id: 'node',
            width: 100,
            height: 50,
            data: { Name: 'New Node' },
            style: { fill: '#6BA5D7' },
          },
        ],
      },
    ],
    expandMode: 'Multiple',
    symbolHeight: 50,
    symbolWidth: 100,
  });
  symbolPalette.appendTo('#symbolpalette');
<!DOCTYPE html><html lang="en"><head>
    <title>EJ2 Diagram</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Typescript UI Controls">
    <meta name="author" content="Syncfusion">
    <link href="index.css" rel="stylesheet">
    
    <link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-base/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-buttons/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-popups/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-splitbuttons/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-diagrams/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-navigations/styles/fabric.css" rel="stylesheet">
    
<script src="https://cdn.syncfusion.com/ej2/28.2.3/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    
    <div id="container">
        <div class="content-wrapper" style="width: 100%">
            <div style="width: 28%; float: left" id="symbolpalette"></div>
            <div style="float: left" id="element"></div>
          </div>
    </div>


<script>
var ele = document.getElementById('container');
if(ele) {
  ele.style.visibility = "visible";
}   
      </script>
<script src="index.js" type="text/javascript"></script>
</body></html>

Layout drag and drop

setNodeTemplate

The setNodeTemplate function allows you to customize the visual representation and behavior of nodes within your diagram. It is invoked during the initialization of each node, enabling you to define the node’s style, properties, and bind custom JSON data to it.

Typically, the setNodeTemplate function accepts a container element (e.g., StackPanel, Grid) to organize the visual components within the node. In the following example, a StackPanel is used to organize the node’s content, with an ImageElement displaying an image and a TextBlock showing text bound to the “Name” property of the node’s data. The StackPanel can contain a variety of elements, including PathElement,NativeElement,DiagramElement and HtmlElement.
You can also set the cornerRadius to create a rounded appearance for the node, while horizontalAlignment and verticalAlignment control the positioning of the StackPanel within the node.

The orientation property determines whether child elements are arranged horizontally or vertically.By effectively utilizing the setNodeTemplate function, you can create visually appealing and informative nodes that enhance the overall user experience of your diagram.

ej.diagrams.Diagram.Inject(
    ej.diagrams.DataBinding,
    ej.diagrams.HierarchicalTree
  );
  var data = [
    { Name: 'Steve-Ceo' },
    { Name: 'Kevin-Manager', ReportingPerson: 'Steve-Ceo', color: 'darkcyan' },
    { Name: 'Peter-Manager', ReportingPerson: 'Steve-Ceo', color: 'white' },
    {
      Name: 'John- Manager',
      ReportingPerson: 'Peter-Manager',
      color: 'darkcyan',
    },
    { Name: 'Mary-CSE ', ReportingPerson: 'Peter-Manager', color: 'white' },
    { Name: 'Jim-CSE ', ReportingPerson: 'Kevin-Manager', color: 'darkcyan' },
    { Name: 'Martin-CSE', ReportingPerson: 'Kevin-Manager', color: 'white' },
  ];
  
  var items = new ej.data.DataManager(data, new ej.data.Query().take(7));
  
  var diagram = new ej.diagrams.Diagram({
    width: '100%',
    height: '550px',
    layout: {
      type: 'HierarchicalTree',
      bounds: new ej.diagrams.Rect(0, 0, 500, 500),
      horizontalSpacing: 25,
      verticalSpacing: 30,
      horizontalAlignment: 'Left',
      verticalAlignment: 'Top',
    },
    dataSourceSettings: {
      id: 'Name',
      parentId: 'ReportingPerson',
      dataManager: items,
    },
    getNodeDefaults: (obj) => {
      obj.width = 200;
      obj.height = 60;
      return obj;
    },
    getConnectorDefaults: (connector) => {
      connector.style = {
        strokeColor: '#6BA5D7',
        strokeWidth: 2,
      };
      connector.targetDecorator.style.fill = '#6BA5D7';
      connector.targetDecorator.style.strokeColor = '#6BA5D7';
      connector.targetDecorator.shape = 'None';
      connector.type = 'Orthogonal';
      return connector;
    },
    setNodeTemplate: function (obj) {
      let container = new ej.diagrams.StackPanel();
      container.width = 200;
      container.height = 60;
      container.cornerRadius=10;
      container.style.fill = 'skyblue';
      container.horizontalAlignment = 'Left';
      container.orientation = 'Horizontal';
      container.id = obj.data.Name + '_StackContainter';
      let innerContent = new ej.diagrams.ImageElement();
      innerContent.id = obj.data.Name + '_innerContent';
      innerContent.width = 40;
      innerContent.height = 40;
      innerContent.margin.left = 20;
      innerContent.style.fill = 'lightgrey';
      let text = new ej.diagrams.TextElement();
      text.content = 'Name: ' + obj.data.Name;
      text.margin = { left: 10, top: 5 };
      text.id = obj.data.Name + '_textContent';
      text.style.fill = 'green';
      text.style.color = 'white';
      if (obj.data.Name === 'Steve-Ceo') {
        text.style.fill = 'black';
        text.style.color = 'white';
      }
      container.children = [innerContent, text];
      return container;
    },
  });
  diagram.appendTo('#element');
<!DOCTYPE html><html lang="en"><head>
    <title>EJ2 Diagram</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Typescript UI Controls">
    <meta name="author" content="Syncfusion">
    <link href="index.css" rel="stylesheet">
    
    <link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-base/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-buttons/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-popups/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-splitbuttons/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-diagrams/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-navigations/styles/fabric.css" rel="stylesheet">
    
<script src="https://cdn.syncfusion.com/ej2/28.2.3/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    
    <div id="container">
        <div id="element"></div>
    </div>


<script>
var ele = document.getElementById('container');
if(ele) {
  ele.style.visibility = "visible";
}   
      </script>
<script src="index.js" type="text/javascript"></script>
</body></html>

Refresh layout

Diagram allows refreshing the layout at runtime. To refresh the layout, you need to call the doLayout method.

//To refresh layout
diagram.doLayout();