Skip to content

Instantly share code, notes, and snippets.

@thetooth
Created Jun 24, 2022
Embed
What would you like to do?
<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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment