Getting Started with ASP.NET Core Diagram Control
19 Feb 202424 minutes to read
This section briefly explains about how to include ASP.NET Core Diagram control in your ASP.NET Core application using Visual Studio.
Prerequisites
System requirements for ASP.NET Core controls
Create ASP.NET Core web application with Razor pages
Install ASP.NET Core package in the application
To add ASP.NET Core 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.AspNet.Core and then install it. Alternatively, you can utilize the following package manager command to achieve the same.
Install-Package Syncfusion.EJ2.AspNet.Core -Version 27.2.2NOTE
Syncfusion ASP.NET Core controls are available in nuget.org. Refer to NuGet packages topic to learn more about installing NuGet packages in various OS environments. The Syncfusion.EJ2.AspNet.Core NuGet package has dependencies, Newtonsoft.Json for JSON serialization and Syncfusion.Licensing for validating Syncfusion license key.
Add Syncfusion ASP.NET Core Tag Helper
Open ~/Pages/_ViewImports.cshtml file and import the Syncfusion.EJ2 TagHelper.
@addTagHelper *, Syncfusion.EJ2Add stylesheet and script resources
Here, the theme and script is referred using CDN inside the <head> of ~/Pages/Shared/_Layout.cshtml file as follows,
<head>
...
<!-- Syncfusion ASP.NET Core controls styles -->
<link rel="stylesheet" href="https://cdn.syncfusion.com/ej2/27.2.2/fluent.css" />
<!-- Syncfusion ASP.NET Core controls scripts -->
<script src="https://cdn.syncfusion.com/ej2/27.2.2/dist/ej2.min.js"></script>
</head>NOTE
Checkout the Themes topic to learn different ways (CDN, NPM package, and CRG) to refer styles in ASP.NET Core application, and to have the expected appearance for Syncfusion ASP.NET Core controls.
NOTE
Checkout the Adding Script Reference topic to learn different approaches for adding script references in your ASP.NET Core application.
Register Syncfusion Script Manager
Also, register the script manager <ejs-script> at the end of <body> in the ASP.NET Core application as follows.
<body>
...
<!-- Syncfusion ASP.NET Core Script Manager -->
<ejs-scripts></ejs-scripts>
</body>Add ASP.NET Core Diagram control
Now, add the Syncfusion ASP.NET Core Diagram tag helper in ~/Pages/Index.cshtml page. Create and add a node (JSON data) with specific position, size, label, and shape.
<ejs-diagram id="container" width="100%" height="700px" >
<e-diagram-nodes>
<e-diagram-node id='node1' offsetX="100" offsetY="100" width="100" height="100" borderWidth="2"><e-node-style fill="darkcyan">
</e-node-style>
</e-diagram-node>
</e-diagram-nodes>
</ejs-diagram>Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to run the app. Then, the Syncfusion ASP.NET Core Diagram control will be rendered in the default web browser.
Connect two Nodes with a Connector
Add two nodes 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.
<ejs-diagram id="container" width="100%" height="700px">
<e-diagram-nodes>
<e-diagram-node id='node1' offsetX="100" offsetY="100" width="100" height="100" borderWidth="2">
<e-node-style fill="darkcyan">
</e-node-style>
</e-diagram-node>
<e-diagram-node id='node2' offsetX="300" offsetY="100" width="100" height="100" borderWidth="2">
<e-node-style fill="darkcyan">
</e-node-style>
</e-diagram-node>
</e-diagram-nodes>
<e-diagram-connectors>
<e-diagram-connector id="connector1" sourceID="node1" targetID="node2">
</e-diagram-connector>
</e-diagram-connectors>
</ejs-diagram>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();
}
}
}
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, set such properties as follows.
<ejs-diagram id="container" width="100%" height="700px" getNodeDefaults="@ViewBag.getNodeDefaults" getConnectorDefaults="@ViewBag.getConnectorDefaults">
<e-diagram-nodes>
<e-diagram-node id='node1' offsetY="100">
</e-diagram-node>
<e-diagram-node id='node2' offsetY="300">
</e-diagram-node>
</e-diagram-nodes>
<e-diagram-connectors>
<e-diagram-connector id="connector1" sourceID="node1" targetID="node2">
</e-diagram-connector>
</e-diagram-connectors>
</ejs-diagram>
function getNodeDefaults(node, diagram) {
var obj = {};
obj.height = 50;
obj.width = 50;
node.offsetX = 300;
return obj;
}
function getConnectorDefaults(connector, diagram) {
return connector.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.
<ejs-diagram id="container" width="100%" height="700px" getNodeDefaults="@ViewBag.getNodeDefaults" nodes="ViewBag.nodes" connectors="ViewBag.connectors">
</ejs-diagram>
function getNodeDefaults(obj, diagram) {
obj.width = 100;
obj.height = 60;
obj.offsetX = 300;
obj.style = { fill: '#357BD2', strokeColor: 'white' };
return obj;
}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 shows 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 indicates how to define the default appearance of nodes and connectors. The setNodeTemplate is used to update each node based on employee data.
<ejs-diagram id="diagram" width="100%" height="550px" setNodeTemplate="@ViewBag.setNodeTemplate" 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;
}
function setNodeTemplate(obj, diagram) {
var content = new ej.diagrams.StackPanel();
content.id = obj.id + '_outerstack';
content.orientation = 'Horizontal';
content.style.strokeColor = 'gray';
content.padding = { left: 5, right: 10, top: 5, bottom: 5 };
var image = new ej.diagrams.ImageElement();
image.width = 50;
image.height = 50;
image.style.strokeColor = 'none';
image.source = obj.data.Image;
image.id = obj.id + '_pic';
var innerStack = new ej.diagrams.StackPanel();
innerStack.style.strokeColor = 'none';
innerStack.margin = { left: 5, right: 0, top: 0, bottom: 0 };
innerStack.id = obj.id + '_innerstack';
var text = new ej.diagrams.TextElement();
text.content = obj.data.Name;
text.style.color = 'black';
text.style.bold = true;
text.style.strokeColor = 'none';
text.horizontalAlignment = 'Left';
text.style.fill = 'none';
text.id = obj.id + '_text1';
var desigText = new ej.diagrams.TextElement();
desigText.margin = { left: 0, right: 0, top: 5, bottom: 0 };
desigText.content = obj.data.Designation;
desigText.style.color = 'black';
desigText.style.strokeColor = 'none';
desigText.style.fontSize = 12;
desigText.style.fill = 'none';
desigText.horizontalAlignment = 'Left';
desigText.style.textWrapping = 'Wrap';
desigText.id = obj.id + '_desig';
innerStack.children = [text, desigText];
content.children = [image, innerStack];
return content;
}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;
}
}NOTE