Mind Map Layout in React Diagram

21 Aug 202620 minutes to read

A mind map is a powerful visualization technique that organizes information around a central concept, with related topics branching outward in a tree-like structure. This layout is particularly useful for brainstorming, knowledge mapping, and hierarchical data representation. The React Diagram component supports mind map layouts through the type property, which should be set to MindMap.

Mind Map Orientation

The Orientation property determines how the mind map tree structure is arranged spatially. By default, the orientation is set to Horizontal, positioning the root node centrally with branches extending left and right.

NOTE

To use the mind map layout in the diagram, inject the MindMap module into the DiagramComponent.

The following code example demonstrates how to create a mind map 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));
const layout = {
    //Sets layout type
    type: "MindMap",
    orientation: "Horizontal"
};
const dataSourceSettings = {
    id: "id",
    parentId: "parentId",
    dataManager: items,
    root: String(1),
};
export default function App() {
    return (
        <DiagramComponent
            id="container"
            width={"100%"}
            height={"550px"}

            //Uses layout to auto-arrange nodes on the diagram page
            layout={layout}

            //Configures data source for diagram
            dataSourceSettings={dataSourceSettings}

            //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, LayoutModel, DataSourceModel } 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));
const layout: LayoutModel = {
  //Sets layout type
  type: "MindMap",
  orientation: "Horizontal"
};
const dataSourceSettings: DataSourceModel = {
  id: "id",
  parentId: "parentId",
  dataManager: items,
  root: String(1),
};
export default function App() {
  return (
    <DiagramComponent
      id="container"
      width={"100%"}
      height={"550px"}

      //Uses layout to auto-arrange nodes on the diagram page
      layout={layout}

      //Configures data source for diagram
      dataSourceSettings={dataSourceSettings}

      //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
(Default) 		Arranges the mind map with the root node centered, branches extending horizontally left and right.
Vertical Arranges the mind map with the root node at the top or center, branches extending vertically up and down.

Mind map layout showing a branched structure with nodes arranged around a central concept

Mind Map Branch

The mind map layout provides flexible branch positioning through the getBranch method. This method allows you to control which side of the root node each branch appears on, enabling customized layouts based on your specific requirements.

The getBranch method receives a node object as a parameter and should return a string value indicating the desired branch position: Left, Right, SubLeft, or SubRight for nested branches. The following code example shows how to position all branches on the right side of the mind map:

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));

const layout = {
    //Sets layout type
    type: "MindMap",
    orientation: "Horizontal",
    getBranch: (node) => {
        if (node.data.id === 1) {
            return 'Root';
        }
        return 'Right';
    }
};

const dataSourceSettings = {
    id: "id",
    parentId: "parentId",
    dataManager: items,
    root: String(1),
};

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

            //Uses layout to auto-arrange nodes on the diagram page
            layout={layout}

            //Configures data source for diagram
            dataSourceSettings={dataSourceSettings}

            //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, LayoutModel, DataSourceModel } 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));
const layout: LayoutModel = {
  //Sets layout type
  type: "MindMap",
  orientation: "Horizontal",
  getBranch: (node: NodeModel) => {
    if ((node.data as any).id === 1) {
      return 'Root';
    }
    return 'Right';
  }
};
const dataSourceSettings: DataSourceModel = {
  id: "id",
  parentId: "parentId",
  dataManager: items,
  root: String(1),
};
export default function App() {
  return (
    <DiagramComponent
      id="container"
      width={"100%"}
      height={"550px"}

      //Uses layout to auto-arrange nodes on the diagram page
      layout={layout}

      //Configures data source for diagram
      dataSourceSettings={dataSourceSettings}

      //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 />);

Common Use Cases

Mind map layouts are ideal for:

  • Brainstorming sessions: Visualizing ideas and their relationships.
  • Knowledge mapping: Organizing complex information hierarchically.
  • Decision trees: Mapping out decision processes and outcomes.
  • Organizational charts: Displaying reporting structures with a central focus.
  • Project planning: Breaking down projects into manageable components.

Best Practices

Follow these practices to build clear and readable mind maps:

  • Keep the root node content concise and descriptive.
  • Use consistent styling for nodes at the same hierarchical level.
  • Limit branch depth to maintain readability.
  • Consider color coding to differentiate branch categories.
  • Ensure adequate spacing between branches to prevent overlap.

Troubleshooting

Issue Cause Resolution
Layout does not apply and no nodes render MindMap module is not injected into the Diagram Inject the MindMap module into the DiagramComponent using the Inject component.
Branches overlap or appear too close together Insufficient horizontalSpacing / verticalSpacing in the layout Increase the spacing properties on the Layout configuration
All branches render on one side only getBranch always returns the same branch value Verify the getBranch logic returns context-appropriate values per node