Style

Options

Theme

Colors

Nodes

Preview

Internet
Firewall
10.0.0.1
Core Router
10.0.0.2
Switch 1
10.0.1.1
Switch 2
10.0.2.1
Web Server
10.0.1.10
DB Server
10.0.1.11
Workstation 1
10.0.2.10
Workstation 2
10.0.2.11

Export

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Network Diagram</title>
  <style>
.network-diagram {
  position: relative;
  width: 600px;
  height: 500px;
  background-color: #0f172a;
  border-radius: 8px;
  overflow: hidden;
}
.network-node {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 8px;
  background-color: #1e293b;
  border: 2px solid #334155;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px #22d3ee40;
}
.network-node:hover {
  transform: scale(1.05);
  border-color: #22d3ee;
}
.node-icon {
  color: #22d3ee;
}
.node-icon svg {
  width: 100%;
  height: 100%;
}
.node-label {
  font-size: 10px;
  color: #f1f5f9;
  text-align: center;
  margin-top: 4px;
  font-family: system-ui, sans-serif;
}
.node-ip {
  font-size: 8px;
  color: #22d3ee;
  font-family: monospace;
}
.connection-line {
  stroke: #3b82f6;
  stroke-width: 2;
  fill: none;
}

  </style>
</head>
<body>
  <div class="network-diagram">
    <svg width="100%" height="100%" style="position: absolute; top: 0; left: 0;">
      <path d="M300,50 L300,150" class="connection-line" />
      <path d="M300,150 L300,250" class="connection-line" />
      <path d="M300,250 L150,350" class="connection-line" />
      <path d="M300,250 L450,350" class="connection-line" />
      <path d="M150,350 L100,450" class="connection-line" />
      <path d="M150,350 L200,450" class="connection-line" />
      <path d="M450,350 L400,450" class="connection-line" />
      <path d="M450,350 L500,450" class="connection-line" />
    </svg>
    <div class="network-node" style="left: 260px; top: 10px; width: 80px; height: 80px;">
      <div class="node-icon" style="width: 40px; height: 40px;">
        <!-- cloud icon -->
      </div>
      <div class="node-label">Internet</div>
      
    </div>
    <div class="network-node" style="left: 260px; top: 110px; width: 80px; height: 80px;">
      <div class="node-icon" style="width: 40px; height: 40px;">
        <!-- firewall icon -->
      </div>
      <div class="node-label">Firewall</div>
      <div class="node-ip">10.0.0.1</div>
    </div>
    <div class="network-node" style="left: 260px; top: 210px; width: 80px; height: 80px;">
      <div class="node-icon" style="width: 40px; height: 40px;">
        <!-- router icon -->
      </div>
      <div class="node-label">Core Router</div>
      <div class="node-ip">10.0.0.2</div>
    </div>
    <div class="network-node" style="left: 110px; top: 310px; width: 80px; height: 80px;">
      <div class="node-icon" style="width: 40px; height: 40px;">
        <!-- switch icon -->
      </div>
      <div class="node-label">Switch 1</div>
      <div class="node-ip">10.0.1.1</div>
    </div>
    <div class="network-node" style="left: 410px; top: 310px; width: 80px; height: 80px;">
      <div class="node-icon" style="width: 40px; height: 40px;">
        <!-- switch icon -->
      </div>
      <div class="node-label">Switch 2</div>
      <div class="node-ip">10.0.2.1</div>
    </div>
    <div class="network-node" style="left: 60px; top: 410px; width: 80px; height: 80px;">
      <div class="node-icon" style="width: 40px; height: 40px;">
        <!-- server icon -->
      </div>
      <div class="node-label">Web Server</div>
      <div class="node-ip">10.0.1.10</div>
    </div>
    <div class="network-node" style="left: 160px; top: 410px; width: 80px; height: 80px;">
      <div class="node-icon" style="width: 40px; height: 40px;">
        <!-- server icon -->
      </div>
      <div class="node-label">DB Server</div>
      <div class="node-ip">10.0.1.11</div>
    </div>
    <div class="network-node" style="left: 360px; top: 410px; width: 80px; height: 80px;">
      <div class="node-icon" style="width: 40px; height: 40px;">
        <!-- computer icon -->
      </div>
      <div class="node-label">Workstation 1</div>
      <div class="node-ip">10.0.2.10</div>
    </div>
    <div class="network-node" style="left: 460px; top: 410px; width: 80px; height: 80px;">
      <div class="node-icon" style="width: 40px; height: 40px;">
        <!-- computer icon -->
      </div>
      <div class="node-label">Workstation 2</div>
      <div class="node-ip">10.0.2.11</div>
    </div>

  </div>
</body>
</html>

Rate this tool