A Complete Guide to Creating a Mind Map Using Angular Diagram Component
Tags: angular, web, development, diagram
Published: 2022-12-23 11:57:32

---
title: A Complete Guide to Creating a Mind Map Using Angular Diagram Component
published: true
date: 2022-12-23 11:02:33 UTC
tags: angular, web, development, diagram
canonical_url: https://www.syncfusion.com/blogs/post/mind-map-using-angular-diagram.aspx
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7c43olsgv8sw5ln9hbbb.png
---

A single mind map can better illustrate concepts or ideas than a thousand words. We can easily display various ideas associated with a specific concept.

The [Syncfusion Angular Diagram](https://www.syncfusion.com/angular-components/angular-diagram "Syncfusion Angular Diagram") component is a powerful, extensible, and feature-rich library for visualizing, creating, and editing interactive diagrams.

In this blog, we will see how to create a mind map diagram using the Syncfusion Angular Diagram component.

## Create a mind map diagram

The Syncfusion Angular Diagram component provides support to visualize mind maps from external data sources. In addition, data in any format can be easily converted, mapped, and consumed in the Diagram by setting a few properties.

We are going to design the following mind map in this article.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2022/12/Creating-a-mind-map-using-the-Angular-Diagram-component-1.png" alt="Creating a mind map using the Angular Diagram component" style="width:100%">

  <figcaption>Creating a mind map using the Angular Diagram component</figcaption>

</figure>

In this image, the ellipse, rectangular boxes, and thick, straight lines with text represent nodes, while the curved lines represent connectors. The text inside the ellipse, rectangular box, and straight lines represent annotations.

Follow these steps to create the mind map diagram using our Angular Diagram component:

1. First, refer to the [Getting started with Angular Diagram component documentation](https://ej2.syncfusion.com/angular/documentation/diagram/getting-started/?no-cache=1 "Getting started with Angular Diagram component documentation") to see the dependent scripts and theme files required to integrate the component into your Angular application.
2. Second, define the tree information as a JSON array.
3. Create an instance of the Angular Diagram component.
4. Then, configure the data to the **dataSourceSettings** property of the created Diagram instance.
5. Define the common formatting for all nodes and connectors through the **getNodeDefaults** and **getConnectorDefaults** methods, respectively.
6. After configuring the data source, define the layout type as a **mindmap** to arrange the nodes’ positions automatically.

The following code example includes all these steps. You can also find the same code on this [StackBlitz](https://stackblitz.com/edit/angular-up5cv9?file=main.ts "Create a mind map using Angular Diagram component demo on StackBlitz") page.

**.html**

```xml
<div> 
    <ejs-diagram #diagram id="diagram" width="100%" height="700px" [getNodeDefaults]=getNodeDefaults [snapSettings]=snapSettings [scrollSettings]="scrollSettings" [selectedItems]="selectedItems" [getCustomTool]='getCustomTool' (selectionChange)="selectionChange($event)" (created)="create($event)" [tool]=tool [layout]='layout' [dataSourceSettings]='data' [getConnectorDefaults]='getConnDefaults'>
    </ejs-diagram>
</div>
```

**.ts**

```js
import { Component, ViewEncapsulation, ViewChild } from '@angular/core';
import {
  DiagramComponent,
  Diagram,
  ConnectorModel,
  Connector,
  Node,
  HierarchicalTree,
  DataBinding,
  PointPortModel,
  SnapSettingsModel,
  ScrollSettingsModel,
  PortVisibility,
  MindMap,
  SnapConstraints,
  NodeModel,
  DiagramTools,
  ConnectorConstraints,
  PointPort,
} from '@syncfusion/ej2-angular-diagrams';
import { DataManager } from '@syncfusion/ej2-data';
Diagram.Inject(DataBinding, MindMap, HierarchicalTree);
/**
 * Sample for Mind Map Tree
 */
@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.css'],
  encapsulation: ViewEncapsulation.None,
})
export class AppComponent {
  @ViewChild('diagram') public diagram: DiagramComponent;
  public tool: DiagramTools = DiagramTools.ZoomPan;
  public Data: object[] = [
    { id: 1, Label: 'Creativity', fill: 'red', branch: 'Root' },
    {
      id: 3,
      Label: 'Brainstorming',
      parentId: 1,
      branch: 'Right',
      fill: 'red',
    },
    { id: 4, Label: 'Complementing', parentId: 1, branch: 'Left', fill: 'red' },
    { id: 22, Label: 'Sessions', parentId: 3, branch: 'subRight', fill: 'red' },
    { id: 23, Label: 'Generate', parentId: 3, branch: 'subRight', fill: 'red' },
    { id: 25, Label: 'Local', parentId: 22, branch: 'subRight' },
    { id: 26, Label: 'Remote', parentId: 22, branch: 'subRight' },
    { id: 27, Label: 'Individual', parentId: 22, branch: 'subRight' },
    { id: 28, Label: 'Teams', parentId: 22, branch: 'subRight' },
    { id: 29, Label: 'Ideas', parentId: 23, branch: 'subRight' },
    { id: 30, Label: 'Engagement', parentId: 23, branch: 'subRight' },
    { id: 31, Label: 'Product', parentId: 29, branch: 'subRight' },
    { id: 32, Label: 'Service', parentId: 29, branch: 'subRight' },
    { id: 33, Label: 'Business Direction', parentId: 29, branch: 'subRight' },
    { id: 34, Label: 'Empowering', parentId: 30, branch: 'subRight' },
    { id: 35, Label: 'Ownership', parentId: 30, branch: 'subRight' },
    { id: 50, Label: 'Information', parentId: 4, branch: 'subLeft' },
    { id: 51, Label: 'Expectations', parentId: 4, branch: 'subLeft' },
    { id: 53, Label: 'Competitors', parentId: 50, branch: 'subLeft' },
    { id: 54, Label: 'Products', parentId: 50, branch: 'subLeft' },
    { id: 55, Label: 'Features', parentId: 50, branch: 'subLeft' },
    { id: 56, Label: 'Other Data', parentId: 50, branch: 'subLeft' },
    { id: 59, Label: 'Organization', parentId: 51, branch: 'subLeft' },
    { id: 60, Label: 'Customer', parentId: 51, branch: 'subLeft' },
    { id: 61, Label: 'Staff', parentId: 51, branch: 'subLeft' },
    { id: 62, Label: 'Stakeholders', parentId: 51, branch: 'subLeft' },
  ];
  //Get mind map data.
  public items: DataManager = new DataManager(this.Data);
  public data: Object = {
    id: 'id',
    parentId: 'parentId',
    dataSource: this.items,
    root: '1',
  };
  //Define layout.
  public layout: Object = {
    type: 'MindMap',
    horizontalSpacing: 40,
    getBranch: (node: NodeModel, nodes: NodeModel[]) => {
      return ((node as Node).data as TreeInfo).branch;
    },
  };
  public snapSettings: SnapSettingsModel = {
    constraints: SnapConstraints.None,
  };
  public scrollSettings: ScrollSettingsModel = {
    scrollLimit: 'Infinity',
  };
  public create(args: Object): void {
    this.diagram.fitToPage();
  }
  //Define node default settings.
  public getNodeDefaults: Function = this.nodeDefaults.bind(this);
  //Define connector default settings
  public getConnDefaults: Function = this.getConnectorDefaults.bind(this);
  private nodeDefaults(obj: NodeModel): NodeModel {
    let treeInfo: TreeInfo = obj.data as TreeInfo;
    obj.shape = { type: 'Basic', shape: 'Ellipse' };
    obj.borderColor = 'black';
    obj.style = {
      fill:
        treeInfo.branch === 'Right' || treeInfo.branch === 'subRight'
          ? '#8E44AD'
          : treeInfo.branch === 'Left' || treeInfo.branch === 'subLeft'
          ? '#3498DB'
          : '#E74C3C',
      strokeColor: 'none',
      strokeWidth: 2,
    };
    obj.annotations = [
      {
        content: (obj.data as TreeInfo).Label,
        margin: { left: 10, right: 10, top: 10, bottom: 10 },
        style: { color: 'white' },
      },
    ];
    let port: PointPortModel[] = this.getPort();
    for (let i: number = 0; i < port.length; i++) {
      obj.ports.push(new PointPort(obj, 'ports', port[i], true));
    }
    return obj;
  }
  //sets connector default value.
  private getConnectorDefaults(
    connector: ConnectorModel,
    diagram: Diagram
  ): ConnectorModel {
    connector.type = 'Bezier';
    connector.targetDecorator = { shape: 'None' };
    let sourceNode: Node = diagram.getObject(connector.sourceID) as Node;
    let targetNode: Node = diagram.getObject(connector.targetID) as Node;
    let treeInfo: TreeInfo = targetNode.data as TreeInfo;
    connector.constraints &= ~ConnectorConstraints.Select;
    if (treeInfo.branch === 'Right' || treeInfo.branch === 'subRight') {
      connector.sourcePortID = sourceNode.ports[0].id;
      connector.targetPortID = targetNode.ports[1].id;
    } else if (treeInfo.branch === 'Left' || treeInfo.branch === 'subLeft') {
      connector.sourcePortID = sourceNode.ports[1].id;
      connector.targetPortID = targetNode.ports[0].id;
    }
    return connector;
  }
  private getPort(): PointPortModel[] {
    let port: PointPortModel[] = [
      {
        id: 'port1',
        offset: { x: 0, y: 0.5 },
        visibility: PortVisibility.Hidden,
        style: { fill: 'black' },
      },
      {
        id: 'port2',
        offset: { x: 1, y: 0.5 },
        visibility: PortVisibility.Hidden,
        style: { fill: 'black' },
      },
    ];
    return port;
  }
}
export interface TreeInfo {
  branch: string;
  color: string;
  Left: string;
  Right: string;
  Root: string;
  Label: string;
  Level: string;
}
```

## Interactivity using keyboard and mouse

You can interactively build the mind map diagram using the mouse, touch, and keyboard interfaces. Let’s see how to do so with code examples.

### Quick commands

Frequently used commands can be shown as buttons near a selector. You can define the actions as commands for buttons. By doing so, you can perform that action by just clicking the button.

Refer to the following code example and the same on [StackBlitz](https://stackblitz.com/edit/angular-ebw26q?file=main.ts "Creating mind map using quick commands in Angular Diagram component StackBlitz demo"). Here, we have rendered buttons for deleting and left- and right-handling actions.

```js
public handle: UserHandleModel[] = [
    {
      name: 'leftHandle',
      visible: true,
      backgroundColor: 'black',
      offset: 1,
      side: 'Left',
      pathColor: 'white',
      pathData:
        'M11.924,6.202 L4.633,6.202 L4.633,9.266 L0,4.633 L4.632,0 L4.632,3.551 L11.923,3.551 L11.923,6.202Z',
      margin: { top: 0, bottom: 0, left: 0, right: 10 },
      horizontalAlignment: 'Left',
      verticalAlignment: 'Top',
    },
    {
      name: 'delete',
      side: 'Top',
      horizontalAlignment: 'Center',
      verticalAlignment: 'Center',
      pathData:
        'M 7.04 22.13 L 92.95 22.13 L 92.95 88.8 C 92.95 91.92 91.55 94.58 88.76' +
        '96.74 C 85.97 98.91 82.55 100 78.52 100 L 21.48 100 C 17.45 100 14.03 98.91 11.24 96.74 C 8.45 94.58 7.04' +
        '91.92 7.04 88.8 z M 32.22 0 L 67.78 0 L 75.17 5.47 L 100 5.47 L 100 16.67 L 0 16.67 L 0 5.47 L 24.83 5.47 z',
      margin: { top: 0, bottom: 10, left: 0, right: 0 },
      offset: 0.5,
      pathColor: 'white',
    },
    {
      name: 'rightHandle',
      offset: 1,
      horizontalAlignment: 'Right',
      verticalAlignment: 'Top',
      pathColor: 'white',
      pathData:
        'M0,3.063 L7.292,3.063 L7.292,0 L11.924,4.633 L7.292,9.266 L7.292,5.714 L0.001,5.714 L0.001,3.063Z',
      side: 'Right',
      backgroundColor: 'black',
      margin: { top: 0, bottom: 0, left: 10, right: 0 },
    },
  ];
  public selectedItems: SelectorModel = {
    constraints: SelectorConstraints.UserHandle,
    userHandles: this.handle,
  };
```
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2022/12/Creating-mind-map-using-quick-commands-in-Angular-Diagram-component-1.gif" alt="Creating mind map using quick commands in Angular Diagram component" style="width:100%">

  <figcaption>Creating mind map using quick commands in Angular Diagram component</figcaption>

</figure>

### Shortcut keys

Using the shortcut keys, you can quickly create mind maps. Based on the specific key gestures, you can specify the actions to be executed.

For example, **Tab** can be used to add a new topic to the right, **Shift+Tab** to the left, and **Delete** to delete the topic and its subtopics.

Refer to the following code example and the same on [StackBlitz](https://stackblitz.com/edit/angular-ec2jz5-2xvqut?file=main.ts "Creating a Mind Map using Keyboard Shortcuts in Angular Diagram component StackBlitz demo").

```js
 this.diagram.commandManager = {
      commands: [
        {
          gesture: { key: Keys.Tab },
          canExecute: this.canExecute.bind(this),
          execute: this.addLeftChild.bind(this),
          name: 'leftChild',
        },
        {
          gesture: { key: Keys.Tab, keyModifiers: KeyModifiers.Shift },
          canExecute: this.canExecute.bind(this),
          execute: this.addRightChild.bind(this),
          name: 'rightChild',
        },
        {
          gesture: { key: Keys.Delete },
          canExecute: this.canExecute.bind(this),
          execute: this.removeChild.bind(this),
          name: 'deleteChid',
        },
      ],
    };
private addLeftChild() {
    let selectedObject: any = this.diagram.selectedItems.nodes;
    if (selectedObject[0]) {
      if (selectedObject[0] instanceof Node) {
        let node: NodeModel = addNode();
        let empInfo: EmployeeInfo = selectedObject[0].data as EmployeeInfo;
        if (empInfo.branch === 'Root') {
          (node.data as EmployeeInfo).branch = 'Right';
        } else if (
          empInfo.branch === 'Right' ||
          empInfo.branch === 'subRight'
        ) {
          (node.data as EmployeeInfo).branch = 'subRight';
        } else if (empInfo.branch === 'Left' || empInfo.branch === 'subLeft') {
          (node.data as EmployeeInfo).branch = 'subLeft';
        }
        let connector: ConnectorModel = addConnector(selectedObject[0], node);
        this.diagram.clearSelection();
        let nd: Node = this.diagram.add(node) as Node;
        this.diagram.add(connector);
        this.diagram.doLayout();
        this.diagram.startTextEdit(nd);
      }
    }
  }
  private addRightChild() {
    let selectedObject: any = this.diagram.selectedItems.nodes;
    if (selectedObject[0]) {
      if (selectedObject[0] instanceof Node) {
        let node: NodeModel = addNode();
        let empInfo: EmployeeInfo = selectedObject[0].data as EmployeeInfo;
        if (empInfo.branch === 'Root') {
          (node.data as EmployeeInfo).branch = 'Left';
        } else if (empInfo.branch === 'Left' || empInfo.branch === 'subLeft') {
          (node.data as EmployeeInfo).branch = 'subLeft';
        } else if (
          empInfo.branch === 'Right' ||
          empInfo.branch === 'subRight'
        ) {
          (node.data as EmployeeInfo).branch = 'subRight';
        }
        let connector: ConnectorModel = addConnector(selectedObject[0], node);
        this.diagram.clearSelection();
        let nd: Node = this.diagram.add(node) as Node;
        this.diagram.add(connector);
        this.diagram.doLayout();
        this.diagram.startTextEdit(nd);
      }
    }
  }
  private removeChild() {
    let selectedObject: any = this.diagram.selectedItems.nodes;
    if (selectedObject[0]) {
      if (selectedObject[0] instanceof Node) {
        let node: Node = selectedObject[0] as Node;
        this.removeSubChild(node);
      }
      this.diagram.doLayout();
    }
  }
  //Remove the subchild Elements
  private removeSubChild(node: Node): void {
    for (let i: number = node.outEdges.length - 1; i >= 0; i--) {
      let connector: Connector = this.diagram.getObject(
        node.outEdges[i]
      ) as Connector;
      let childNode: Node = this.diagram.getObject(connector.targetID) as Node;
      if (childNode.outEdges.length > 0) {
        this.removeSubChild(childNode);
      } else {
        this.diagram.remove(childNode);
      }
    }
    this.diagram.remove(node);
  }
```
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2022/12/Creating-a-Mind-Map-using-Keyboard-Shortcuts-in-Angular-Diagram-Component-2.gif" alt="Creating a mind map using keyboard shortcuts in Angular Diagram component" style="width:100%">

  <figcaption>Creating a Mind Map using Keyboard Shortcuts in Angular Diagram Component</figcaption>

</figure>


## Expand and collapse children nodes

Use the **expandIcon** and **collapseIcon** properties of nodes to implement the expand and collapse features in the mind map’s children nodes.

Refer to the following example and the same on [StackBlitz](https://stackblitz.com/edit/angular-uer4j3-dsdrol?file=main.ts "Expanding and collapsing nodes in a mind map using Angular Diagram component StackBlitz demo"). 

```js
private getNodeDefaults(obj: NodeModel): NodeModel {
    ........ 
        obj.expandIcon = {
          shape: 'Minus',
        };
        obj.collapseIcon = {
          shape: 'Plus',
        };
    ........ 
    return obj;
  }

```
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2022/12/Expanding-and-collapsing-nodes-in-a-mind-map-using-Angular-Diagram-component-1.gif" alt="Expanding and collapsing nodes in a mind map using Angular Diagram component" style="width:100%">

  <figcaption>Expanding and collapsing nodes in a mind map using Angular Diagram component</figcaption>

</figure>

## Drag and drop

You can easily change the mind map layout by dragging a topic or subtopic and dropping it on the required location.

Add the following code to the Diagram control’s **drop** method to enable editing in the mind map’s tree structure. Also, the same code is available on [StackBlitz](https://stackblitz.com/edit/angular-eqg2xa-uruchn?file=main.ts "Dragging and dropping nodes in the Anglar mind map").

```js
public drop(args): void {
    if (args.target && args.target instanceof Node) {
      let connector: ConnectorModel = this.diagram.getObject(
        args.element.inEdges[0]
      );
      connector.sourceID = args.target.id;
      this.diagram.dataBind();
      this.diagram.doLayout();
      //Update connector connection direction.
      let srcNode: NodeModel = args.element;
      let targetNode: NodeModel = args.target;
      let srctreeInfo: TreeInfo = srcNode.data as TreeInfo;
      let targettreeInfo: TreeInfo = targetNode.data as TreeInfo;
      if (
        (srctreeInfo.branch === 'Right' || srctreeInfo.branch === 'subRight') &&
        (targettreeInfo.branch === 'Left' ||
          targettreeInfo.branch === 'subLeft')
      ) {
        connector.sourcePortID = targetNode.ports[1].id;
        connector.targetPortID = srcNode.ports[0].id;
        this.updateRightTopicOutEdges(srcNode);
      } else if (
        (srctreeInfo.branch === 'Left' || srctreeInfo.branch === 'subLeft') &&
        (targettreeInfo.branch === 'Right' ||
          targettreeInfo.branch === 'subRight')
      ) {
        connector.sourcePortID = targetNode.ports[0].id;
        connector.targetPortID = srcNode.ports[1].id;
        this.updateLeftTopicOutEdges(srcNode);
      }
      // update your local data source when modifying mind map topics.
      this.updateDataSource(args.element, args.target);
    }
  }
  private updateRightTopicOutEdges(node: NodeModel) {
    for (var i = 0; i < (node as Node).outEdges.length; i++) {
      let outconnector: ConnectorModel = this.diagram.getObject(
        (node as Node).outEdges[i]
      );
      outconnector.sourcePortID = 'port2';
      outconnector.targetPortID = 'port1';
      let targetNode: NodeModel = this.diagram.getObject(outconnector.targetID);
      if ((targetNode as Node).outEdges) {
        this.updateRightTopicOutEdges(targetNode);
      }
    }
  }
  private updateLeftTopicOutEdges(node: NodeModel) {
    for (var i = 0; i < (node as Node).outEdges.length; i++) {
      let outconnector: ConnectorModel = this.diagram.getObject(
        (node as Node).outEdges[i]
      );
      outconnector.sourcePortID = 'port1';
      outconnector.targetPortID = 'port2';
      let targetNode: NodeModel = this.diagram.getObject(outconnector.targetID);
      if ((targetNode as Node).outEdges) {
        this.updateLeftTopicOutEdges(targetNode);
      }
    }
  }
  private updateDataSource(source, target): void {
    let updateData = this.Data.find(function (element) {
      return element.id === source.data.id;
    });
    if (updateData) {
      updateData.parentId = target.data.id;
    }
  }
```
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2022/12/Dragging-and-dropping-nodes-in-a-mind-map-using-Angular-Diagram-component-1.gif" alt="Dragging and dropping nodes in a mind map using Angular Diagram component" style="width:100%">

  <figcaption>Dragging and dropping nodes in a mind map using Angular Diagram component</figcaption>

</figure>

## Mind map shape customization

You can easily customize the appearance of each level of nodes by adding backgrounds, border styles, text styles, and images and visualize them with a custom UI design.

The **getNodeDefaults** method lets you specify a custom shape and style for each node based on its level value.

Refer to the following code example and the same on [StackBlitz](https://stackblitz.com/edit/angular-qdjxrc?file=main.ts "Customizing the shapes in a mind map using the Angular Diagram component StackBlitz demo"). 

```js
private getNodeDefaults(obj: NodeModel): NodeModel {
    obj.constraints = NodeConstraints.Default & ~NodeConstraints.Drag;
    let empInfo: TreeInfo = obj.data as TreeInfo;
    if (
      empInfo.branch === 'Root' ||
      empInfo.branch === 'Left' ||
      empInfo.branch === 'Right'
    ) {
      obj.shape = {
        type: 'Basic',
        shape: empInfo.branch === 'Root' ? 'Ellipse' : 'Rectangle',
      };
      obj.borderColor = 'black';
      obj.style = {
        fill: empInfo.branch === 'Root' ? '#E74C3C' : '#F39C12',
        strokeColor: 'none',
        strokeWidth: 2,
      };
      obj.annotations = [
        {
          content: empInfo.Label,
          margin: { left: 10, right: 10, top: 10, bottom: 10 },
          style: { color: 'white' },
        },
      ];
      if (empInfo.branch === 'Left' || empInfo.branch === 'Right') {
        obj.height = 40;
        obj.width = 100;
      }
    } else {
      let color: string =
        empInfo.branch === 'subRight'
          ? empInfo.Level === '2'
            ? 'Green'
            : '#8E44AD'
          : empInfo.Level === '2'
          ? 'Green'
          : '#3498DB';
      obj.shape = {
        type: 'Basic',
        shape: empInfo.Level === '2' ? 'Ellipse' : 'Rectangle',
      };
      obj.style = { fill: color, strokeWidth: 0 };
      obj.minWidth = 100;
      obj.height = empInfo.Level === '2' ? 30 : 4;
      obj.annotations = [
        {
          content: empInfo.Label,
          offset: empInfo.Level === '2' ? { x: 0.5, y: 0.5 } : { x: 0.5, y: 0 },
          verticalAlignment: empInfo.Level === '2' ? 'Center' : 'Bottom',
          style: { color: empInfo.Level === '2' ? 'white' : 'black' },
        },
      ];
      (obj.shape as TextModel).margin = {
        left: 0,
        right: 0,
        top: 0,
        bottom: 0,
      };
    }
    let port: PointPortModel[] = this.getPort();
    for (let i: number = 0; i < port.length; i++) {
      (obj as any).ports.push(new PointPort(obj, 'ports', port[i], true));
    }
    return obj;
  }
  //sets connector default value
  private getConnectorDefaults(
    connector: ConnectorModel | any,
    diagram: Diagram
  ): ConnectorModel {
    let sourceNode: Node = diagram.getObject(connector.sourceID) as Node;
    let targetNode: Node = diagram.getObject(connector.targetID) as Node;
    let empInfo: TreeInfo = targetNode.data as TreeInfo;
    connector.type = 'Bezier';
    connector.targetDecorator = { shape: 'None' };
    connector.constraints &= ~ConnectorConstraints.Select;
    if (empInfo.branch === 'Right' || empInfo.branch === 'subRight') {
      connector.sourcePortID = sourceNode.ports[0].id;
      connector.targetPortID = targetNode.ports[1].id;
      connector.style = { strokeWidth: 5, strokeColor: '#8E44AD' };
    } else if (empInfo.branch === 'Left' || empInfo.branch === 'subLeft') {
      connector.sourcePortID = sourceNode.ports[1].id;
      connector.targetPortID = targetNode.ports[0].id;
      connector.style = { strokeWidth: 5, strokeColor: '#3498DB' };
    }
    return connector;
  }
  private getPort(): PointPortModel[] {
    let port: PointPortModel[] = [
      {
        id: 'port1',
        offset: { x: 0, y: 0.5 },
        visibility: PortVisibility.Hidden,
        style: { fill: 'black' },
      },
      {
        id: 'port2',
        offset: { x: 1, y: 0.5 },
        visibility: PortVisibility.Hidden,
        style: { fill: 'black' },
      },
    ];
    return port;
  }

```
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2022/12/Customizing-the-shapes-in-a-mind-map-using-the-Angular-Diagram-component-1.png" alt="Customizing the shapes in a mind map using the Angular Diagram component" style="width:100%">

  <figcaption>Customizing the shapes in a mind map using the Angular Diagram component</figcaption>

</figure>

## Spacing

Adjust the spacing between each level of the mind map diagram horizontally and vertically. You can also define a margin around the mind map diagram, like in the following code example.

```js
public layout: Object = {
    type: 'MindMap',
    horizontalSpacing: 80,
    verticalSpacing: 80,
    getBranch: (node: NodeModel, nodes: NodeModel[]) => {
      return ((node as Node).data as TreeInfo).branch;
    },
  };

```
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2022/12/Customizing-the-spacing-between-nodes-in-a-mind-map-using-the-Angular-Diagram-component.png" alt="Customizing the spacing between nodes in a mind map using the Angular Diagram component" style="width:100%">

  <figcaption>Customizing the spacing between nodes in a mind map using the Angular Diagram component</figcaption>

</figure>

## Zooming and panning

Viewing a large mind map on a small screen can be challenging. In that case, zooming and panning help us provide a more detailed view of the mind map.

You can zoom in and out of the diagram using the **Ctrl + mouse wheel** shortcut key.

Refer to the following code examples and the same on [StackBlitz](https://stackblitz.com/edit/angular-ofcbka?file=main.ts "Zooming and panning in a mind map using Angular Diagram component StackBlitz demo") to enable zooming and panning support in the mind map diagram.

**.html**

```xml
<div class="col-lg-8 control-section" style="width: 100%;">
  <div class="content-wrapper">
    <ejs-diagram
      #diagram
      id="diagram"
      width="100%"
      height="700px"
      [getNodeDefaults]="getShapeDefaults"
      [snapSettings]="snapSettings"
      [scrollSettings]="scrollSettings"
      [tool]="tool"
      [layout]="layout"
      [dataSourceSettings]="data"
      [getConnectorDefaults]="getConnDefaults"
    >
    </ejs-diagram>
  </div>
</div>
```

**.ts**

```js
//Enable pan tool.
  public tool: DiagramTools = DiagramTools.ZoomPan;

```
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2022/12/Zooming-and-panning-in-a-mind-map-using-Angular-Diagram-component-1.gif" alt="Zooming and panning in a mind map using Angular Diagram component" style="width:100%">

  <figcaption>Zooming and panning in a mind map using Angular Diagram component</figcaption>

</figure>

## Exporting

You can easily export the mind map diagram to different image formats such as PNG, JPEG, BMP, and SVG.

Refer to the following code example and the same on [StackBlitz](https://stackblitz.com/edit/angular-psm6ou?file=main.ts "Exporting mind map diagram demo on StackBlitz") to explore this feature.

```js
let exportOptions: IExportOptions = {};
    exportOptions.format = args.item.text as FileFormats;
    exportOptions.mode = 'Download';
    exportOptions.region = 'Content';
    exportOptions.multiplePage = false;
    exportOptions.fileName = 'Mindmap';
    this.diagram.exportDiagram(exportOptions);

```

## Conclusion

Thanks for reading! In this blog post, we have seen how to create and customize a mind map using the Syncfusion [Angular Diagram](https://www.syncfusion.com/angular-components/angular-diagram "Synfusion Angular Diagram") component. With the same component, you can also create flowcharts, organizational charts, floor plans, UML diagrams, and BPMN charts. Try out the steps in this blog and provide your feedback in the comments section!

If you would like to try out the Diagram, You can download our free trial. You can also look at the Diagram source on [GitHub](https://github.com/syncfusion/ej2-angular-ui-components "Syncfusion Angular UI controls GitHub demo") and check our [live demo](https://ej2.syncfusion.com/angular/demos/#/material/diagram/default-functionalities "Angular Diagram component live demo") and [documentation](https://ej2.syncfusion.com/angular/documentation/diagram/ "Syncfusion Angular Diagram component documentation") for detailed explanations.

Contact us through our [support forum](https://www.syncfusion.com/forums "Syncfusion Support Forum"), [support portal](https://support.syncfusion.com/ "Syncfusion Support Portal"), or [Feedback Portal](https://www.syncfusion.com/feedback/angular "Syncfusion Feedback Portal"). We are always happy to assist you!

## Related blogs

- [Debug Angular Apps Easily Using Angular DevTools ](https://www.syncfusion.com/blogs/post/debug-angular-apps-easily-using-angular-devtools.aspx "Blog: Debug Angular Apps Easily Using Angular DevTools")
- [Easy Steps to Create a Read-Only Angular PDF Viewer ](https://www.syncfusion.com/blogs/post/easy-steps-to-create-a-read-only-angular-pdf-viewer.aspx "Blog: Easy Steps to Create a Read-Only Angular PDF Viewer")
- [Easily Generate Bulk Reports Using Mail Merge in Angular ](https://www.syncfusion.com/blogs/post/easily-generate-bulk-reports-using-mail-merge-in-angular.aspx "Blog: Easily Generate Bulk Reports Using Mail Merge in Angular")
- [Top 7 Features of Angular 14](https://www.syncfusion.com/blogs/post/top-7-features-of-angular-14.aspx "Blog: Top 7 Features of Angular 14")