network.html

<script
  type="text/javascript"
  src="https://unpkg.com/vis-network/standalone/umd/vis-network.min.js"
></script>
<link
  href="https://fonts.googleapis.com/css2?family=Material+Icons"
  rel="stylesheet"
/>
<div id="mynetwork"></div>
<style>
  html {
    background-color: #121222;
  }
  #mynetwork {
    /*width: 200vw;*/
    height: 100vh;
    border-color: deeppink;
    border-style: dashed;
    border-width: 1px;
  }
</style>
<script type="text/javascript">
  var WAN = { id: 0, level: 1 };
  var UNTRUST = { id: 1, level: 4 };
  var COREROUTER = { id: 2, level: 4 };
  var LINODE = { id: 3, level: 2 };

  var UPLINK1 = { id: 11, level: 3 };
  var UPLINK2 = { id: 12, level: 3 };
  var UPLINK3 = { id: 13, level: 3 };

  var DMZ = { id: 21, level: 5 };
  var STORAGE = { id: 22, level: 5 };
  var TENGBE = { id: 23, level: 4 };

  var VPN1 = { id: 31, level: 6 };
  var VPN2 = { id: 32, level: 0 };
  var CLIENT1 = { id: 33, level: 0 };

  var IO = { id: 40, level: 6 };
  var EUROPA = { id: 42, level: 6 };
  var CALLISTO = { id: 43, level: 6 };
  var GANYMEDE = { id: 44, level: 6 };
  var SAN = { id: 45, level: 6 };
  var DESKTOP = { id: 46, level: 6 };

  var nodes = [
    { ...WAN, label: "Internet", group: "cloud" },
    { ...VPN2, label: "Ext VPN User", group: "client" },
    { ...CLIENT1, label: "You are here", group: "extclient" },

    {
      ...LINODE,
      label: "linode\nEdge Router",
      group: "router",
      icon: {
        face: "Material Icons",
        code: "\ue0da",
        size: 50,
        color: "purple",
      },
    },

    {
      ...UNTRUST,
      label: "pfsense\nLoad Balancer",
      group: "router",
    },
    {
      ...UPLINK1,
      label: "Optus 1\nUplink",
      group: "vpn",
      icon: {
        face: "Material Icons",
        code: "\uefd3",
        size: 50,
        color: "purple",
      },
    },
    {
      ...UPLINK2,
      label: "Optus 2\nUplink",
      group: "vpn",
      icon: {
        face: "Material Icons",
        code: "\uefd3",
        size: 50,
        color: "purple",
      },
    },
    {
      ...UPLINK3,
      label: "NBN\nUplink",
      group: "vpn",
      icon: {
        face: "Material Icons",
        code: "\uebba",
        size: 50,
        color: "purple",
      },
    },

    {
      ...COREROUTER,
      label: "vyos\n Core Router",
      group: "router",
    },
    { ...TENGBE, label: "10G Switch", group: "switch" },

    { ...DMZ, label: "DMZ vSwitch", group: "switch" },
    { ...STORAGE, label: "Storage vSwitch", group: "switch" },

    { ...VPN1, label: "VPN User 1", group: "client" },
    { ...IO, label: "io\nShares", group: "server" },
    { ...EUROPA, label: "europa\nMedia Server", group: "server" },
    { ...CALLISTO, label: "callisto\nPostgreSQL", group: "server" },
    { ...GANYMEDE, label: "ganymede\nContainer Node", group: "server" },

    { ...SAN, label: "Backup SAN", group: "iscsi" },
    { ...DESKTOP, label: "Desktop 1", group: "client" },
  ];
  var edges = [
    {
      from: COREROUTER.id,
      to: UNTRUST.id,
      label: "192.168.0.1/32",
      dashes: true,
    },

    { from: COREROUTER.id, to: TENGBE.id, label: "10.0.0.0/20" },
    { from: LINODE.id, to: WAN.id },
    { from: WAN.id, to: VPN2.id, label: "10.0.8.3/32" },
    { from: WAN.id, to: CLIENT1.id, label: "127.0.0.1" },

    { from: LINODE.id, to: UPLINK1.id },
    { from: LINODE.id, to: UPLINK2.id },
    { from: LINODE.id, to: UPLINK3.id },

    { from: COREROUTER.id, to: UPLINK1.id },
    { from: COREROUTER.id, to: UPLINK2.id },
    { from: COREROUTER.id, to: UPLINK3.id },

    { from: UNTRUST.id, to: UPLINK1.id, dashes: true },
    { from: UNTRUST.id, to: UPLINK2.id, dashes: true },
    { from: UNTRUST.id, to: UPLINK3.id, dashes: true },

    { from: COREROUTER.id, to: DMZ.id, label: "10.0.16.0/20" },
    { from: COREROUTER.id, to: STORAGE.id, label: "10.0.32.0/20" },
    { from: COREROUTER.id, to: VPN1.id, label: "10.0.8.2/32" },

    { from: TENGBE.id, to: SAN.id, label: "10.0.0.2/32" },
    { from: TENGBE.id, to: DESKTOP.id, label: "10.0.0.10/32" },

    { from: DMZ.id, to: IO.id, label: "10.0.16.4/32" },
    { from: DMZ.id, to: EUROPA.id, label: "10.0.16.3/32" },
    { from: DMZ.id, to: CALLISTO.id, label: "10.0.16.6/32" },
    { from: DMZ.id, to: GANYMEDE.id, label: "10.0.16.7/32" },

    { from: STORAGE.id, to: IO.id, label: "10.0.32.2/32" },
    { from: STORAGE.id, to: EUROPA.id, label: "10.0.32.3/32" },
  ];

  // create a network
  var container = document.getElementById("mynetwork");
  var data = {
    nodes: nodes,
    edges: edges,
  };
  var options = {
    autoResize: true,
    interaction: {
      dragNodes: false,
      multiselect: true,
    },
    layout: {
      randomSeed: "deadbeef",
      hierarchical: {
        enabled: true,
        levelSeparation: 190,
        direction: "RL",
        sortMethod: "directed",
        shakeTowards: "roots",
      },
    },
    physics: {
      stabilization: true,
      barnesHut: {
        springLength: 140,
        avoidOverlap: 1,
      },
      hierarchicalRepulsion: {
        nodeDistance: 120,
        //centralGravity: 10.1,
        springLength: 120,
        avoidOverlap: 0,
      },
    },
    nodes: {
      shape: "dot",
      size: 16,
      font: {
        size: 12,
        color: "#ffffff",
      },
      borderWidth: 2,
      color: {
        highlight: "#FF6188",
      },
    },
    edges: {
      width: 1.5,
      selectionWidth: 1,
      color: {
        color: "#393f4e",
        highlight: "#FFD866",
        //hover: '#848484',
        inherit: "both",
        opacity: 1.0,
      },
      font: {
        color: "white",
        size: 6,
        strokeWidth: 0,
        background: "#141824",
        align: "middle"
      },
      smooth: {
        enabled: true,
        type: "horizontal",
        forceDirection: "horizontal",
        roundness: 0.5,
      },
    },
    groups: {
      vpn: {
        color: { background: "lightgreen", border: "white" },
        shape: "diamond",
      },
      router: {
        color: { background: "#FF6188", border: "#ffdddd" },
        shape: "circularImage",
        image: "https://thetooth.name/images/router.svg",
        imagePadding: 9,
        icon: {
          face: "Material Icons",
          code: "\ue074",
          size: 50,
          color: "purple",
        },
      },
      switch: {
        color: { background: "lightgray", border: "white" },
        shape: "diamond",
        icon: {
          face: "Material Icons",
          code: "\ue8d4",
          size: 50,
          color: "purple",
        },
      },
      server: {
        shape: "square",
        color: "yellow",
        icon: {
          face: "Material Icons",
          code: "\ue875",
          size: 50,
          color: "purple",
        },
      },
      client: {
        shape: "dot",
        color: "cyan",
        icon: {
          face: "Material Icons",
          code: "\ue87c",
          size: 50,
          color: "black",
        },
      },
      extclient: {
        shape: "icon",
        color: "cyan",
        icon: {
          face: "Material Icons",
          code: "\uea22",
          size: 50,
          color: "pink",
        },
      },
      iscsi: {
        shape: "square",
        color: "yellow",
        icon: {
          face: "Material Icons",
          code: "\ue161",
          size: 50,
          color: "black",
        },
      },
      firewall: {
        shape: "icon",
        icon: {
          face: "Material Icons",
          code: "\uef55",
          size: 50,
          color: "red",
        },
      },
      cloud: {
        shape: "icon",
        icon: {
          face: "Material Icons",
          code: "\ue2bd",
          size: 50,
          color: "white",
        },
      },
    },
  };
  var network = new vis.Network(container, data, options);
</script>