Introducing Syncfusion’s New JavaScript Diagram Component for Web

• Nodes—Nodes are one of the basic building blocks of a diagram, used to represent elements in a flowchart, steps in a process flow, employees in an organization chart, and so on.

1. Built-in nodes—Most commonly used shapes for flow charts, BPMN diagrams are included with the control and you can add them in a diagram surface in a single call.
2. Custom nodes—Provide an easy way to define custom nodes by providing graphical paths, images, HTML, or SVG elements.
3. Interactions—Allow you to add, select, delete, resize, move, and rotate the nodes.

1. Three types of connectors are supported: straight, orthogonal, and curved (Bezier).
2. Connectors can be added or edited the between nodes.
3. Bridging or line jumps make it easier to relation or link when connectors overlap each other.
4. Customize the start and end arrow types to indicate the flow direction with built-in decorators. You can also build your own custom decorator as required.
5. Customize the appearance of a connector by changing its line style, color, thickness, etc.

Let’s see how to create a simple flow diagram with the diagram component in a web application:

1. Clone the Essential JS 2 quickstart project and install necessary packages using the following commands.

git clone https://github.com/syncfusion/ej2-quickstart.git quickstart
cd quickstart
npm install

2. Dependent packages must be mapped in the system.config.js configuration file.

System.config({
    paths: {
        'syncfusion:': './node_modules/@syncfusion/',
    },
    map: {
        app: 'app',

        //Syncfusion packages mapping
        "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
        "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
        "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
        "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
        "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
        "@syncfusion/ej2-diagrams": "syncfusion:ej2-diagrams/dist/ej2-diagrams.umd.min.js",
    },
    packages: {
        'app': { main: 'app', defaultExtension: 'js' }
    }
}); 

3. Add the HTML div element for the diagram into your index.html. [src/index.html]
4. Essential JS 2 components support a set of built-in themes, and here we will use the Material theme for the diagram. To add the material theme in your application, you need to import material.css in style.css.

@import '../../node_modules/@syncfusion/ej2/material.css';

5. Now, define the required nodes as (JSON data) with specific position, size, label, and shape in your app.ts[src/app/app.ts] to create a flow diagram.

import { Diagram, NodeModel, ConnectorModel } from '@syncfusion/ej2-diagrams';
//Initializes the nodes for the diagram
let nodes: NodeModel[] = [
    {
        id: 'NewIdea', height: 60, offsetX: 350, offsetY: 80,
        shape: { type: 'Flow', shape: 'Terminator' },
        annotations: [{
            content: 'Place Order'
        }]
    },
    {
        id: 'Meeting', height: 60, offsetX: 350, offsetY: 160,
        shape: { type: 'Flow', shape: 'Process' },
        annotations: [{
            content: 'Start Transaction'
        }]
    },
    {
        id: 'BoardDecision', height: 60, offsetX: 350, offsetY: 240,
        shape: { type: 'Flow', shape: 'Process' },
        annotations: [{
            content: 'Verification'
        }]
    },
    {
        id: 'Project', height: 60, offsetX: 350, offsetY: 330,
        shape: { type: 'Flow', shape: 'Decision' },
        annotations: [{
            content: 'Credit card valid?'
        }]
    },
    {
        id: 'End', height: 60, offsetX: 350, offsetY: 430,
        shape: { type: 'Flow', shape: 'Decision' },
        annotations: [{
            content: 'Funds available?'
        }]
    },
    {
        id: 'node11', height: 60, offsetX: 580, offsetY: 330,
        shape: { type: 'Flow', shape: 'Process' },
        annotations: [{
            content: 'Enter payment method'
        }]
    },
    {
        id: 'transaction_entered', height: 60, offsetX: 350, offsetY: 630,
        shape: { type: 'Flow', shape: 'Terminator' },
        annotations: [{
            content: 'Log transaction'
        }]
    },
    {
        id: 'node12', height: 60, offsetX: 530, offsetY: 630,
        shape: { type: 'Flow', shape: 'Process' },
        annotations: [{
            content: 'Reconcile the entries'
        }]
    },
    {
        id: 'transaction_completed', height: 60, offsetX: 350, offsetY: 530,
        shape: { type: 'Flow', shape: 'Process' },
        annotations: [{
            content: 'Complete Transaction'
        }]
    },
    {
        id: 'Data', height: 45, offsetX: 150, offsetY: 530,
        shape: { type: 'Flow', shape: 'Data' },
        annotations: [{
            content: 'Send e-mail', margin: { left: 25, right: 25 }
        }]
    },
    {
        id: 'node10', height: 70, offsetX: 525, offsetY: 530,
        shape: { type: 'Flow', shape: 'DirectData' },
        annotations: [{ 
            content: 'Customer Database', margin: { left: 25, right: 25 } 
        }]
    }
];

6. Add connectors to establish the relationship among these nodes.

//Initializes the connector for the diagram
let connectors: ConnectorModel[] = [
    {
        id: 'connector1', sourceID: 'NewIdea', targetID: 'Meeting'
    },
    {
        id: 'connector2', sourceID: 'Meeting', targetID: 'BoardDecision'
    },
    {
        id: 'connector3', sourceID: 'BoardDecision', targetID: 'Project'
    },
    {
        id: 'connector4', sourceID: 'Project', targetID: 'End',
        annotations: [
            { content: 'Yes', style: { fill: 'white' } }
        ]
    },
    {
        id: 'connector5', sourceID: 'End', targetID: 'transaction_completed',
        annotations: [
            { content: 'Yes', style: { fill: 'white' } }
        ]
    },
    {
        id: 'connector6', sourceID: 'transaction_completed', targetID: 'transaction_entered'
    },
    {
        id: 'connector7', sourceID: 'transaction_completed', targetID: 'Data'
    },
    {
        id: 'connector8', sourceID: 'transaction_completed', targetID: 'node10'
    },
    {
        id: 'connector9', sourceID: 'node11', targetID: 'Meeting',
        segments: [
            { direction: 'Top', length: 120 }
        ]
    },
    {
        id: 'connector10', sourceID: 'End', targetID: 'node11',
        annotations: [
            { content: 'No', style: { fill: 'white' } }
        ],
        segments: [
            { direction: 'Right', length: 100 }
        ]
    },
    {
        id: 'connector11', sourceID: 'Project', targetID: 'node11',
        annotations: [
            { content: 'No', style: { fill: 'white' } }
        ]
    },
    {
        id: 'connector12', sourceID: 'transaction_entered', targetID: 'node12',
        style: { strokeDashArray: '2,2' }
    }
];

7. Default values for all nodes and connectors can be set using the getNodeDefaults and getConnectorDefaults properties, respectively. For example, if all nodes have the same width and height, such properties can be moved into getNodeDefaults.
8. Now map the nodes and connectors into the diagram class.

//Initializes diagram control
let diagram: Diagram = new Diagram({
    width: '100%', height: '700px', nodes: nodes, connectors: connectors,
    //Sets the default values of a node
    getNodeDefaults: (node: NodeModel) => {
        let obj: NodeModel = {};
        obj.width = 145;
        obj.style = { fill: '#357BD2', strokeColor: 'white' };
        obj.annotations = [{
            style: {
                color: 'white',
                fill: 'transparent'
            }
        }];
        return obj;
    },
    //Sets the default values of a connector
    getConnectorDefaults: (obj: ConnectorModel) => {
        if (obj.id.indexOf('connector') !== -1) {
            obj.type = 'Orthogonal';
            obj.targetDecorator = { shape: 'Arrow', width: 10, height: 10 };
        }
    },
});
diagram.appendTo('#container');

9. Run the following command to start the application.

npm start

The output will be shown like below.

Diagram—Modules

The diagram component is divided into individual modules by feature. To use a particular feature, inject the required module. The following list describes the modules:

• BpmnDiagrams—Inject this module to add built-in BPMN shapes to diagrams.
• ConnectorBridging—Inject this module to add bridges or line caps to connectors.
• ConnectorEditing—This module allows you to edit the segments for connectors.
• ComplexHierarchicalTree—This module allows you to create complex hierarchical tree-like structures.
• DataBinding—This module allows you to populate diagram from a given data source.
• DiagramContextMenu—This module allows you to manipulate the diagram using the context menu.
• HierarchicalTree—This module allows you to create a hierarchical tree-like structure.
• LayoutAnimation—Inject this module to add animation effects to automatic layout diagrams.
• MindMap—This module allows you to create mind map diagrams.
• PrintAndExport—This module allows you to print or export the diagram elements.
• RadialTree—This module allows you to create radial tree-like structures.
• Snapping—This module allows you to snap the diagram elements with gridlines.
• SymmetricLayout—This module renders diagram elements in a symmetrical layout.
• UndoRedo—Inject this module to revert and restore changes.

Summary