Mind Map layout in React Diagram control

6 Dec 202419 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.

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { DiagramComponent, Inject, DataBinding, MindMap } from "@syncfusion/ej2-react-diagrams";
import { DataManager, Query } from "@syncfusion/ej2-data";

//Initializes data source
let 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 },
];
let items = new DataManager(data, new Query().take(7));

export default function App() {
    return (
        <DiagramComponent
            id="container"
            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
            getNodeDefaults={(node) => {
                node.annotations = [{ content: node.data.Label }];
                node.width = 100; node.height = 40;
                return node;
            }}

            //Sets the default properties for connectors
            getConnectorDefaults={(connector) => {
                connector.type = "Orthogonal";
                return connector;
            }}
        >

            {/* Inject necessary services for the diagram */}
            <Inject services={[DataBinding, MindMap]} />
        </DiagramComponent>
    );
}

// Render the App component into the 'diagram' element in the DOM
const root = ReactDOM.createRoot(document.getElementById("diagram"));
root.render(<App />);
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { DiagramComponent, Inject, ConnectorModel, DataBinding, NodeModel, MindMap } from "@syncfusion/ej2-react-diagrams";
import { DataManager, Query } from "@syncfusion/ej2-data";

//Initializes data source
let data: object[] = [
  { 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 },
];
let items: DataManager = new DataManager(data as JSON[], new Query().take(7));

export default function App() {
  return (
    <DiagramComponent
      id="container"
      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
      getNodeDefaults={(node: NodeModel) => {
        node.annotations = [{ content: (node.data as { Label: 'string' }).Label }];
        node.width = 100; node.height = 40;
        return node;
      }}

      //Sets the default properties for connectors
      getConnectorDefaults={(connector: ConnectorModel) => {
        connector.type = "Orthogonal";
        return connector;
      }}
    >

      {/* Inject necessary services for the diagram */}
      <Inject services={[DataBinding, MindMap]} />
    </DiagramComponent>
  );
}

// Render the App component into the 'diagram' element in the DOM
const root = ReactDOM.createRoot(document.getElementById("diagram") as HTMLElement);
root.render(<App />);

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.

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { DiagramComponent, Inject, DataBinding, MindMap } from "@syncfusion/ej2-react-diagrams";
import { DataManager, Query } from "@syncfusion/ej2-data";

//Initializes data source
let 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 },
];
let items = new DataManager(data, new Query().take(7));

export default function App() {
    return (
        <DiagramComponent
            id="container"
            width={"100%"}
            height={"550px"}

            //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
            getNodeDefaults={(node) => {
                node.annotations = [{ content: node.data.Label }];
                node.width = 100; node.height = 40;
                return node;
            }}

            //Sets the default properties for connectors
            getConnectorDefaults={(connector) => {
                connector.type = "Orthogonal";
                return connector;
            }}
        >

            {/* Inject necessary services for the diagram */}
            <Inject services={[DataBinding, MindMap]} />
        </DiagramComponent>
    );
}

// Render the App component into the 'diagram' element in the DOM
const root = ReactDOM.createRoot(document.getElementById("diagram"));
root.render(<App />);
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { DiagramComponent, Inject, ConnectorModel, DataBinding, NodeModel, MindMap } from "@syncfusion/ej2-react-diagrams";
import { DataManager, Query } from "@syncfusion/ej2-data";

//Initializes data source
let data: object[] = [
  { 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 },
];
let items: DataManager = new DataManager(data as JSON[], new Query().take(7));

export default function App() {
  return (
    <DiagramComponent
      id="container"
      width={"100%"}
      height={"550px"}

      //Uses layout to auto-arrange nodes on the diagram page
      layout={{
        //Sets layout type
        type: "MindMap",
        orientation: "Horizontal",
        getBranch: (node: NodeModel) => {
          if ((node.data as any).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
      getNodeDefaults={(node: NodeModel) => {
        node.annotations = [{ content: (node.data as { Label: 'string' }).Label }];
        node.width = 100; node.height = 40;
        return node;
      }}

      //Sets the default properties for connectors
      getConnectorDefaults={(connector: ConnectorModel) => {
        connector.type = "Orthogonal";
        return connector;
      }}
    >

      {/* Inject necessary services for the diagram */}
      <Inject services={[DataBinding, MindMap]} />
    </DiagramComponent>
  );
}

// Render the App component into the 'diagram' element in the DOM
const root = ReactDOM.createRoot(document.getElementById("diagram") as HTMLElement);
root.render(<App />);

Mind map layout