Data Visualization ▸ Node and Edge Arrays

This demo shows the Diagram component's capability to load an external tree or a graph structure from two data sources: an array of shapes and an array of shape connectors. The connector is specified by the shape's ID attributes. The Diagram transforms information from the data sources into a tree layout view.

@model DevExtreme.MVC.Demos.Models.SampleData.FlowData

@(Html.DevExtreme().Diagram()
    .ID("diagram")
    .Nodes(ns => ns
        .DataSource(d => d
            .Array()
            .Key("ID")
            .Data(Model.Nodes)
        )
        .KeyExpr("ID")
        .TextExpr("Text")
        .TypeExpr("Type")
        .AutoLayout(al => al
            .Type(DiagramDataLayoutType.Layered)
        )
    )
    .Edges(ns => ns
        .DataSource(d => d
            .Array()
            .Key("ID")
            .Data(Model.Edges)
        )
        .KeyExpr("ID")
        .FromExpr("FromID")
        .ToExpr("ToID")
        .TextExpr("Text")
    )
    .Toolbox(t => t
        .Groups(g => g
            .Add().Category(DiagramShapeCategory.General).Title("General")
        )
    )
)

using System.Web.Mvc;
using DevExtreme.MVC.Demos.Models.SampleData;

namespace DevExtreme.MVC.Demos.Controllers {
    public class DiagramController : Controller {

        public ActionResult NodesAndEdgesArrays() {
            return View(new FlowData { Nodes = SampleData.FlowNodes, Edges = SampleData.FlowEdges });
        }

    }
}

using System.Collections;
using System.Collections.Generic;

namespace DevExtreme.MVC.Demos.Models.SampleData {
    public class FlowData {
        public IEnumerable Nodes { get; set; }
        public IEnumerable Edges { get; set; }
    }
    public partial class SampleData {
        public static readonly IEnumerable<FlowNode> FlowNodes = new[] {
            new FlowNode() {
                ID = 107,
                Text = "A new ticket",
                Type = "terminator"
            },
            new FlowNode() {
                ID = 108,
                Text = "Analyze the issue",
                Type = "process"
            },
            new FlowNode() {
                ID = 118,
                Text = "Do we have all information to work with?",
                Type = "diamond"
            },
            new FlowNode() {
                ID = 120,
                Text = "Answered",
                Type = "terminator"
            },
            new FlowNode() {
                ID = 121,
                Text = "Request additional information or clarify the scenario",
                Type = "rectangle"
            },
            new FlowNode() {
                ID = 125,
                Text = "Prepare an example in Code Central",
                Type = "rectangle"
            },
            new FlowNode() {
                ID = 127,
                Text = "Update the documentation",
                Type = "rectangle"
            },
            new FlowNode() {
                ID = 131,
                Text = "Process the ticket",
                Type = "rectangle"
            },
            new FlowNode() {
                ID = 133,
                Text = "Work with the R&D team",
                Type = "rectangle"
            }
        };
        public static readonly IEnumerable<FlowEdge> FlowEdges = new[] {
            new FlowEdge() {
              FromID = 107,
              ID = 116,
              ToID = 108
            },
            new FlowEdge() {
              FromID = 108,
              ID = 117,
              ToID = 118
            },
            new FlowEdge() {
              FromID = 118,
              ID = 122,
              Text = "No",
              ToID = 121
            },
            new FlowEdge() {
              FromID = 121,
              ID = 123,
              ToID = 108
            },
            new FlowEdge() {
              FromID = 131,
              ID = 124,
              ToID = 120
            },
            new FlowEdge() {
              FromID = 120,
              ID = 126,
              Text = "",
              ToID = 125
            },
            new FlowEdge() {
              FromID = 120,
              ID = 130,
              Text = "",
              ToID = 127
            },
            new FlowEdge() {
              FromID = 118,
              ID = 132,
              Text = "Yes",
              ToID = 131
            },
            new FlowEdge() {
              FromID = 131,
              ID = 134,
              Text = "Need developer assistance?",
              ToID = 133
            },
            new FlowEdge() {
              FromID = 133,
              ID = 135,
              ToID = 120
            }
        };
    }
}

#diagram {
    height: 725px;
}