How to get started easily with Syncfusion Angular 11 Diagram?

 A quick start project that helps you to create an Angular 11 Diagram with minimal code configuration.

Diagram features covered in this project

This is an Angular 11 project created using Angular CLI 11.2.3. The Diagram features included in this project are as follows:

1. Simple flowchart

• Diagram provides all required flow shapes as readymade objects. You need to define the shapes and type to render the desired shapes in the diagram.
• Avoids overlapping of connectors over nodes using ports.

2. Organizational chart

• This sample explains how to assign the data Source externally and automatically position the populated nodes.

Project prerequisites

Make sure that you have the compatible versions of TypeScript and Angular in your machine before starting to work on this project.

• Node.js (latest version)
• Angular 11
• Angular CLI
• Typescript 4+
• Visual Studio Code for Editor

Angular 11 Diagram – Introduction

The Angular 11 Diagram used in this project is created from the Syncfusion `ej2-angular-diagram` package. You can simply define it as <ejs-diagram> within the template.

Dependencies

Before starting with this project, the Angular 11 Diagram requires to add the Syncfusion `ej2-diagram` package from npmjs, which are distributed in npm as @syncfusion scoped packages.

Creating Angular Project

You can refer to the Angular project creation steps using the Angular CLI tool.

1. Install the Angular CLI application in your machine.

npm install @angular/cli@11.2.3

2. Now, create a new Angular project by using the command `ng new` and navigate to that folder.

ng new angular11-app

cd angular-app

3. Install the ej2-angular-diagram package using the npm install command.

npm install @syncfusion/ej2-angular-diagrams --save

Creating Empty diagram

You can add the Angular 11 diagram component by using `ej-diagram` directive and the attributes used within this tag allows you to define other diagram functionalities.

1. You have to import the DiagramModule into app.module.ts file from the package @syncfusion/ej2-angular-diagrams

[src/app/app.module.ts]

import { BrowserModule } from '@angular/platform-browser';

import { DiagramModule } from '@syncfusion/ej2-angular-diagrams';

import { NgModule } from '@angular/core';

 

import { AppComponent } from './app.component';

 

/**

 * Module

 */

@NgModule({

  imports: [

      BrowserModule, DiagramModule

  ],

  declarations: [AppComponent],

  bootstrap: [AppComponent],

  providers: [ ],

})

 

export class AppModule { }

 

2. Define the diagram tag into app.component.html. In the following code example, set the ID, width, and height property of the diagram to create an empty diagram.

[src/app/app.component.html]

<ejs-diagram id="diagram" width="100%" height="580px"> </ejs-diagram>

3. Then, you must include the diagram dependent stylesheets into [src/styles.css] file. Syncfusion provides different types of themes style to the Diagram control and you can use this into your application based on your requirement. All the stylesheets are available under node_modules/@syncfusion/ej2-angular-diagrams folder. 

@import "../node_modules/@syncfusion/ej2-angular-diagrams/material.css";

4. Now, run the application by using ng serve command and open this link in your browser. You will see the empty diagram as follows.

Creating flowchart with Syncfusion Diagram control

Using Syncfusion Diagram control, you can create a flowchart with nodes and connectors like the following screenshot.

• Nodes are used to visualize any graphical object and it can be arranged and manipulated at the same time on a diagram page.
• Diagram provides all required flow shapes as readymade objects. You can just define the shape type and shape name to render the shapes in the diagram.

Here is a sample code for adding nodes.

[src/app/app.component.ts]

 public nodes: NodeModel[] = [

 { 

    //Define unique id for each shape

     id: 'Start', offsetY: 50, annotations: [{ content: 'Start' }], 

      //Define the shape type and flow shape

     shape: { type: 'Flow', shape: 'Terminator' } 

  },

  {

     id: 'Init', offsetY: 150, annotations: [{ content: 'var i = 0;' }],

      shape: { type: 'Flow', shape: 'Process' } 

   },

  {

      id: 'Condition', offsetY: 250, annotations: [{ content: 'i < 10?' }], shape: { type: 'Flow', shape: 'Decision' },

      

    },

    { id: 'Print', offsetY: 350, annotations: [{ content: 'print(\'Hello!!\');' }], shape: { type: 'Flow', shape: 'PreDefinedProcess' } },

    {

      id: 'Increment', offsetY: 450, annotations: [{ content: 'i++;' }], shape: { type: 'Flow', shape: 'Process' },

      

    },

    {

      id: 'End', offsetY: 550, annotations: [{ content: 'End' }], shape: { type: 'Flow', shape: 'Terminator' },

     

    },

];

• Now, you have to map this “nodes” object to the diagram’s nodes property.

[src/app/app.component.html]

  <ejs-diagram id="diagram" width="100%" height="580px"  [nodes] = “nodes”>

</ejs-diagram>

 

• Connectors are used to represent a relationship between two nodes. Here is a sample code for adding connectors.

[src/app/app.component.ts]

    public connectors: ConnectorModel[] = [

    { 

        //Define unique ID for connectors

       id: 'connector1',

       //SourceID and targetID property is used to define the relationship between shapes

       sourceID: 'Start', targetID: 'Init' 

     },

   {

      id: 'connector3', sourceID: 'Condition', targetID: 'Print',

      annotations: [{ content: 'Yes' }]

    },

    {

      id: 'connector4', sourceID: 'Condition', targetID: 'End',  

      annotations: [{ content: 'No' }]

    },

    { id: 'connector5', sourceID: 'Print', targetID: 'Increment' },

    {

      id: 'connector6', sourceID: 'Increment', targetID: 'Condition',  

    }

  ];

• Now, you have to map this “connectors” object to the diagram’s connectors property.

[src/app/component.html]

  <ejs-diagram id="diagram" width="100%" height="580px" [nodes] = “nodes”  [connectors] = “connectors”>

</ejs-diagram>

 

• From the above screenshot, you can see all the nodes have same width, height, and x position. So, instead of specifying these common settings to all the nodes, the “getNodeDefaults” property of the diagram is used to define these common settings to all the nodes.
• Define the common settings in the “getNodeDefaults” method. And then, you must map the method name to the diagram’s “getNodeDefaults” property. 

[src/app/app.component.html]

  <ejs-diagram id="diagram" width="100%" height="580px" [nodes] = “nodes”  [connectors] = “connectors”  [getNodeDefaults] = “nodeDefaults”>

</ejs-diagram>

[src/app/app.component.ts]

  public nodeDefaults(obj: NodeModel) : NodeModel {

    let node: NodeModel = {};

    node.height = 50;

    node.width = 140;

    node.offsetX = 300;

    return node;

  }

• Like “getNodeDefaults”, the “getConnectorDefaults” property is used to define the common settings for connector.
• Three types of connectors are supported in the diagram such as straight line, orthogonal line, and Bezier line. Here, orthogonal connector is used to create the flow diagram.
• The targetDecorator is used to indicate the flow direction.  You can also define sourceDecorator based on your requirement.
• Now, you have to map the “getConnectorDefaults” object to the “getConnectorDefaults” property of the diagram.

[src/app/app.component.html]

  <ejs-diagram id="diagram" width="100%" height="580px" [nodes] = “nodes”  [connectors] = “connectors” [getNodeDefaults] = “nodeDefaults” [getConnectorDefaults] = “connDefaults”>

</ejs-diagram>

[src/app/app.component.ts]

  public connDefaults(obj: Connector) : void {

    obj.type = 'Orthogonal';

    obj.targetDecorator = { shape: 'Arrow', width: 10, height: 10 };

  }

• In the above screenshot, there are some connectors overlapped with the node. It can be avoided with the help of ports.
• Ports represent a specific point on a node to which connector can be connected. You can add multiple ports to the nodes.
• The offset property of port is used to align the port relative to the node boundaries. The x and y properties of the offset should be defined in the range of 0 to 1.
• For example, if you specify x = 0 and y = 0, then port will be positioned at top/left corner of the node. If you define (1, 1), then it will be positioned at bottom/right corner, and (0.5, 0.5) represents center of the node.
• The ports are added for the nodes, which are overlapped with the connectors.
• The connection has been established from port to port instead of node to node for “conditionNode” and “endNode” using the connector’s sourcePortID and targetPortID properties.
• Similarly, the connection has been established from port to port instead of node to node for “incrementalNode” and “conditionNode”

Here is an example for avoiding overlapping of connectors.

   public nodes: NodeModel[] = [ 

    {

      id: 'Condition', offsetY: 250, annotations: [{ content: 'i < 10?' }], shape: { type: 'Flow', shape: 'Decision' },

   //Creation of ports

      ports: [{ offset: { x: 0, y: 0.5 }, id: "port1" }, { offset: { x: 1, y: 0.5 }, id: "port2" }]

    },

    {

      id: 'Increment', offsetY: 450, annotations: [{ content: 'i++;' }], shape: { type: 'Flow', shape: 'Process'    },

      ports: [{ offset: { x: 0, y: 0.5 }, id: "port1" }, { offset: { x: 1, y: 0.5 }, id: "port2" }]

    },

    {

      id: 'End', offsetY: 550, annotations: [{ content: 'End' }], shape: { type: 'Flow', shape: 'Terminator' },

      ports: [{ offset: { x: 0, y: 0.5 }, id: "port1" }, { offset: { x: 1, y: 0.5 }, id: "port2" }]

    },

  ]

 

  public connectors: ConnectorModel[] = [ 

//Establish port to port connection by specifying sourcePortID and targetPortID

    {

      id: 'connector4', sourceID: 'Condition', targetID: 'End', sourcePortID: 'port2', targetPortID: 'port2',

      annotations: [{ content: 'No' }]

    }, 

    {

      id: 'connector6', sourceID: 'Increment', targetID: 'Condition', sourcePortID: 'port1', targetPortID: 'port1'

    }

  ];

The following screenshot avoids overlapping of connectors by means of ports.

Creating organizational chart with Syncfusion Diagram control

An organizational chart is a Diagram that displays the structure of an organization and relationships between the users (Employees). Using Syncfusion Diagram control, you can create an organization chart like the following screenshot.

• Define the employee information as JSON array and then configure the data into the diagram’s `dataSourceSettings` property.

·  In Syncfusion Diagram control, rectangle boxes shown in the screenshot represent nodes, lines represents connectors, and the text inside the rectangle box represents annotations.

·  At each node creation, the dataSourceSettings `doBinding` method will be triggered. You can use this method to configure the employee information inside the node.

·  From the screenshot, the rectangle boxes having same width and height and the lines having same line style. Use the “nodeDefaults” and “connectorDefaults” method available in the Diagram control to configure these common settings.

[src/app/app.component.ts]

     public Data: any = [

    { 'id': 'parent', 'role': 'Board', 'color': '#71AF17' },

    { 'id': '1', 'role': 'General Manager', 'manager': 'parent', 'color': '#71AF17' },

    { 'id': '2', 'role': 'Human Resource Manager', 'manager': '1', 'color': '#1859B7' },

    { 'id': '3', 'role': 'Trainers', 'manager': '2', 'color': '#2E95D8' },

    { 'id': '4', 'role': 'Recruiting Team', 'manager': '2', 'color': '#2E95D8' }, 

    { 'id': '6', 'role': 'Design Manager', 'manager': '1', 'color': '#1859B7' },

    { 'id': '7', 'role': 'Design Supervisor', 'manager': '6', 'color': '#2E95D8' },

    { 'id': '8', 'role': 'Development Supervisor', 'manager': '6', 'color': '#2E95D8' },

    { 'id': '10', 'role': 'Operations Manager', 'manager': '1', 'color': '#1859B7' },

    { 'id': '11', 'role': 'Statistics Department', 'manager': '10', 'color': '#2E95D8' },

    { 'id': '12', 'role': 'Logistics Department', 'manager': '10', 'color': '#2E95D8' },

    { 'id': '16', 'role': 'Marketing Manager', 'manager': '1', 'color': '#1859B7' },

    { 'id': '17', 'role': 'Overseas Sales Manager', 'manager': '16', 'color': '#2E95D8' }, 

    { 'id': '20', 'role': 'Service Department Manager', 'manager': '16', 'color': '#2E95D8' }

    ];

 

    public data: Object = {

         //Set the unique field from data source

        id: 'id', 

        //Set the field, which is used to identify the reporting person

        parentId: 'manager', 

        //Define the employee data

        dataManager: new DataManager(this.Data),

        doBinding: (nodeModel: NodeModel, data: object, diagram: Diagram) => {

            //You will get the employee information in data argument and bind that value directly to node's built-in properties.

            nodeModel.annotations = [{ content: (data as any).role }];

            nodeModel.style = { fill: (data as any).color };

        }

    };

    public layout: Object = {

         //Set the layout type

        type: 'OrganizationalChart' 

    };

 

    //Defines the default node and connector properties

    public nodeDefaults(obj: NodeModel) : NodeModel {

      obj.annotations[0].style.color = "white";

      obj.width = 120; 

      return obj;

    };

    public connDefaults(connector: ConnectorModel, diagram: Diagram) : ConnectorModel {

        connector.type = 'Orthogonal';

        connector.targetDecorator = { shape: 'None' };

        return connector;

    }

 

Now, you have to map the diagram’s layout, dataSourceSettings, node, and connector defaults property within the app.component.html file.

[src/app/app.component.html]

 

<ejs-diagram id="diagram" id="diagram" width="100%" height="700px " [layout]='layout' [dataSourceSettings]= 'data' [getNodeDefaults]= 'nodeDefaults' [getConnectorDefaults]= 'connDefaults' >

</ejs-diagram>

The following screenshot displays the organizational chart of the employees.

Summary

To know more about the Diagram, check our Angular Diagram features from this page. If you have any queries or require clarifications.

Please let us know in comments below. You can also contact us through our Support forum or Direct-Trac. We are happy to assist you!

Conclusion
I hope you enjoyed learning about how to get started easily with Syncfusion Angular 11 Diagram.

You can refer to our Angular Diagram feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our Angular Diagram example to understand how to create and manipulate data.

For current customers, you can check out our Document Processing Libraries from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-trac, or feedback portal. We are always happy to assist you!