How to get started easily with Syncfusion Angular 8 Diagram?

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

Diagram features covered in this project

This is an Angular 8 project created using Angular CLI 8.1.1. 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 dataSource 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.

• Angular 8+
• TypeScript 3.4+

Angular 8 Diagram – Introduction

The Angular 8 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 8 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@8.1.1
   

If you would like to follow and run the application in Angular 6, Angular 5, or Angular 4,  replace the CLI command version number with corresponding Angular version number.

npm install -g @angular/cli@<CLI VERSION>

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

   ng new <project name>
   cd <project name>
   

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 8 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]

[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.

[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/styles/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.

[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.

 [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.

[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.

 [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. 

[app.component.html]

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

[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.

[app.component.html]

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

[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 node: 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 connector: 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.

Here is the sample

Sample: https://stackblitz.com/edit/gubzkm-h5bjgq?file=index.ts

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.

[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.

[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.

Here is the sample

Sample: https://stackblitz.com/edit/2vhtnp-t9hjdg?file=index.ts

Summary

Refer to our documentation and online samples for more features. If you have any queries, 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 8 Diagram.

You can refer to our JavaScript 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 JavaScript Diagram example to understand how to create and manipulate data.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion®, you can try our 30-day free trial to check out our other 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!