Node in Diagram Control

4 Dec 202424 minutes to read

Nodes are graphical objects used to visually represent the geometrical information, process flow, internal business procedure, entity, or any other kind of data.

Create node

A node can be created and added to the diagram, either programmatically or interactively. Nodes are stacked on the diagram area from bottom to top in the order they are added.

Add node through nodes collection

To create a node, define the node object and add that to nodes collection of the diagram model.

CSHTML

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

Node.cs

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,
                    BorderWidth=2,
                    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;
    }
}

Add/Remove node at runtime

• Nodes can be added at runtime by using public method, add and can be removed at runtime by using public method, remove. On adding node at runtime, the nodes collection is changed and the collectionChange event will trigger.

• The node’s ID property is used to define the name of the node and its further used to find the node at runtime and do any customization.

CSHTML

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

Run.cs

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,
                    BorderWidth=2,
                    Style = new NodeStyleNodes() {
                    Fill = "Darkcyan",
                    StrokeWidth = 2,
                    StrokeColor = "Black"
                    },
                    text = "node1",
                    OffsetX = 100,
                    OffsetY = 100,
                    Annotations = Node1
            });
            ViewBag.nodes = nodes;


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

var node = {
    id: 'node1', offsetX = 100, offsetY = 100, height = 50, width = 100
};
diagram.add(node);

Add collection of nodes at runtime

• The collection of nodes can be dynamically added using addElements method.Each time an element is added to the diagram canvas, the collectionChange event will be triggered.

CSHTML

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

Nodescollection.cs

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: 'node16', offsetX: 35, offsetY: 260 },
             { id: 'node17', offsetX: 140, offsetY: 260 },
             { id: 'node18', offsetX: 240, offsetY: 260 }
             ]);
             ViewBag.nodes = nodes;


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

Add node from palette

Nodes can be predefined and added to the palette, and can be dropped into the diagram when needed. For more information about adding nodes from symbol palette, refer to Symbol Palette.

• Once you drag a node/connector from the palette to the diagram, the following events can be used to do your customization.
• When a symbol is dragged into diagram from symbol palette, the dragEnter event gets triggered.
• When a symbol is dragged over diagram, the dragOver event gets triggered.
• When a symbol is dragged and dropped from symbol palette to diagram area, the drop event gets triggered.
• When a symbol is dragged outside of the diagram, the dragLeave event gets triggered.

Create node through data source

Nodes can be generated automatically with the information provided through data source. The default properties for these nodes are fetched from default settings. For more information about data source, refer to Data Binding.

Draw nodes

Nodes can be interactively drawn by clicking and dragging the diagram surface by using NodeDrawingTool. For more information about drawing nodes, refer to Draw Nodes.

Position

• Position of a node is controlled by using its offsetX and offsetY properties. By default, these offset properties represent the distance between the origin of the diagram’s page and node’s center point.

• You may expect this offset values to represent the distance between page origin and node’s top-left corner instead of center. The Pivot property helps to solve this problem. Default value of node’s pivot point is (0.5, 0.5), that means center of the node.

• The size of the node can be controlled by using its width and height properties.

• Rotation of a node is controlled by using its rotateAngle property.

Pivot	Offset
(0.5,0.5)	offsetX and offsetY values are considered as the node’s center point.
(0,0)	offsetX and offsetY values are considered as the top-left corner of the node.
(1,1)	offsetX and offsetY values are considered as the bottom-right corner of the node.

CSHTML

<ejs-diagram id="container" width="100%" height="700px">
<e-diagram-nodes>
                <e-diagram-node id="bjb">
                    <e-node-pivot x="1" y="1"></e-node-pivot>
                </e-diagram-node>
            </e-diagram-nodes>
</ejs-diagram>

Position.cs

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,
                    Pivot = new DiagramPoint() { X = 1, Y = 1 }
            });
            ViewBag.nodes = nodes;


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

Flip

The diagram provides support to flip the node. flip is performed to give the mirrored image of the original element.

The flip types are as follows:

• HorizontalFlip - Horizontal is used to change the element in horizontal direction.

• VerticalFlip - Vertical is used to change the element in vertical direction.

• Both - Both which involves both vertical and horizontal changes of the element.

CSHTML

<ejs-diagram id="container" width="100%" height="700px">
<e-diagram-nodes>
                <e-diagram-node id="bjb">
                    <e-node-pivot x="1" y="1"></e-node-pivot>
                </e-diagram-node>
            </e-diagram-nodes>
</ejs-diagram>

Flip.cs

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",
                    flip = FilpDirection.Horizontal,
                    Shape = new { type = "Basic", shape = "RightTriangle"},
                    OffsetX = 100,
                    OffsetY = 100,
                    Annotations = Node1,                   
            });
            ViewBag.nodes = nodes;


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

NOTE

The flip is also applicable for group and BPMN shapes.

Appearance

• The appearance of a node can be customized by changing its fill color, borderColor, borderWidth, strokeDashArray, opacity, and shadow.

• The visible property of the node enables or disables the visibility of the node.

CSHTML

<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", strokeColor="black" strokeWidth="2"></e-node-style>
        </e-diagram-node>
    </e-diagram-nodes>
</ejs-diagram>

Appear.cs

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,
                    BorderWidth = 2,
                    Style = new NodeStyleNodes() {

                        Fill = "Darkcyan",
                            StrokeWidth = 2,
                            StrokeColor = "Black"
                    },
                    text = "node1",
                    OffsetX = 100,
                    OffsetY = 100, 
                    Annotations = Node1
            });
            ViewBag.nodes = nodes;


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

Customize the style of main node on multi-selection.

The style of the main node can be customized by using the className e-diagram-first-selection-indicator.

Use the following CSS to customize the style of main node on multiple selection.

 .e-diagram-first-selection-indicator{
   stroke-width: 5px;
   stroke: red;
   stroke-dasharray: 1,1;
  }

Gradient

The gradient property of the node allows to define and apply the gradient effect to that node.

The gradient stop property defines the color and a position, where the previous color transition ends and a new color transition starts.

The gradient stop’s opacity property defines the transparency level of the region.

There are two types of gradients as follows:

• Linear gradient

• Radial gradient

Linear gradient

• LinearGradient defines a smooth transition between a set of colors (so-called stops) on a line.

• A linear gradient’s x1, y1, x2, y2 properties are used to define the position (relative to the node) of the rectangular region that needs to be painted.

CSHTML

<ejs-diagram id="container" width="100%" height="700px" nodes="@ViewBag.nodes">
</ejs-diagram>

LinearGrad.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Syncfusion.EJ2.Diagrams;
using System.ComponentModel;
using Syncfusion.EJ2;
using Newtonsoft.Json;

namespace sample1.Controllers
{
    public class NodeController: Controller
    {
        // GET: Node
        public ActionResult Node()
        {
            // Sets the Annotation for the Node
            List<DiagramNode> Nodes = new List<DiagramNode>();
          
            List<DiagramNodeAnnotation> Node1 = new List<DiagramNodeAnnotation>();
            Node1.Add(new DiagramNodeAnnotation()
            {
                //Sets the offset for the content
                Content = "Node1",
                 Style = new DiagramTextStyle()
                {
                    Color = "black",
                    Fill = "transparent"
                },
            });
            List<stop> Stop = new List<stop>();
            Stop.Add(new stop() { Color = "white", Offset = 0 });
            Stop.Add(new stop() { Color = "#6BA5D7", Offset = 100 });
            linearGradient grade = new linearGradient()
            {
                x1 = 0,
                y1 = 0,
                x2 = 50,
                y2 = 50,
                type = GradientType.Linear,
                Stops = Stop
            };
            Nodes.Add(new DefaultNode()
            {
                Id = "Node1",
                OffsetY = 100,
                OffsetX = 100,
                Height = 100,
                Width = 100,
                Style = new NodeStyleNodes() { Gradient= grade },
                // add the Annotation for the Node
                Annotations = Node1,
            });
                     
            ViewBag.nodes = Nodes;         

            return View();
        }
    }
    public class linearGradient
    {
        [DefaultValue(null)]
        [HtmlAttributeName("x1")]
        [JsonProperty("x1")]
        public double x1
        {
            get;
            set;
        }
        [DefaultValue(null)]
        [HtmlAttributeName("x2")]
        [JsonProperty("x2")]
        public double x2
        {
            get;
            set;
        }
        [DefaultValue(null)]
        [HtmlAttributeName("y1")]
        [JsonProperty("y1")]
        public double y1
        {
            get;
            set;
        }
        [DefaultValue(null)]
        [HtmlAttributeName("y2")]
        [JsonProperty("y2")]
        public double y2
        {
            get;
            set;
        }
        [DefaultValue(null)]
        [HtmlAttributeName("type")]
        [JsonProperty("type")]
        public GradientType type
        {
            get;
            set;
        }
        [DefaultValue(null)]
        [HtmlAttributeName("stops")]
        [JsonProperty("stops")]
        public List<stop> Stops
        {
            get;
            set;
        }
    }

    public class stop
    {
        [DefaultValue(null)]
        [HtmlAttributeName("color")]
        [JsonProperty("color")]
        public string Color
        {
            get;
            set;
        }
        [DefaultValue(null)]
        [HtmlAttributeName("offset")]
        [JsonProperty("offset")]
        public double Offset
        {
            get;
            set;
        }
    }
    }

Radial gradient

• RadialGradient defines a smooth transition between stops on a circle.

• A radial gradient’s cx, cy, fx, fy properties are used to define the position (relative to the node) of the outermost or the innermost circle of the radial gradient.

CSHTML

<ejs-diagram id="container" width="100%" height="700px" nodes="@ViewBag.nodes">
</ejs-diagram>

RadialGrad.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Syncfusion.EJ2.Diagrams;
using System.ComponentModel;
using Syncfusion.EJ2;
using Newtonsoft.Json;

namespace sample1.Controllers
{
    public class NodeController: Controller
    {
        // GET: Node
        public ActionResult Node()
        {
            // Sets the Annotation for the Node
            List<DiagramNode> Nodes = new List<DiagramNode>();
          
            List<DiagramNodeAnnotation> Node1 = new List<DiagramNodeAnnotation>();
            Node1.Add(new DiagramNodeAnnotation()
            {
                //Sets the offset for the content
                Content = "Node1",
                 Style = new DiagramTextStyle()
                {
                    Color = "black",
                    Fill = "transparent"
                },
            });
            List<stop> Stop = new List<stop>();
            Stop.Add(new stop() { Color = "white", Offset = 0 });
            Stop.Add(new stop() { Color = "#6BA5D7", Offset = 100 });
            radialGradient grade = new radialGradient()
            {
                cx = 50,
                cy = 50,
                fx = 25,
                fy = 25,
                r=50,
                type = GradientType.Radial,
                Stops = Stop
            };
            Nodes.Add(new DefaultNode()
            {
                Id = "Node1",
                OffsetY = 100,
                OffsetX = 100,
                Height = 100,
                Width = 100,
                Style = new NodeStyleNodes() { Gradient= grade },
                // add the Annotation for the Node
                Annotations = Node1,
            });
                     
            ViewBag.nodes = Nodes;         

            return View();
        }
    }
    public class radialGradient
    {
        [DefaultValue(null)]
        [HtmlAttributeName("cx")]
        [JsonProperty("cx")]
        public double cx
        {
            get;
            set;
        }
        [DefaultValue(null)]
        [HtmlAttributeName("fx")]
        [JsonProperty("fx")]
        public double fx
        {
            get;
            set;
        }
        [DefaultValue(null)]
        [HtmlAttributeName("fy")]
        [JsonProperty("fy")]
        public double fy
        {
            get;
            set;
        }
        [DefaultValue(null)]
        [HtmlAttributeName("cy")]
        [JsonProperty("cy")]
        public double cy
        {
            get;
            set;
        }
        [DefaultValue(null)]
        [HtmlAttributeName("type")]
        [JsonProperty("type")]
        public GradientType type
        {
            get;
            set;
        }
        [DefaultValue(null)]
        [HtmlAttributeName("r")]
        [JsonProperty("r")]
        public double r
        {
            get;
            set;
        }
        [DefaultValue(null)]
        [HtmlAttributeName("stops")]
        [JsonProperty("stops")]
        public List<stop> Stops
        {
            get;
            set;
        }
    }

    public class stop
    {
        [DefaultValue(null)]
        [HtmlAttributeName("color")]
        [JsonProperty("color")]
        public string Color
        {
            get;
            set;
        }
        [DefaultValue(null)]
        [HtmlAttributeName("offset")]
        [JsonProperty("offset")]
        public double Offset
        {
            get;
            set;
        }
    }
    }

Shadow

Diagram provides support to add shadow effect to a node that is disabled, by default. It can be enabled with the constraints property of the node.

CSHTML

<ejs-diagram id="container" width="100%" height="700px">
    <e-diagram-nodes>
        <e-diagram-node id='node1' offsetX="100" offsetY="100" width="100" height="100" constraints="Shadow">
        </e-diagram-node>
    </e-diagram-nodes>
</ejs-diagram>

Shadow.cs

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 = "#6BA5D7",
                        strokeColor = "White"
                    },
                    text = "node1",
                    OffsetX = 100,
                    OffsetY = 100,
                    Annotations = Node1,
                    Constraints=NodeConstraints.Default | NodeConstraints.Shadow
            });
            ViewBag.nodes = nodes;


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

Customizing shadow

The angle, distance, and opacity of the shadow can be customized with the shadow property of the node.

CSHTML

<ejs-diagram id="container" width="100%" height="700px">
    <e-diagram-nodes>
        <e-diagram-node id='node1' offsetX="100" offsetY="100" width="100" height="100" constraints="Shadow">
           <e-node-shadow angle="50" opacity="0.9"></e-node-shadow>
        </e-diagram-node>
    </e-diagram-nodes>
</ejs-diagram>

Shadow2.cs

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 = "#6BA5D7",
                        strokeColor = "White"
                    },
                    text = "node1",
                    OffsetX = 100,
                    OffsetY = 100,
                    Annotations = Node1,
                    Constraints=NodeConstraints.Default | NodeConstraints.Shadow,
                    Shadow= new DiagramShadow() { Angle=50, Opacity=0.9}
            });
            ViewBag.nodes = nodes;


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

Icon

Diagram provides support to describe the state of the node. i.e., the node is expanded or collapsed state.

NOTE

Icon can be created only when the node has outEdges.

• To explore the properties of expand and collapse icon, refer to expandIcon and collapseIcon.

• The expandIcon’s and collapseIcon’s shape properties allows to define the shape of the icon.

CSHTML

<ejs-diagram id="container" width="100%" height="700px">
    <e-diagram-nodes>
        <e-diagram-node id='node1' offsetX="100" offsetY="100" width="100" height="100">
           <e-node-expandicon shape="ArrowUp" height="10" width="10"></e-node-expandicon>
<e-node-collapseicon shape="ArrowUp" height="10" width="10"></e-node-collapseicon>
        </e-diagram-node>
  <e-diagram-node id='node2' offsetX="100" offsetY="300" width="100" height="100">
        </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>

Icon.cs

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"
                }
            });
            List<DiagramNodeAnnotation> Node2 = new List<DiagramNodeAnnotation>();
            Node2.Add(new DiagramNodeAnnotation() { Content = "Node2" });
            nodes.Add(new Node() {
                Id = "node1",
                    Width = 100,
                    Height = 100,
                    Style = new NodeStyleNodes() {
                         fill = "#6BA5D7",
                        strokeColor = "White"
                    },
                    text = "node1",
                    OffsetX = 100,
                    OffsetY = 100,
                    Annotations = Node1,
                    ExpandIcon=new DiagramIconShape() { Shape=IconShapes.ArrowDown, Height=10, Width= 10},
CollapseIcon=new DiagramIconShape() { Shape=IconShapes.ArrowUp, Height=10, Width= 10}
            });
 nodes.Add(new Node() { Id = "node2", OffsetX = 100, OffsetY = 300, Annotations = Node2 });
            ViewBag.nodes = nodes;
 List<DiagramConnector> Connectors = new List<DiagramConnector>();
            Connectors.Add(new DiagramConnector() { Id = "connector1", SourceID = "node1", TargetID = "node2" });

 ViewBag.Connectors = Connectors;

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

Customizing expand icon

• Set the borderColor, borderWidth, and background color for an expandIcon using borderColor, borderWidth, and fill properties.

• Set a size for an expandIcon by using width and height properties.

• The expand icon can be aligned relative to the node boundaries. It has margin, offset, horizontalAlignment, and verticalAlignment settings. It is quite tricky, when all four alignments are used together but gives you more control over alignment.

• The iconColor property can be used to set the strokeColor of the Icon.

Customizing collapse icon

• Set the borderColor, borderWidth, background color for an collapseIcon using borderColor, borderWidth, and fill properties.

• Set a size for collapseIcon by using width and height properties.

• Like expand icon, collapse icon also can be aligned relative to the node boundaries. It has margin, offset, horizontalAlignment, and verticalAlignment settings. It is quite tricky, when all four alignments are used together but gives you more control over alignment.

• The iconColor property can be used to set the strokeColor of the Icon.

Interaction

Diagram provides support to drag, resize, or rotate the node interactively. For more information about editing a node at runtime, refer to Edit Nodes.

Constraints

The constraints property of the node allows to enable or disable certain features. For more information about node constraints, refer to Node Constraints.

Custom properties

The addInfo property of the node allows to maintain additional information to the node.

Stack order

The nodes z-order property specifies the stack order of the node. A node with greater stack order is always in front of a node with a lower stack order.

Data flow

Node has the InEdges and OutEdges read-only property. In this property, you can find what are all the connectors that are connected to the node, and then you can find these connectors by using the getObject method in the diagram.

CSHTML

<ejs-diagram id="container" width="100%" height="700px"  nodes="ViewBag.nodes" connectors="ViewBag.Connectors">
   
</ejs-diagram>

Dataflow.cs

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"
                }
            });
            List < DiagramNodeAnnotation > Node2 = new List < DiagramNodeAnnotation > ();
            Node2.Add(new DiagramNodeAnnotation() {
                Content = "Node2"
            });
            List < DiagramNodeAnnotation > Node3 = new List < DiagramNodeAnnotation > ();
            Node3.Add(new DiagramNodeAnnotation() {
                Content = "Node3"
            });
            List < DiagramNodeAnnotation > Node4 = new List < DiagramNodeAnnotation > ();
            Node4.Add(new DiagramNodeAnnotation() {
                Content = "Node4"
            });
            nodes.Add(new Node() {
                Id = "node1",
                    Width = 100,
                    Height = 100,
                    Style = new NodeStyleNodes() {
                        fill = "#6BA5D7",
                            strokeColor = "White"
                    },
                    text = "node1",
                    OffsetX = 100,
                    OffsetY = 100,
                    Annotations = Node1,
            });
            nodes.Add(new Node() {
                Id = "node2", OffsetX = 100, OffsetY = 300, Annotations = Node2
            });
            nodes.Add(new Node() {
                Id = "node3", OffsetX = 100, OffsetY = 300, Annotations = Node3
            });
            nodes.Add(new Node() {
                Id = "node4", OffsetX = 100, OffsetY = 300, Annotations = Node4
            });
            ViewBag.nodes = nodes;
            List < DiagramConnector > Connectors = new List < DiagramConnector > ();
            Connectors.Add(new DiagramConnector() {
                Id = "connector1", SourceID = "node1", TargetID = "node2"
            });
            Connectors.Add(new DiagramConnector() {
                Id = "connector2", SourceID = "node1", TargetID = "node3"
            });
            Connectors.Add(new DiagramConnector() {
                Id = "connector3", SourceID = "node1", TargetID = "node4"
            });

            ViewBag.Connectors = Connectors;

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

See Also

• How to add annotations to the node
• How to add ports to the node
• How to enable/disable the behavior of the node
• How to add nodes to the symbol palette
• How to edit the node visual interface
• How to create diagram nodes using drawing tools