Mind Map layout in EJ2 JavaScript Diagram control

15 Dec 202414 minutes to read

A mind map is a diagram that displays the nodes as a spider diagram organizes information around a central concept. To create mind map, the type of layout should be set as MindMap.

Mind Map Orientation

An Orientation of a MindMapTreeLayout is used to arrange the tree layout according to a specific direction. By default, the orientation is set to Horizontal.

The following code example illustrates how to create an mindmap layout.

ej.diagrams.Diagram.Inject(
    ej.diagrams.DataBinding,
    ej.diagrams.HierarchicalTree
  );
  var nodes = [];
  var connectors = [];
  
  var data = [
    {
      id: 1,
      Label: 'StackPanel',
    },
    {
      id: 2,
      Label: 'Label',
      parentId: 1,
    },
    {
      id: 3,
      Label: 'ListBox',
      parentId: 1,
    },
    {
      id: 4,
      Label: 'StackPanel',
      parentId: 2,
    },
    {
      id: 5,
      Label: 'Border',
      parentId: 2,
    },
    {
      id: 6,
      Label: 'Border',
      parentId: 4,
    },
    {
      id: 7,
      Label: 'Button',
      parentId: 4,
    },
    {
      id: 8,
      Label: 'ContentPresenter',
      parentId: 5,
    },
    {
      id: 9,
      Label: 'Text Block',
      parentId: 5,
    },
  ];
  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: 'MindMap',
      orientation: 'Horizontal',
    }, //Configures data source for diagram
    dataSourceSettings: {
      id: 'id',
      parentId: 'parentId',
      dataManager: items,
      root: String(1),
    }, //Sets the default properties for nodes and connectors
    getNodeDefaults: (obj) => {
      obj.shape = {
        type: 'Text',
        content: obj.data.Label,
      };
      obj.style = {
        fill: '#6BA5D7',
        strokeColor: 'none',
        strokeWidth: 2,
      };
      obj.borderColor = 'white';
      obj.backgroundColor = '#6BA5D7';
      obj.borderWidth = 1;
      obj.shape.margin = {
        left: 5,
        right: 5,
        top: 5,
        bottom: 5,
      };
      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>

The following table outlines the various orientation types available:

Orientation Type Description
Horizontal Aligns the tree layout from left to right
Vertical Aligns the tree layout from top to bottom

NOTE

If you want to use mind map layout in diagram, you need to inject MindMap in the diagram.

Mind Map branch

You can also decide the branch for mind map using getBranch method. The following code demonstrates how to set all branches on the right side for mind map layout using getBranch method.

ej.diagrams.Diagram.Inject(
  ej.diagrams.DataBinding,
  ej.diagrams.HierarchicalTree
);

var data = [
  {
    id: 1,
    Label: 'StackPanel',
  },
  {
    id: 2,
    Label: 'Label',
    parentId: 1,
  },
  {
    id: 3,
    Label: 'ListBox',
    parentId: 1,
  },
  {
    id: 4,
    Label: 'StackPanel',
    parentId: 2,
  },
  {
    id: 5,
    Label: 'Border',
    parentId: 2,
  },
  {
    id: 6,
    Label: 'Border',
    parentId: 4,
  },
  {
    id: 7,
    Label: 'Button',
    parentId: 4,
  },
  {
    id: 8,
    Label: 'ContentPresenter',
    parentId: 5,
  },
  {
    id: 9,
    Label: 'Text Block',
    parentId: 5,
  },
];
var items = new ej.data.DataManager(data, new ej.data.Query().take(7));

var diagram = new ej.diagrams.Diagram({
  width: '100%',
  height: '550px',
  snapSettings: { constraints: 0 },
  //Uses layout to auto-arrange nodes on the diagram page
  layout: {
    //Sets layout type
    type: 'MindMap',
    orientation: 'Horizontal',
    getBranch: (node) => {
      if (node.data.id === 1) {
        return 'Root';
      }
      return 'Right';
    },
  }, //Configures data source for diagram
  dataSourceSettings: {
    id: 'id',
    parentId: 'parentId',
    dataManager: items,
    root: String(1),
  }, //Sets the default properties for nodes and connectors
  getNodeDefaults: (obj) => {
    obj.shape = {
      type: 'Text',
      content: obj.data.Label,
    };
    obj.style = {
      fill: '#6BA5D7',
      strokeColor: 'none',
      strokeWidth: 2,
    };
    obj.borderColor = 'white';
    obj.backgroundColor = '#6BA5D7';
    obj.borderWidth = 1;
    obj.shape.margin = {
      left: 5,
      right: 5,
      top: 5,
      bottom: 5,
    };
    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>

Mind map layout