@webwriter/network/snippets/simple-network.html

Visualization of network topologies. Can represent different kinds of networks.

<ww-network class="ww-widget ww-v0.0.1" screen="medium"
    components="[{&quot;id&quot;:&quot;host0&quot;,&quot;name&quot;:&quot;host0&quot;,&quot;color&quot;:&quot;#70e6af&quot;,&quot;type&quot;:&quot;mobile&quot;,&quot;x&quot;:-264.024454782425,&quot;y&quot;:-139.11977229410817,&quot;ports&quot;:[{&quot;name&quot;:&quot;eth0&quot;,&quot;type&quot;:&quot;ethernet&quot;,&quot;mac&quot;:&quot;cf:e4:ff:e3:c7:3c&quot;,&quot;ip4&quot;:&quot;1.1.1.2&quot;,&quot;ip6&quot;:&quot;0:0:0:0:0:0:0:1&quot;}],&quot;portLinks&quot;:[&quot;graphEdge0&quot;]},{&quot;id&quot;:&quot;host1&quot;,&quot;name&quot;:&quot;host1&quot;,&quot;color&quot;:&quot;#70e6af&quot;,&quot;type&quot;:&quot;mobile&quot;,&quot;x&quot;:-265.3690426555197,&quot;y&quot;:-86.70307088274684,&quot;ports&quot;:[{&quot;name&quot;:&quot;eth0&quot;,&quot;type&quot;:&quot;ethernet&quot;,&quot;mac&quot;:&quot;5b:bc:85:54:b1:50&quot;,&quot;ip4&quot;:&quot;1.1.1.3&quot;,&quot;ip6&quot;:&quot;0:0:0:0:0:0:0:1&quot;}],&quot;portLinks&quot;:[&quot;graphEdge1&quot;]},{&quot;id&quot;:&quot;host2&quot;,&quot;name&quot;:&quot;host2&quot;,&quot;color&quot;:&quot;#70e6af&quot;,&quot;type&quot;:&quot;mobile&quot;,&quot;x&quot;:-266.7730997393322,&quot;y&quot;:-41.39349743794498,&quot;ports&quot;:[{&quot;name&quot;:&quot;eth0&quot;,&quot;type&quot;:&quot;ethernet&quot;,&quot;mac&quot;:&quot;c4:66:09:72:53:f1&quot;,&quot;ip4&quot;:&quot;1.1.1.4&quot;,&quot;ip6&quot;:&quot;0:0:0:0:0:0:0:1&quot;}],&quot;portLinks&quot;:[&quot;graphEdge2&quot;]},{&quot;id&quot;:&quot;host3&quot;,&quot;name&quot;:&quot;host3&quot;,&quot;color&quot;:&quot;#70e6af&quot;,&quot;type&quot;:&quot;mobile&quot;,&quot;x&quot;:-271.14214239485204,&quot;y&quot;:97.96498557170715,&quot;ports&quot;:[{&quot;name&quot;:&quot;eth0&quot;,&quot;type&quot;:&quot;ethernet&quot;,&quot;mac&quot;:&quot;be:13:39:f6:bf:12&quot;,&quot;ip4&quot;:&quot;1.1.1.7&quot;,&quot;ip6&quot;:&quot;0:0:0:0:0:0:0:1&quot;}],&quot;portLinks&quot;:[&quot;graphEdge7&quot;]},{&quot;id&quot;:&quot;host4&quot;,&quot;name&quot;:&quot;host4&quot;,&quot;color&quot;:&quot;#70e6af&quot;,&quot;type&quot;:&quot;mobile&quot;,&quot;x&quot;:-269.095317511683,&quot;y&quot;:141.72585791982698,&quot;ports&quot;:[{&quot;name&quot;:&quot;eth0&quot;,&quot;type&quot;:&quot;ethernet&quot;,&quot;mac&quot;:&quot;e9:62:11:30:a9:28&quot;,&quot;ip4&quot;:&quot;1.1.1.6&quot;,&quot;ip6&quot;:&quot;0:0:0:0:0:0:0:1&quot;}],&quot;portLinks&quot;:[&quot;graphEdge6&quot;]},{&quot;id&quot;:&quot;host5&quot;,&quot;name&quot;:&quot;host5&quot;,&quot;color&quot;:&quot;#70e6af&quot;,&quot;type&quot;:&quot;mobile&quot;,&quot;x&quot;:-273.21467286945494,&quot;y&quot;:185.89287203344048,&quot;ports&quot;:[{&quot;name&quot;:&quot;eth0&quot;,&quot;type&quot;:&quot;ethernet&quot;,&quot;mac&quot;:&quot;7d:4d:80:06:75:bc&quot;,&quot;ip4&quot;:&quot;1.1.1.5&quot;,&quot;ip6&quot;:&quot;0:0:0:0:0:0:0:1&quot;}],&quot;portLinks&quot;:[&quot;graphEdge5&quot;]},{&quot;id&quot;:&quot;switch0&quot;,&quot;name&quot;:&quot;switch0&quot;,&quot;color&quot;:&quot;#70e6af&quot;,&quot;type&quot;:&quot;switch&quot;,&quot;x&quot;:-230.0354313646289,&quot;y&quot;:29.928720334405767,&quot;ports&quot;:[{&quot;name&quot;:&quot;port&quot;,&quot;type&quot;:&quot;ethernet&quot;,&quot;mac&quot;:&quot;b6:3d:a8:94:24:93&quot;},{&quot;name&quot;:&quot;port&quot;,&quot;type&quot;:&quot;ethernet&quot;,&quot;mac&quot;:&quot;f9:dd:75:d8:4e:ba&quot;},{&quot;name&quot;:&quot;port&quot;,&quot;type&quot;:&quot;ethernet&quot;,&quot;mac&quot;:&quot;fc:16:6d:1e:f2:a2&quot;}],&quot;portLinks&quot;:[&quot;graphEdge4&quot;,&quot;graphEdge3&quot;,&quot;&quot;]},{&quot;id&quot;:&quot;switch1&quot;,&quot;name&quot;:&quot;switch1&quot;,&quot;color&quot;:&quot;#70e6af&quot;,&quot;type&quot;:&quot;switch&quot;,&quot;x&quot;:18.738085311039605,&quot;y&quot;:-76.21383899678261,&quot;ports&quot;:[{&quot;name&quot;:&quot;port&quot;,&quot;type&quot;:&quot;ethernet&quot;,&quot;mac&quot;:&quot;77:c8:f7:2a:b4:3f&quot;},{&quot;name&quot;:&quot;port&quot;,&quot;type&quot;:&quot;ethernet&quot;,&quot;mac&quot;:&quot;06:12:e7:dd:6f:1f&quot;},{&quot;name&quot;:&quot;port&quot;,&quot;type&quot;:&quot;ethernet&quot;,&quot;mac&quot;:&quot;40:43:77:2c:1f:0f&quot;},{&quot;name&quot;:&quot;port&quot;,&quot;type&quot;:&quot;ethernet&quot;,&quot;mac&quot;:&quot;29:6b:77:1e:83:b2&quot;}],&quot;portLinks&quot;:[&quot;graphEdge0&quot;,&quot;graphEdge1&quot;,&quot;graphEdge2&quot;,&quot;graphEdge3&quot;]},{&quot;id&quot;:&quot;switch2&quot;,&quot;name&quot;:&quot;switch2&quot;,&quot;color&quot;:&quot;#70e6af&quot;,&quot;type&quot;:&quot;switch&quot;,&quot;x&quot;:9.441156193786467,&quot;y&quot;:129.86925112368783,&quot;ports&quot;:[{&quot;name&quot;:&quot;port&quot;,&quot;type&quot;:&quot;ethernet&quot;,&quot;mac&quot;:&quot;44:cd:14:5e:9d:2a&quot;},{&quot;name&quot;:&quot;port&quot;,&quot;type&quot;:&quot;ethernet&quot;,&quot;mac&quot;:&quot;5f:65:4e:3a:c6:bb&quot;},{&quot;name&quot;:&quot;port&quot;,&quot;type&quot;:&quot;ethernet&quot;,&quot;mac&quot;:&quot;b5:cf:0f:1f:06:70&quot;},{&quot;name&quot;:&quot;port&quot;,&quot;type&quot;:&quot;ethernet&quot;,&quot;mac&quot;:&quot;fc:07:e0:ef:eb:7b&quot;}],&quot;portLinks&quot;:[&quot;graphEdge5&quot;,&quot;graphEdge4&quot;,&quot;graphEdge7&quot;,&quot;graphEdge6&quot;]}]"
    connections="[{&quot;id&quot;:&quot;graphEdge0&quot;,&quot;from&quot;:&quot;host0&quot;,&quot;to&quot;:&quot;switch1&quot;,&quot;inPort&quot;:1,&quot;outPort&quot;:1,&quot;color&quot;:&quot;#70e6af&quot;},{&quot;id&quot;:&quot;graphEdge1&quot;,&quot;from&quot;:&quot;switch1&quot;,&quot;to&quot;:&quot;host1&quot;,&quot;inPort&quot;:2,&quot;outPort&quot;:1,&quot;color&quot;:&quot;#70e6af&quot;},{&quot;id&quot;:&quot;graphEdge2&quot;,&quot;from&quot;:&quot;host2&quot;,&quot;to&quot;:&quot;switch1&quot;,&quot;inPort&quot;:1,&quot;outPort&quot;:3,&quot;color&quot;:&quot;#70e6af&quot;},{&quot;id&quot;:&quot;graphEdge3&quot;,&quot;from&quot;:&quot;switch1&quot;,&quot;to&quot;:&quot;switch0&quot;,&quot;inPort&quot;:4,&quot;outPort&quot;:2,&quot;color&quot;:&quot;#70e6af&quot;},{&quot;id&quot;:&quot;graphEdge4&quot;,&quot;from&quot;:&quot;switch0&quot;,&quot;to&quot;:&quot;switch2&quot;,&quot;inPort&quot;:1,&quot;outPort&quot;:2,&quot;color&quot;:&quot;#70e6af&quot;},{&quot;id&quot;:&quot;graphEdge5&quot;,&quot;from&quot;:&quot;switch2&quot;,&quot;to&quot;:&quot;host5&quot;,&quot;inPort&quot;:1,&quot;outPort&quot;:1,&quot;color&quot;:&quot;#70e6af&quot;},{&quot;id&quot;:&quot;graphEdge6&quot;,&quot;from&quot;:&quot;switch2&quot;,&quot;to&quot;:&quot;host4&quot;,&quot;inPort&quot;:4,&quot;outPort&quot;:1,&quot;color&quot;:&quot;#70e6af&quot;},{&quot;id&quot;:&quot;graphEdge7&quot;,&quot;from&quot;:&quot;switch2&quot;,&quot;to&quot;:&quot;host3&quot;,&quot;inPort&quot;:3,&quot;outPort&quot;:1,&quot;color&quot;:&quot;#70e6af&quot;}]"
    networks="[{&quot;id&quot;:&quot;net0&quot;,&quot;components&quot;:[&quot;host5&quot;,&quot;host4&quot;,&quot;host3&quot;,&quot;host2&quot;,&quot;host1&quot;,&quot;host0&quot;,&quot;switch2&quot;,&quot;switch1&quot;,&quot;switch0&quot;],&quot;gateways&quot;:[],&quot;name&quot;:&quot;1.1.1.0 /24&quot;,&quot;netmask&quot;:&quot;255.255.255.0&quot;,&quot;bitmask&quot;:24,&quot;address&quot;:&quot;1.1.1.0&quot;,&quot;color&quot;:&quot;#70e6af&quot;,&quot;x&quot;:-107.67840763215357,&quot;y&quot;:-8.405099424653159}]"
    contenteditable=""></ww-network>