Network

vis.Network(…)

const container = {...};
const data = {...};
const options = {...};

const network = new vis.Network(container, data, options);

container

This can be <div> or a semantic element such as <figure>

I tried changing to <canvas> and the diagram vanished.

HTML

<div id="mynetwork"></div>

JavaScript

const container = document.getElementById('mynetwork');

data

Network Data Format

const data = {
  nodes: nodes,
  edges: edges
};

nodes

const 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'}
]);

edges

const edges = new vis.DataSet([
  {from: 1, to: 3},
  {from: 1, to: 2},
  {from: 2, to: 4},
  {from: 2, to: 5},
  {from: 3, to: 3}
]);

Alternatively, a string in the dot language.

const data = {
  dot: 'digraph g {\
a -> b;\
a -> c;\
a -> d;\
b -> e;\
b -> f;\
c -> g;\
c -> h;\
c -> i;\
d -> j;\
e -> k;\
f -> l;\
f -> m;\
h -> n;\
i -> o;\
i -> p;\
j -> q;\
j -> r;\
j -> s;\
m -> t;\
n -> t;\
}'
};

DataSet documentation

options

Configuration options

const options = {
  width:  '100%',
  height: '400px',
  edges: {
    color: 'red',
    width: 2
  }
};