Vis Network | Basic usage

HTML

<script src="https://visjs.github.io/vis-network/standalone/umd/vis-network.min.js"></script>
<button id="extraEdges">Add/remove Extra Edges</button>
<div id="mynetwork"></div>

CSS

#mynetwork {
  width: 600px;
  height: 400px;
  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 },
  { from: 3, to: 3 }
]);

var extraEdges = [
  { from: 4, to: 5, color: 'red', physics: false, arrows: 'to', dashes: true },
  { from: 3, to: 5, color: 'red', physics: false, arrows: 'to', dashes: true },
  { from: 1, to: 5, color: 'red', physics: false, arrows: 'to', dashes: true }
];

// create a network
var container = document.getElementById("mynetwork");
var data = {
  nodes: nodes,
  edges: edges,
};
var options = {};
var network = new vis.Network(container, data, options);

var extraEdgesShown = false; 
document.getElementById('extraEdges').onclick = function() {
  if(!extraEdgesShown){
    // Add extra edges
    edges.add(extraEdges);
    extraEdgesShown = true;
  } else {
    // Remove extra edges
    edges.remove(extraEdges);
    extraEdgesShown = false;
  }
}