Getting Started with ASP.NET MVC Diagram Control

20 May 202224 minutes to read

This section briefly explains about how to include ASP.NET MVC Diagram control in your ASP.NET MVC application using Visual Studio.

Prerequisites

System requirements for ASP.NET MVC controls

Create ASP.NET MVC application with HTML helper

Install ASP.NET MVC package in the application

Syncfusion ASP.NET MVC controls are available in nuget.org. Refer to NuGet packages topic to learn more about installing NuGet packages in various OS environments. To add ASP.NET MVC controls in the application, open the NuGet package manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), search for Syncfusion.EJ2.MVC5 and then install it.

The Syncfusion.EJ2.MVC5 NuGet package has dependencies, Newtonsoft.Json for JSON serialization and Syncfusion.Licensing for validating Syncfusion license key.

If you create ASP.NET MVC application with MVC4 package, search for Syncfusion.EJ2.MVC4 and then install it.

Add namespace

Add Syncfusion.EJ2 namespace reference in Web.config under Views folder.

<namespaces>
    <add namespace="Syncfusion.EJ2"/>
</namespaces>

Add style sheet

Checkout the Themes topic to learn different ways (CDN, NPM package, and CRG) to refer styles in ASP.NET MVC application, and to have the expected appearance for Syncfusion ASP.NET MVC controls. Here, the theme is referred using CDN inside the <head> of ~/Views/Shared/_Layout.cshtml file as follows,

<head>
    ...
    <!-- Syncfusion ASP.NET MVC controls styles -->
    <link rel="stylesheet" href="https://cdn.syncfusion.com/ej2/20.3.56/fluent.css" />
</head>

Add script reference

In this getting started walk-through, the required scripts are referred using CDN inside the <head> of ~/Views/Shared/_Layout.cshtml file as follows,

<head>
    ...
    <!-- Syncfusion ASP.NET MVC controls scripts -->
    <script src="https://cdn.syncfusion.com/ej2/20.3.56/dist/ej2.min.js"></script>
</head>

Register Syncfusion Script Manager

Open ~/Views/Shared/_Layout.cshtml page and register the script manager EJS().ScriptManager() at the end of <body> in the ASP.NET MVC application as follows.

<body>
...
    <!-- Syncfusion ASP.NET MVC Script Manager -->
    @Html.EJS().ScriptManager()
</body>

Add ASP.NET MVC Diagram control

Now, add the Syncfusion ASP.NET MVC Diagram control in ~/Views/Home/Index.cshtml page. You can create and add a node (JSON data) with specific position, size, label, and shape.

@(Html.EJS().Diagram("container")
    .Width("100%")
    .Height("700px")
    .Nodes(ViewBag.nodes).Render())
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Syncfusion.EJ2.Diagrams;
using System.Drawing;

namespace EJ2MVCSampleBrowser.Controllers.Diagram
{
    public partial class DiagramController : Controller
    {
        // GET: Nodes
        public ActionResult Nodes()
        {
            List<DiagramNode> nodes = new List<DiagramNode>();
            List<DiagramNodeAnnotation> Node1 = new List<DiagramNodeAnnotation>();
            Node1.Add(new DiagramNodeAnnotation() { Content = "node1", Style = new DiagramTextStyle() { Color = "White", StrokeColor = "None" } });
            nodes.Add(new Node()
            {
                Id = "node1",
                Width = 100,
                Height = 100,
                Style = new NodeStyleNodes() { Fill = "darkcyan" },
                text = "node1",
                OffsetX = 100,
                OffsetY = 100,
                Annotations = Node1
            });
            ViewBag.nodes = nodes;


            return View();
        }
    }
    public class Node : DiagramNode
    {
        public string text;
    }
}

ASP.NET MVC Diagram Control

Connect two Nodes with a Connector

Add two node to the diagram as shown in the previous example. Connect these nodes by adding a connector using the connector property and refer the source and target end by using the sourceNode and targetNode properties.

@(Html.EJS().Diagram("container")
    .Width("100%")
    .Height("580px")
    .Nodes(ViewBag.nodes)
    .Connectors(ViewBag.connectors).Render())
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Syncfusion.EJ2.Diagrams;

namespace EJ2MVCSampleBrowser.Controllers.Diagram
{
    public partial class DiagramController : Controller
    {
        // GET: Connector
        public ActionResult Connector()
        {
            List<DiagramNode> Nodes = new List<DiagramNode>();
            List<DiagramNodeAnnotation> Node1 = new List<DiagramNodeAnnotation>();
            Node1.Add(new DiagramNodeAnnotation() { Content = "node1" });
            List<DiagramNodeAnnotation> Node2 = new List<DiagramNodeAnnotation>();
            Node2.Add(new DiagramNodeAnnotation() { Content = "node2" });
            List<DiagramNodeAnnotation> Node3 = new List<DiagramNodeAnnotation>();
            Nodes.Add(new DiagramNode()
            {
                Id = "node1",
                Annotations = Node1,
                Style = new NodeStyleNodes() { Fill = "darkcyan" },
                OffsetX= 100,
                OffsetY= 100,
                Width = 100,
                Height = 100

        });
            Nodes.Add(new DiagramNode()
            {
                Id = "node2",
                Annotations = Node2,
                Style = new NodeStyleNodes() { Fill = "darkcyan" },
                OffsetX = 300,
                OffsetY = 100,
                Width = 100,
                Height = 100
            });
            List<DiagramConnector> Connectors = new List<DiagramConnector>();
            Connectors.Add(new DiagramConnector() { Id = "connector", SourceID = "node1", TargetID = "node2", });
            ViewBag.nodes = Nodes;
            ViewBag.connectors = Connectors;
            return View();
        }
    }

}

ASP.NET MVC Diagram with Connector

View Sample in GitHub.

Adding default values

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.

For example, if all the nodes have same height and width, we can set such properties as follows.

@(Html.EJS().Diagram("container")
    .Width("100%")
    .Height("580px")
    .GetNodeDefaults("getNodeDefaults")
    .GetConnectorDefaults("getConnectorDefaults")
    .Nodes(ViewBag.nodes)
    .Connectors(ViewBag.connectors).Render()

    function getNodeDefaults(obj, diagram) {
            obj.width = 100;
            obj.height = 100;
            obj.OffsetX = 300;
        }

        function getConnectorDefaults(obj, diagram) {
            obj.type = 'Orthogonal';
        }
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Syncfusion.EJ2.Diagrams;

namespace EJ2MVCSampleBrowser.Controllers.Diagram
{
    public partial class DiagramController : Controller
    {
        public ActionResult Connector()
        {
            List<DiagramNode> Nodes = new List<DiagramNode>();
            List<DiagramNodeAnnotation> Node1 = new List<DiagramNodeAnnotation>();
            Node1.Add(new DiagramNodeAnnotation() { Content = "node1" });
            List<DiagramNodeAnnotation> Node2 = new List<DiagramNodeAnnotation>();
            Node2.Add(new DiagramNodeAnnotation() { Content = "node2" });
            List<DiagramNodeAnnotation> Node3 = new List<DiagramNodeAnnotation>();
            Nodes.Add(new DiagramNode()
            {
                Id = "node1",
                Annotations = Node1,
                Style = new NodeStyleNodes() { Fill = "darkcyan" },
                OffsetY= 100,
        });
            Nodes.Add(new DiagramNode()
            {
                Id = "node2",
                Annotations = Node2,
                Style = new NodeStyleNodes() { Fill = "darkcyan" },
                OffsetY = 300,
            });
            List<DiagramConnector> Connectors = new List<DiagramConnector>();
            Connectors.Add(new DiagramConnector() { Id = "connector", SourceID = "node1", TargetID = "node2", });
            ViewBag.nodes = Nodes;
            ViewBag.connectors = Connectors;
            return View();
        }
    }

}

Flow Diagram

Similarly, the required nodes and connectors can be added to form a complete flow diagram.

@(Html.EJS().Diagram("container")
    .Width("100%")
    .Height("580px")
    .GetNodeDefaults("getNodeDefaults")
    .GetConnectorDefaults("getConnectorDefaults")
    .Nodes(ViewBag.nodes)
    .Connectors(ViewBag.connectors).Render()


function getNodeDefaults(obj, diagram) {
            obj.width = 100;
            obj.height = 60;
            obj.offsetX = 300;
        }
 function getConnectorDefaults(obj, diagram) {
            obj.type = 'Orthogonal';
        }
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Syncfusion.EJ2.Diagrams;

namespace EJ2MVCSampleBrowser.Controllers.Diagram
{
    public partial class DiagramController : Controller
    {
        public ActionResult Connector()
        {
            List<DiagramNode> Nodes = new List<DiagramNode>();
            List<DiagramNodeAnnotation> Node1 = new List<DiagramNodeAnnotation>();
            Node1.Add(new DiagramNodeAnnotation() { Content = "node1" });
            List<DiagramNodeAnnotation> Node2 = new List<DiagramNodeAnnotation>();
            Node2.Add(new DiagramNodeAnnotation() { Content = "node2" });
            List<DiagramNodeAnnotation> Node3 = new List<DiagramNodeAnnotation>();
            Node3.Add(new DiagramNodeAnnotation() { Content = "i < 10?" });
            List<DiagramNodeAnnotation> Node4 = new List<DiagramNodeAnnotation>();
            Node4.Add(new DiagramNodeAnnotation() { Content = "print(hello!!)", Style = new DiagramTextStyle() { Fill = "White" } });
            List<DiagramNodeAnnotation> Node5 = new List<DiagramNodeAnnotation>();
            Node5.Add(new DiagramNodeAnnotation() { Content = "i++;" });
            List<DiagramNodeAnnotation> Node6 = new List<DiagramNodeAnnotation>();
            Node6.Add(new DiagramNodeAnnotation() { Content = "End" });
            List<DiagramConnectorAnnotation> connector1 = new List<DiagramConnectorAnnotation>();
            connector1.Add(new DiagramConnectorAnnotation() { Content = "Yes" });
            List<DiagramConnectorAnnotation> connector2 = new List<DiagramConnectorAnnotation>();
            connector2.Add(new DiagramConnectorAnnotation() { Content = "No" });
            Nodes.Add(new DiagramNode()
            {
                Id = "node1",
                Annotations = Node1,
                Style = new NodeStyleNodes() { Fill = "darkcyan" },
                Shape = new { type = "Flow", shape = "Terminator" },
                OffsetY = 50,
            });
            Nodes.Add(new DiagramNode()
            {
                Id = "node2",
                Annotations = Node2,
                Style = new NodeStyleNodes() { Fill = "darkcyan" },
                OffsetY = 140,
                Shape = new { type = "Flow", shape = "Process" },
            });
            Nodes.Add(new DiagramNode()
            {
                Id = "node3",
                Annotations = Node3,
                Style = new NodeStyleNodes() { Fill = "darkcyan" },
                OffsetY = 230,
                Shape = new { type = "Flow", shape = "Decision" },
            });
            Nodes.Add(new DiagramNode()
            {
                Id = "node4",
                Annotations = Node4,
                Style = new NodeStyleNodes() { Fill = "darkcyan" },
                OffsetY = 320,
                Shape = new { type = "Flow", shape = "PreDefinedProcess" },
            });
            Nodes.Add(new DiagramNode()
            {
                Id = "node5",
                Annotations = Node5,
                Style = new NodeStyleNodes() { Fill = "darkcyan" },
                OffsetY = 410,
                Shape = new { type = "Flow", shape = "Process" },
            });
            Nodes.Add(new DiagramNode()
            {
                Id = "node6",
                Annotations = Node6,
                Style = new NodeStyleNodes() { Fill = "darkcyan" },
                
                OffsetY = 500,
                Shape = new { type = "Flow", shape = "Terminator" },
            });
            List<DiagramConnector> Connectors = new List<DiagramConnector>();
            Connectors.Add(new DiagramConnector() { Id = "connector1", SourceID = "node1", TargetID = "node2", });
            Connectors.Add(new DiagramConnector() { Id = "connector2", SourceID = "node2", TargetID = "node3", });
            Connectors.Add(new DiagramConnector() { Id = "connector3", SourceID = "node3", TargetID = "node4", Annotations = connector1, });
            Connectors.Add(new DiagramConnector() { Id = "connector4", SourceID = "node3", TargetID = "node6", Annotations = connector2, });
            Connectors.Add(new DiagramConnector() { Id = "connector5", SourceID = "node4", TargetID = "node5" });
            Connectors.Add(new DiagramConnector() { Id = "connector6", SourceID = "node5", TargetID = "node3" });
            ViewBag.nodes = Nodes;
            ViewBag.connectors = Connectors;
            return View();
        }
    }

}

Automatic Organization Chart

In the ‘Flow Diagram’ section, how to create a diagram manually was discussed. This section explains how to create and position the diagram automatically.

Business object (Employee information)

Define Employee Information as JSON data. The following code example shows an employee array whose, Name is used as an unique identifier and ReportingPerson is used to identify the person to whom an employee report to, in the organization.

    public data: Object[] = [
        {
            Name: "Elizabeth",
            Role: "Director"
        },
        {
            Name: "Christina",
            ReportingPerson: "Elizabeth",
            Role: "Manager"
        },
        {
            Name: "Yoshi",
            ReportingPerson: "Christina",
            Role: "Lead"
        },
        {
            Name: "Philip",
            ReportingPerson: "Christina",
            Role: "Lead"
        },
        {
            Name: "Yang",
            ReportingPerson: "Elizabeth",
            Role: "Manager"
        },
        {
            Name: "Roland",
            ReportingPerson: "Yang",
            Role: "Lead"
        },
        {
            Name: "Yvonne",
            ReportingPerson: "Yang",
            Role: "Lead"
        }
    ];

Map data source

You can configure the above “Employee Information” with diagram, so that the nodes and connectors are automatically generated using the mapping properties. The following code example show how dataSourceSettings is used to map ID and parent with property name identifiers for employee information.

<ejs-diagram id="diagram" width="100%" height="550px" getNodeDefaults="@ViewBag.getNodeDefaults" getConnectorDefaults="@ViewBag.getConnectorDefaults" created="diagramCreated">
                <e-diagram-datasourcesettings id="Id" parentId="ReportingPerson" dataManager="new DataManager(){ Data = (List<OverviewData>)ViewBag.Nodes }"></e-diagram-datasourcesettings>
                <e-diagram-layout type="OrganizationalChart"></e-diagram-layout>
                </ejs-diagram>
            function getNodeDefaults(obj, diagram) {
            obj.height = 60;
            obj.width = 100;
            return obj;
        }
        function getConnectorDefaults(connector, diagram) {
            connector.type = 'Orthogonal';
            return connector;
        }
        public partial class DiagramController : Controller
    {
        // GET: Overview
        public ActionResult Overview()
        {
           ViewBag.Nodes = OverviewData.GetAllRecords();
            return View();
        }
    }
    public class OverviewData
    {
        public string Id { get; set; }
        public string Name { get; set; }
        public string Designation { get; set; }
        public string ReportingPerson { get; set; }
        public OverviewData(string id, string name, string designation, string reportingperson)
        {
            this.Id = id;
            this.Name =name;
            this.Designation =designation;
            this.ReportingPerson =reportingperson;
        }
        public static List<OverviewData> GetAllRecords()
        {
            List<OverviewData> data = new List<OverviewData>();
            data.Add(new OverviewData("parent", "Elizabeth", "Director", "" ));
            data.Add(new OverviewData("1", "Christina", "Manager", "parent"));
            data.Add(new OverviewData("2", "Yoshi", "Lead", "1" ));
            data.Add(new OverviewData("3", "Philip", "Lead", "1"));
            data.Add(new OverviewData("4", "Yang", "Manager", "parent"));
            data.Add(new OverviewData("5", "Roland", "Lead", "4"));
            data.Add(new OverviewData("6", "Yvonne", "Lead", "4"));
            return data;

        }
    }

Visualize employee

The following code examples indicate how to define the default appearance of nodes and connectors. The setNodeTemplate is used to update each node based on employee data.

@Html.EJS().Diagram("diagram").Width("100%").Height("590px").GetNodeDefaults("getNodeDefaults").GetConnectorDefaults("getConnectorDefaults").ScrollSettings(s => s.ScrollLimit(Syncfusion.EJ2.Diagrams.ScrollLimit.Infinity)).DataSourceSettings(ss => ss.Id("Id").ParentId("ReportingPerson")
        .DataManager(new DataManager() { Data = (List<OverviewData>)ViewBag.Nodes })).Layout(l => l.Type(Syncfusion.EJ2.Diagrams.LayoutType.OrganizationalChart).GetLayoutInfo("getLayoutInfo")).SnapSettings(se => se.Constraints(Syncfusion.EJ2.Diagrams.SnapConstraints.None)).Created("diagramCreated").Render()


function getNodeDefaults(obj, diagram) {
            obj.height = 60;
            obj.width = 100;
        }
 function getConnectorDefaults(obj, diagram) {
            obj.type = 'Orthogonal';
        }
using EJ2MVCSampleBrowser.Models;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace EJ2MVCSampleBrowser.Controllers.Diagram
{
    public partial class DiagramController : Controller
    {
        public ActionResult Overview()
        {
           ViewBag.Nodes = OverviewData.GetAllRecords();
            return View();
        }
    }
}

public class OverviewData
    {
        public string Id { get; set; }
        public string Name { get; set; }
        public string Designation { get; set; }
        public string ReportingPerson { get; set; }
        
        public OverviewData(string id, string name, string designation, string reportingperson)
        {
            this.Id = id;
            this.Name =name;
            this.Designation =designation;
            this.ReportingPerson =reportingperson;
            
        }

        public static List<OverviewData> GetAllRecords()
        {
            List<OverviewData> data = new List<OverviewData>();
            data.Add(new OverviewData("parent", "Elizabeth", "Director", "" ));
            data.Add(new OverviewData("1", "Christina", "Manager", "parent"));
            data.Add(new OverviewData("2", "Yoshi", "Lead", "1" ));
            data.Add(new OverviewData("3", "Philip", "Lead", "1"));
            data.Add(new OverviewData("4", "Yang", "Manager", "parent"));
            data.Add(new OverviewData("5", "Roland", "Lead", "4"));
            data.Add(new OverviewData("6", "Yvonne", "Lead", "4"));
            return data;

        }
    }

You can refer to our ASP.NET MVC Diagram feature tour page for its groundbreaking feature representations. You can also explore our ASP.NET MVC Diagram example that shows how to render the Diagram in ASP.NET MVC.