vis.js Network (Graph)

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.9.0/vis.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.9.0/vis.min.css">
<button id="addNode">Add Node</button>
<div id="mynetwork"></div>

CSS

#mynetwork {
    width: 500px;
    height: 350px;
    border: 1px solid lightgray;
}

JavaScript

// create an array with nodes
var nodes = new vis.DataSet([{
    id: 1,
    label: 'Node 1'
}, {
    id: 2,
    label: 'Node 2'
}, {
    id: 3,
    label: 'Node 3'
}, {
    id: 4,
    label: 'Node 4'
}, {
    id: 5,
    label: 'Node 5'
}]);

// create an array with edges
var edges = new vis.DataSet([{
    from: 1,
    to: 3
}, {
    from: 1,
    to: 2
}, {
    from: 2,
    to: 4
}, {
    from: 2,
    to: 5
}]);

// create a network
var container = document.getElementById('mynetwork');

// provide the data in the vis format
var data = {
    nodes: nodes,
    edges: edges
};

var options = {
    layout: {
        randomSeed: undefined,
        improvedLayout: true,
        hierarchical: {
            enabled: true,
            levelSeparation: 1,
            direction: 'UD', // UD, DU, LR, RL
            sortMethod: 'directed' // hubsize, directed
        }
    }
}

// initialize your network!
var network = new vis.Network(container, data, options);
var nodeNo = 6;

$('#addNode').click(function () {
    nodes.add({
        id: nodeNo,
        label: "Node " + nodeNo
    });
    edges.add({
        id: nodeNo,
        from: 1,
        to: nodeNo
    });
    nodeNo++;
});

//edges.remove({id: document.getElementById('edge-id').value});
//edges.update({
//    id: document.getElementById('edge-id').value,
//    from: document.getElementById('edge-from').value,
//    to: document.getElementById('edge-to').value
//});
//nodes.remove({id: document.getElementById('node-id').value});
//nodes.update({
//    id: document.getElementById('node-id').value,
//    label: document.getElementById('node-label').value
//});