Create a network topology using the # NeXt UI JavaScript library #

NeXt is an ODL Web interface for visualizing the network and communication within the network. It is an open graphical tool that displays physical or virtual network elements such as traffic, tunnel paths, and groups and their properties. In addition, it can build a hierarchical topology, such as displaying overlay networks at the bottom. It can build ODL applications with Dlux.

NeXt has been greatly contributed by Cisco, and you can find many enhancements of NeXt in Cisco DevNet.

I have a little free time and want to use it Cisco's NeXt UI Toolkit , this is a JavaScript library that provides the ability to generate networks   The function of topology diagram.

Once we download and unzip the library from Cisco's website, we will have four folders: css, doc, fonts, and js. From here we can start building the chart.

Alternatively, you can install the toolkit through NPM; npm install next-ui.

HTML template

All we need is a simple HTML page, which loads JS and CSS library files, provides a div page for chart placement, and then loads our topology data (it is just a JS object) and generates a network diagram using the app.js script and topology data of the library.


<!DOCTYPE html>
    <link rel="stylesheet" href=css/next.css>
    <script src="js/next.js"></script>
    <div id="topology-container"></div>
    <script src="topology.js"></script>
    <script src="app.js"></script>

Topology data

We need to provide two arrays, one for list nodes (our network devices) and the other for links between nodes.

Node array

Each device in the node array is an object with some common properties. Each node is identified by the unique attribute id used to create the link.

Then, we need to provide x and y as the coordinates in which the device will sit in the figure. Next is the name device.

The device_ The type attribute is a custom attribute, that is, it is not in the NeXt UI API, but it is used to define the icon that the node should have in app.js. Can be in Cisco official demo page A list of icons was found on the.

Finally, we can choose to provide an attribute to define the color of the nodes in the graph.

Linked array

The link array also consists of objects, each of which is a link between two devices. These linked objects only need source, target and optional color attributes.


const topologyData = {
    nodes: [
        // ISPs
        {id: 0, x: 400, y: -100, name: "ISP1", device_type: "cloud", color: "grey"},
        {id: 1, x: 600, y: -100, name: "ISP2", device_type: "cloud", color: "grey"},

        // Routers
        {id: 2, x: 400, y: 0, name: "Edge1", device_type: "router", color: "red"},
        {id: 3, x: 600, y: 0, name: "Edge2", device_type: "router", color: "red"},

        // Switches
        {id: 4, x: 400, y: 100, name: "Switch1", device_type: "switch"},
        {id: 5, x: 600, y: 100, name: "Switch2", device_type: "switch"},

        // Servers
        {id: 6, x: 200, y: 200, name: "ESX1", device_type: "server"},
        {id: 7, x: 400, y: 200, name: "ESX2", device_type: "server"},
        {id: 8, x: 600, y: 200, name: "ESX3", device_type: "server"},
        {id: 9, x: 800, y: 200, name: "ESX4", device_type: "server"},

        // SAN
        {id: 10, x: 500, y: 300, name: "SAN", device_type: "server"}
    links: [
        // WAN to routers
        {source: 0, target: 2, color: "green"},
        {source: 1, target: 3},

        // Routers to switches
        {source: 2, target: 4, color: "green"},
        {source: 2, target: 5},
        {source: 3, target: 4},
        {source: 3, target: 5},

        // Switches to Switches
        {source: 4, target: 5},
        {source: 4, target: 5},

        // Servers to Switches
        {source: 6, target: 4, color: "green"},
        {source: 6, target: 5, color: "red"},
        {source: 7, target: 4, color: "green"},
        {source: 7, target: 5, color: "red"},
        {source: 8, target: 4, color: "green"},
        {source: 8, target: 5, color: "red"},
        {source: 9, target: 4, color: "green"},
        {source: 9, target: 5, color: "red"},

        // SAN to Switches
        {source: 10, target: 4, color: "red"},
        {source: 10, target: 4, color: "red"},
        {source: 10, target: 5, color: "red"},
        {source: 10, target: 5, color: "red"}

JS application

Finally, we need to write some JavaScript to integrate them. Most of the following code is taken from Cisco tutorial files with some modifications.


(function (nx) {

    // instantiate next app
    const app = new nx.ui.Application();

    // configuration object
    const topologyConfig = {
        // configuration for nodes
        width: window.innerWidth,
        height: window.innerHeight,
        nodeConfig: {
            label: "",
            iconType: "model.device_type",
            color: "model.color",
        // configuration for links
        linkConfig: {
            linkType: "straight",
            color: "model.color"
        // if true, the nodes' icons are shown, a dot is shown instead
        showIcon: true,

    // instantiate Topology class
    const topology = new nx.graphic.Topology(topologyConfig);

    // load topology data from app/data.js;

    // bind the topology object to the app

    // app must run inside a specific container. In our case this is the one with id="topology-container"



The above three files give us the following network diagram.



Can be in here API documentation found.

Tags: Javascript Front-end UI

Posted on Sat, 06 Nov 2021 12:30:54 -0400 by bhi0308