timmy/42_38
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

docs: embed animated SVG cluster topology diagram in README

Browse Source 
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Timmy
2026-04-21 17:34:20 +08:00
parent d238644592
commit 47d35990f1
3 changed files with 585 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
README.md
View File

@@ -22,9 +22,14 @@
| [API.md](API.md) | Proxmox VE API 完整參考手冊 |
| [PVECluster_Architecture.md](PVECluster_Architecture.md) | 叢集架構詳細文件（硬體/網路/儲存/VM 清單） |
| [SUMMARY.md](SUMMARY.md) | 叢集狀態摘要與服務一覽 |
| [proxmox-cluster-topology.html](proxmox-cluster-topology.html) | 叢集網路拓撲視覺化示意圖（瀏覽器開啟） |
## 網路拓撲
![Proxmox 叢集網路架構](./proxmox-cluster-topology.svg)
> 互動 / 動畫版：[proxmox-cluster-topology.html](./proxmox-cluster-topology.html)（用瀏覽器開）
```
Internet ─── [192.168.42.10 GW / OpenWRT] ─── vmbr0 (192.168.42.0/24)
│

322
proxmox-cluster-topology.html Normal file
View File

@@ -0,0 +1,322 @@
<!DOCTYPE html>
<html lang="zh-Hant">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Proxmox 叢集網路架構</title>
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@500;700&family=Space+Grotesk:wght@500;700&display=swap" rel="stylesheet">
<style>
:root {
--bg: #0f1419;
--bg-2: #1a2129;
--border: #2d3942;
--text: #e6edf3;
--text-muted: #8b98a5;
--internet: #ffd166;
--gw: #1dd1a1;
--bridge: #5ec9d6;
--pve: #a29bfe;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
font-family: 'Space Grotesk', sans-serif;
background: radial-gradient(ellipse at top, #1a2129 0%, #0f1419 60%);
color: var(--text);
padding: 20px;
min-height: 100vh;
}
.container { max-width: 1100px; margin: 0 auto; }
h1 {
font-size: clamp(1.4rem, 4vw, 2rem);
font-weight: 700;
letter-spacing: -0.02em;
margin-bottom: 4px;
}
.sub {
font-family: 'JetBrains Mono', monospace;
color: var(--text-muted);
font-size: 0.85rem;
margin-bottom: 20px;
}
.sub .net { color: var(--bridge); }
.diagram-wrap {
background: var(--bg-2);
border: 1px solid var(--border);
border-radius: 16px;
padding: 16px;
position: relative;
overflow: hidden;
}
.diagram-wrap::before {
content: '';
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(94,201,214,0.04) 1px, transparent 1px),
linear-gradient(90deg, rgba(94,201,214,0.04) 1px, transparent 1px);
background-size: 24px 24px;
pointer-events: none;
}
svg { display: block; width: 100%; height: auto; position: relative; z-index: 1; }
.legend {
display: flex;
gap: 18px;
flex-wrap: wrap;
margin-top: 16px;
padding-top: 14px;
border-top: 1px dashed var(--border);
font-family: 'JetBrains Mono', monospace;
font-size: 0.78rem;
color: var(--text-muted);
}
.legend-item { display: flex; align-items: center; gap: 6px; }
.legend-dot { width: 10px; height: 10px; border-radius: 50%; }
</style>
</head>
<body>
<div class="container">
<h1>Proxmox 叢集網路架構</h1>
<div class="sub">network: <span class="net">192.168.42.0/24</span> · bridge: vmbr0</div>
<div class="diagram-wrap">
<svg viewBox="0 0 1020 440" xmlns="http://www.w3.org/2000/svg">
<defs>
<marker id="ar-y" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="7" markerHeight="7" orient="auto">
<path d="M 0 0 L 10 5 L 0 10 z" fill="#ffd166"/>
</marker>
<marker id="ar-g" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="7" markerHeight="7" orient="auto">
<path d="M 0 0 L 10 5 L 0 10 z" fill="#1dd1a1"/>
</marker>
<marker id="ar-c" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="7" markerHeight="7" orient="auto">
<path d="M 0 0 L 10 5 L 0 10 z" fill="#5ec9d6"/>
</marker>
<filter id="glow" x="-50%" y="-50%" width="200%" height="200%">
<feGaussianBlur stdDeviation="2.5" result="blur"/>
<feMerge>
<feMergeNode in="blur"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
<linearGradient id="inet-grad" x1="0" y1="0" x2="1" y2="1">
<stop offset="0%" stop-color="#ffd166" stop-opacity="0.18"/>
<stop offset="100%" stop-color="#ffd166" stop-opacity="0.04"/>
</linearGradient>
<linearGradient id="gw-grad" x1="0" y1="0" x2="1" y2="1">
<stop offset="0%" stop-color="#1dd1a1" stop-opacity="0.22"/>
<stop offset="100%" stop-color="#1dd1a1" stop-opacity="0.06"/>
</linearGradient>
<linearGradient id="pve-grad" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#1e2730"/>
<stop offset="100%" stop-color="#161d25"/>
</linearGradient>
<linearGradient id="bridge-grad" x1="0" y1="0" x2="1" y2="0">
<stop offset="0%" stop-color="#5ec9d6" stop-opacity="0.06"/>
<stop offset="50%" stop-color="#5ec9d6" stop-opacity="0.18"/>
<stop offset="100%" stop-color="#5ec9d6" stop-opacity="0.06"/>
</linearGradient>
</defs>
<!-- ===== Internet cloud ===== -->
<g>
<rect x="20" y="40" width="160" height="70" rx="35"
fill="url(#inet-grad)" stroke="#ffd166" stroke-width="1.6"/>
<path d="M 48 88
C 42 88, 38 84, 40 80
C 36 78, 37 73, 41 72
C 42 67, 49 66, 53 69
C 57 64, 65 65, 67 70
C 73 69, 78 74, 76 79
C 80 81, 79 86, 75 88
Z"
fill="#ffd166" fill-opacity="0.18" stroke="#ffd166" stroke-width="1.4"/>
<text x="90" y="80" font-family="Space Grotesk" font-size="14" font-weight="700" fill="#ffd166">Internet</text>
</g>
<!-- ===== Gateway (OpenWRT) with firewall icon ===== -->
<g>
<rect x="220" y="32" width="280" height="86" rx="10"
fill="url(#gw-grad)" stroke="#1dd1a1" stroke-width="1.8"/>
<!-- Firewall icon: brick wall with flame on top -->
<g transform="translate(240, 50)">
<!-- flame above the wall -->
<path d="M 18 4
C 14 10, 14 14, 18 16
C 20 12, 22 12, 22 16
C 26 14, 26 10, 22 6
C 21 9, 19 9, 18 4 Z"
fill="#ff6b9d" fill-opacity="0.9" stroke="#ff6b9d" stroke-width="0.8"/>
<!-- brick wall -->
<g stroke="#1dd1a1" stroke-width="1.3" fill="#1dd1a1" fill-opacity="0.08">
<!-- row 1 (top) -->
<rect x="2" y="20" width="10" height="7"/>
<rect x="13" y="20" width="10" height="7"/>
<rect x="24" y="20" width="10" height="7"/>
<!-- row 2 (middle, offset) -->
<rect x="-3" y="28" width="7" height="7"/>
<rect x="5" y="28" width="10" height="7"/>
<rect x="16" y="28" width="10" height="7"/>
<rect x="27" y="28" width="10" height="7"/>
<!-- row 3 (bottom) -->
<rect x="2" y="36" width="10" height="7"/>
<rect x="13" y="36" width="10" height="7"/>
<rect x="24" y="36" width="10" height="7"/>
</g>
</g>
<text x="295" y="65" font-family="Space Grotesk" font-size="14" font-weight="700" fill="#e6edf3">OpenWRT GW</text>
<text x="295" y="85" font-family="JetBrains Mono, monospace" font-size="11.5" fill="#1dd1a1">192.168.42.10</text>
<text x="295" y="103" font-family="JetBrains Mono, monospace" font-size="10.5" fill="#8b98a5">NAT · DHCP · Firewall</text>
<!-- status pulse -->
<circle cx="482" cy="50" r="4" fill="#1dd1a1" opacity="0.8">
<animate attributeName="r" values="4;10;4" dur="2s" repeatCount="indefinite"/>
<animate attributeName="opacity" values="0.8;0;0.8" dur="2s" repeatCount="indefinite"/>
</circle>
<circle cx="482" cy="50" r="3" fill="#1dd1a1"/>
</g>
<!-- ===== vmbr0 bridge bar ===== -->
<g>
<rect x="80" y="180" width="860" height="54" rx="8"
fill="url(#bridge-grad)" stroke="#5ec9d6" stroke-width="1.5"/>
<text x="102" y="205" font-family="JetBrains Mono, monospace" font-size="13" font-weight="700" fill="#5ec9d6">vmbr0</text>
<text x="150" y="205" font-family="JetBrains Mono, monospace" font-size="12" fill="#8b98a5">192.168.42.0/24</text>
<text x="918" y="223" text-anchor="end" font-family="Space Grotesk" font-size="11" fill="#8b98a5" font-style="italic">L2 bridge</text>
<circle cx="220" cy="234" r="4" fill="#5ec9d6"/>
<circle cx="510" cy="234" r="4" fill="#5ec9d6"/>
<circle cx="800" cy="234" r="4" fill="#5ec9d6"/>
</g>
<!-- ===== PVE nodes (simplified, just the node itself) ===== -->
<!-- pve (.38) -->
<g>
<rect x="80" y="290" width="280" height="110" rx="12"
fill="url(#pve-grad)" stroke="#a29bfe" stroke-width="1.6"/>
<g transform="translate(100, 318)" stroke="#a29bfe" stroke-width="1.4" fill="none">
<rect x="0" y="0" width="26" height="7" rx="1"/>
<rect x="0" y="10" width="26" height="7" rx="1"/>
<rect x="0" y="20" width="26" height="7" rx="1"/>
<circle cx="3.5" cy="3.5" r="0.9" fill="#a29bfe" stroke="none"/>
<circle cx="3.5" cy="13.5" r="0.9" fill="#a29bfe" stroke="none"/>
<circle cx="3.5" cy="23.5" r="0.9" fill="#a29bfe" stroke="none"/>
</g>
<text x="140" y="330" font-family="Space Grotesk" font-size="18" font-weight="700" fill="#e6edf3">pve</text>
<text x="340" y="330" text-anchor="end" font-family="JetBrains Mono, monospace" font-size="14" fill="#a29bfe" font-weight="700">.38</text>
<text x="140" y="350" font-family="JetBrains Mono, monospace" font-size="11.5" fill="#8b98a5">192.168.42.38</text>
<line x1="100" y1="368" x2="340" y2="368" stroke="#2d3942" stroke-width="1"/>
<text x="100" y="388" font-family="JetBrains Mono, monospace" font-size="10.5" fill="#8b98a5">Proxmox VE · cluster node</text>
</g>
<!-- pve-02 (.39) -->
<g>
<rect x="370" y="290" width="280" height="110" rx="12"
fill="url(#pve-grad)" stroke="#a29bfe" stroke-width="1.6"/>
<g transform="translate(390, 318)" stroke="#a29bfe" stroke-width="1.4" fill="none">
<rect x="0" y="0" width="26" height="7" rx="1"/>
<rect x="0" y="10" width="26" height="7" rx="1"/>
<rect x="0" y="20" width="26" height="7" rx="1"/>
<circle cx="3.5" cy="3.5" r="0.9" fill="#a29bfe" stroke="none"/>
<circle cx="3.5" cy="13.5" r="0.9" fill="#a29bfe" stroke="none"/>
<circle cx="3.5" cy="23.5" r="0.9" fill="#a29bfe" stroke="none"/>
</g>
<text x="430" y="330" font-family="Space Grotesk" font-size="18" font-weight="700" fill="#e6edf3">pve-02</text>
<text x="630" y="330" text-anchor="end" font-family="JetBrains Mono, monospace" font-size="14" fill="#a29bfe" font-weight="700">.39</text>
<text x="430" y="350" font-family="JetBrains Mono, monospace" font-size="11.5" fill="#8b98a5">192.168.42.39</text>
<line x1="390" y1="368" x2="630" y2="368" stroke="#2d3942" stroke-width="1"/>
<text x="390" y="388" font-family="JetBrains Mono, monospace" font-size="10.5" fill="#8b98a5">Proxmox VE · cluster node</text>
</g>
<!-- pve-03 (.40) -->
<g>
<rect x="660" y="290" width="280" height="110" rx="12"
fill="url(#pve-grad)" stroke="#a29bfe" stroke-width="1.6"/>
<g transform="translate(680, 318)" stroke="#a29bfe" stroke-width="1.4" fill="none">
<rect x="0" y="0" width="26" height="7" rx="1"/>
<rect x="0" y="10" width="26" height="7" rx="1"/>
<rect x="0" y="20" width="26" height="7" rx="1"/>
<circle cx="3.5" cy="3.5" r="0.9" fill="#a29bfe" stroke="none"/>
<circle cx="3.5" cy="13.5" r="0.9" fill="#a29bfe" stroke="none"/>
<circle cx="3.5" cy="23.5" r="0.9" fill="#a29bfe" stroke="none"/>
</g>
<text x="720" y="330" font-family="Space Grotesk" font-size="18" font-weight="700" fill="#e6edf3">pve-03</text>
<text x="920" y="330" text-anchor="end" font-family="JetBrains Mono, monospace" font-size="14" fill="#a29bfe" font-weight="700">.40</text>
<text x="720" y="350" font-family="JetBrains Mono, monospace" font-size="11.5" fill="#8b98a5">192.168.42.40</text>
<line x1="680" y1="368" x2="920" y2="368" stroke="#2d3942" stroke-width="1"/>
<text x="680" y="388" font-family="JetBrains Mono, monospace" font-size="10.5" fill="#8b98a5">Proxmox VE · cluster node</text>
</g>
<!-- ===== Paths ===== -->
<path id="p-inet" d="M 180 75 L 220 75"
stroke="#ffd166" stroke-width="2" fill="none" marker-end="url(#ar-y)"/>
<path id="p-gw-br" d="M 360 118 L 360 180"
stroke="#1dd1a1" stroke-width="2" fill="none" marker-end="url(#ar-g)"/>
<path id="p-pve1" d="M 220 234 L 220 290"
stroke="#5ec9d6" stroke-width="1.8" fill="none" marker-end="url(#ar-c)"/>
<path id="p-pve2" d="M 510 234 L 510 290"
stroke="#5ec9d6" stroke-width="1.8" fill="none" marker-end="url(#ar-c)"/>
<path id="p-pve3" d="M 800 234 L 800 290"
stroke="#5ec9d6" stroke-width="1.8" fill="none" marker-end="url(#ar-c)"/>
<!-- ===== Animated dots ===== -->
<circle r="4" fill="#ffd166" filter="url(#glow)">
<animateMotion dur="1.2s" repeatCount="indefinite"><mpath href="#p-inet"/></animateMotion>
</circle>
<circle r="4" fill="#ffd166" filter="url(#glow)">
<animateMotion dur="1.2s" begin="-0.6s" repeatCount="indefinite"><mpath href="#p-inet"/></animateMotion>
</circle>
<circle r="4" fill="#1dd1a1" filter="url(#glow)">
<animateMotion dur="1s" repeatCount="indefinite"><mpath href="#p-gw-br"/></animateMotion>
</circle>
<circle r="4" fill="#5ec9d6" filter="url(#glow)">
<animateMotion dur="1.2s" repeatCount="indefinite"><mpath href="#p-pve1"/></animateMotion>
</circle>
<circle r="4" fill="#5ec9d6" filter="url(#glow)">
<animateMotion dur="1.2s" begin="-0.4s" repeatCount="indefinite"><mpath href="#p-pve2"/></animateMotion>
</circle>
<circle r="4" fill="#5ec9d6" filter="url(#glow)">
<animateMotion dur="1.2s" begin="-0.8s" repeatCount="indefinite"><mpath href="#p-pve3"/></animateMotion>
</circle>
<!-- Bridge traffic (left↔right) -->
<circle r="3" fill="#5ec9d6" opacity="0.7">
<animate attributeName="cx" values="100;920;100" dur="6s" repeatCount="indefinite"/>
<animate attributeName="cy" values="207;207;207" dur="6s" repeatCount="indefinite"/>
</circle>
<circle r="3" fill="#5ec9d6" opacity="0.7">
<animate attributeName="cx" values="920;100;920" dur="6s" repeatCount="indefinite"/>
<animate attributeName="cy" values="207;207;207" dur="6s" repeatCount="indefinite"/>
</circle>
</svg>
<div class="legend">
<div class="legend-item"><span class="legend-dot" style="background:#ffd166"></span>Internet</div>
<div class="legend-item"><span class="legend-dot" style="background:#1dd1a1"></span>OpenWRT Gateway</div>
<div class="legend-item"><span class="legend-dot" style="background:#5ec9d6"></span>vmbr0 (L2 bridge)</div>
<div class="legend-item"><span class="legend-dot" style="background:#a29bfe"></span>PVE 節點</div>
</div>
</div>
</div>
</body>
</html>

258
proxmox-cluster-topology.svg Normal file
View File

@@ -0,0 +1,258 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1020 580" font-family="'Space Grotesk', 'Segoe UI', system-ui, sans-serif">
<defs>
<marker id="ar-y" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="7" markerHeight="7" orient="auto">
<path d="M 0 0 L 10 5 L 0 10 z" fill="#ffd166"/>
</marker>
<marker id="ar-g" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="7" markerHeight="7" orient="auto">
<path d="M 0 0 L 10 5 L 0 10 z" fill="#1dd1a1"/>
</marker>
<marker id="ar-c" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="7" markerHeight="7" orient="auto">
<path d="M 0 0 L 10 5 L 0 10 z" fill="#5ec9d6"/>
</marker>
<filter id="glow" x="-50%" y="-50%" width="200%" height="200%">
<feGaussianBlur stdDeviation="2.5" result="blur"/>
<feMerge>
<feMergeNode in="blur"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
<linearGradient id="inet-grad" x1="0" y1="0" x2="1" y2="1">
<stop offset="0%" stop-color="#ffd166" stop-opacity="0.18"/>
<stop offset="100%" stop-color="#ffd166" stop-opacity="0.04"/>
</linearGradient>
<linearGradient id="gw-grad" x1="0" y1="0" x2="1" y2="1">
<stop offset="0%" stop-color="#1dd1a1" stop-opacity="0.22"/>
<stop offset="100%" stop-color="#1dd1a1" stop-opacity="0.06"/>
</linearGradient>
<linearGradient id="pve-grad" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#1e2730"/>
<stop offset="100%" stop-color="#161d25"/>
</linearGradient>
<linearGradient id="bridge-grad" x1="0" y1="0" x2="1" y2="0">
<stop offset="0%" stop-color="#5ec9d6" stop-opacity="0.06"/>
<stop offset="50%" stop-color="#5ec9d6" stop-opacity="0.18"/>
<stop offset="100%" stop-color="#5ec9d6" stop-opacity="0.06"/>
</linearGradient>
<pattern id="grid" width="24" height="24" patternUnits="userSpaceOnUse">
<path d="M 24 0 L 0 0 0 24" fill="none" stroke="#5ec9d6" stroke-opacity="0.04" stroke-width="1"/>
</pattern>
</defs>
<!-- Background -->
<rect width="1020" height="580" fill="#0f1419"/>
<!-- Title -->
<text x="20" y="36" font-size="24" font-weight="700" fill="#e6edf3">Proxmox 叢集網路架構</text>
<text x="20" y="58" font-family="'JetBrains Mono', 'Consolas', monospace" font-size="12" fill="#8b98a5">network: <tspan fill="#5ec9d6">192.168.42.0/24</tspan> · bridge: vmbr0</text>
<!-- Diagram container -->
<rect x="10" y="75" width="1000" height="450" rx="14" fill="#1a2129" stroke="#2d3942" stroke-width="1"/>
<rect x="10" y="75" width="1000" height="450" rx="14" fill="url(#grid)"/>
<!-- Diagram content (shifted down by 80) -->
<g transform="translate(0, 80)">
<!-- ===== Internet cloud ===== -->
<g>
<rect x="20" y="40" width="160" height="70" rx="35"
fill="url(#inet-grad)" stroke="#ffd166" stroke-width="1.6"/>
<path d="M 48 88
C 42 88, 38 84, 40 80
C 36 78, 37 73, 41 72
C 42 67, 49 66, 53 69
C 57 64, 65 65, 67 70
C 73 69, 78 74, 76 79
C 80 81, 79 86, 75 88
Z"
fill="#ffd166" fill-opacity="0.18" stroke="#ffd166" stroke-width="1.4"/>
<text x="90" y="80" font-size="14" font-weight="700" fill="#ffd166">Internet</text>
</g>
<!-- ===== Gateway (OpenWRT) with firewall icon ===== -->
<g>
<rect x="220" y="32" width="280" height="86" rx="10"
fill="url(#gw-grad)" stroke="#1dd1a1" stroke-width="1.8"/>
<g transform="translate(240, 50)">
<path d="M 18 4
C 14 10, 14 14, 18 16
C 20 12, 22 12, 22 16
C 26 14, 26 10, 22 6
C 21 9, 19 9, 18 4 Z"
fill="#ff6b9d" fill-opacity="0.9" stroke="#ff6b9d" stroke-width="0.8"/>
<g stroke="#1dd1a1" stroke-width="1.3" fill="#1dd1a1" fill-opacity="0.08">
<rect x="2" y="20" width="10" height="7"/>
<rect x="13" y="20" width="10" height="7"/>
<rect x="24" y="20" width="10" height="7"/>
<rect x="-3" y="28" width="7" height="7"/>
<rect x="5" y="28" width="10" height="7"/>
<rect x="16" y="28" width="10" height="7"/>
<rect x="27" y="28" width="10" height="7"/>
<rect x="2" y="36" width="10" height="7"/>
<rect x="13" y="36" width="10" height="7"/>
<rect x="24" y="36" width="10" height="7"/>
</g>
</g>
<text x="295" y="65" font-size="14" font-weight="700" fill="#e6edf3">OpenWRT GW</text>
<text x="295" y="85" font-family="'JetBrains Mono', 'Consolas', monospace" font-size="11.5" fill="#1dd1a1">192.168.42.10</text>
<text x="295" y="103" font-family="'JetBrains Mono', 'Consolas', monospace" font-size="10.5" fill="#8b98a5">NAT · DHCP · Firewall</text>
<circle cx="482" cy="50" r="4" fill="#1dd1a1" opacity="0.8">
<animate attributeName="r" values="4;10;4" dur="2s" repeatCount="indefinite"/>
<animate attributeName="opacity" values="0.8;0;0.8" dur="2s" repeatCount="indefinite"/>
</circle>
<circle cx="482" cy="50" r="3" fill="#1dd1a1"/>
</g>
<!-- ===== vmbr0 bridge bar ===== -->
<g>
<rect x="80" y="180" width="860" height="54" rx="8"
fill="url(#bridge-grad)" stroke="#5ec9d6" stroke-width="1.5"/>
<text x="102" y="205" font-family="'JetBrains Mono', 'Consolas', monospace" font-size="13" font-weight="700" fill="#5ec9d6">vmbr0</text>
<text x="150" y="205" font-family="'JetBrains Mono', 'Consolas', monospace" font-size="12" fill="#8b98a5">192.168.42.0/24</text>
<text x="918" y="223" text-anchor="end" font-size="11" fill="#8b98a5" font-style="italic">L2 bridge</text>
<circle cx="220" cy="234" r="4" fill="#5ec9d6"/>
<circle cx="510" cy="234" r="4" fill="#5ec9d6"/>
<circle cx="800" cy="234" r="4" fill="#5ec9d6"/>
</g>
<!-- ===== PVE nodes ===== -->
<!-- pve (.38) -->
<g>
<rect x="80" y="290" width="280" height="110" rx="12"
fill="url(#pve-grad)" stroke="#a29bfe" stroke-width="1.6"/>
<g transform="translate(100, 318)" stroke="#a29bfe" stroke-width="1.4" fill="none">
<rect x="0" y="0" width="26" height="7" rx="1"/>
<rect x="0" y="10" width="26" height="7" rx="1"/>
<rect x="0" y="20" width="26" height="7" rx="1"/>
<circle cx="3.5" cy="3.5" r="0.9" fill="#a29bfe" stroke="none"/>
<circle cx="3.5" cy="13.5" r="0.9" fill="#a29bfe" stroke="none"/>
<circle cx="3.5" cy="23.5" r="0.9" fill="#a29bfe" stroke="none"/>
</g>
<text x="140" y="330" font-size="18" font-weight="700" fill="#e6edf3">pve</text>
<text x="340" y="330" text-anchor="end" font-family="'JetBrains Mono', 'Consolas', monospace" font-size="14" fill="#a29bfe" font-weight="700">.38</text>
<text x="140" y="350" font-family="'JetBrains Mono', 'Consolas', monospace" font-size="11.5" fill="#8b98a5">192.168.42.38</text>
<line x1="100" y1="368" x2="340" y2="368" stroke="#2d3942" stroke-width="1"/>
<text x="100" y="388" font-family="'JetBrains Mono', 'Consolas', monospace" font-size="10.5" fill="#8b98a5">Proxmox VE · cluster node</text>
</g>
<!-- pve-02 (.39) -->
<g>
<rect x="370" y="290" width="280" height="110" rx="12"
fill="url(#pve-grad)" stroke="#a29bfe" stroke-width="1.6"/>
<g transform="translate(390, 318)" stroke="#a29bfe" stroke-width="1.4" fill="none">
<rect x="0" y="0" width="26" height="7" rx="1"/>
<rect x="0" y="10" width="26" height="7" rx="1"/>
<rect x="0" y="20" width="26" height="7" rx="1"/>
<circle cx="3.5" cy="3.5" r="0.9" fill="#a29bfe" stroke="none"/>
<circle cx="3.5" cy="13.5" r="0.9" fill="#a29bfe" stroke="none"/>
<circle cx="3.5" cy="23.5" r="0.9" fill="#a29bfe" stroke="none"/>
</g>
<text x="430" y="330" font-size="18" font-weight="700" fill="#e6edf3">pve-02</text>
<text x="630" y="330" text-anchor="end" font-family="'JetBrains Mono', 'Consolas', monospace" font-size="14" fill="#a29bfe" font-weight="700">.39</text>
<text x="430" y="350" font-family="'JetBrains Mono', 'Consolas', monospace" font-size="11.5" fill="#8b98a5">192.168.42.39</text>
<line x1="390" y1="368" x2="630" y2="368" stroke="#2d3942" stroke-width="1"/>
<text x="390" y="388" font-family="'JetBrains Mono', 'Consolas', monospace" font-size="10.5" fill="#8b98a5">Proxmox VE · cluster node</text>
</g>
<!-- pve-03 (.40) -->
<g>
<rect x="660" y="290" width="280" height="110" rx="12"
fill="url(#pve-grad)" stroke="#a29bfe" stroke-width="1.6"/>
<g transform="translate(680, 318)" stroke="#a29bfe" stroke-width="1.4" fill="none">
<rect x="0" y="0" width="26" height="7" rx="1"/>
<rect x="0" y="10" width="26" height="7" rx="1"/>
<rect x="0" y="20" width="26" height="7" rx="1"/>
<circle cx="3.5" cy="3.5" r="0.9" fill="#a29bfe" stroke="none"/>
<circle cx="3.5" cy="13.5" r="0.9" fill="#a29bfe" stroke="none"/>
<circle cx="3.5" cy="23.5" r="0.9" fill="#a29bfe" stroke="none"/>
</g>
<text x="720" y="330" font-size="18" font-weight="700" fill="#e6edf3">pve-03</text>
<text x="920" y="330" text-anchor="end" font-family="'JetBrains Mono', 'Consolas', monospace" font-size="14" fill="#a29bfe" font-weight="700">.40</text>
<text x="720" y="350" font-family="'JetBrains Mono', 'Consolas', monospace" font-size="11.5" fill="#8b98a5">192.168.42.40</text>
<line x1="680" y1="368" x2="920" y2="368" stroke="#2d3942" stroke-width="1"/>
<text x="680" y="388" font-family="'JetBrains Mono', 'Consolas', monospace" font-size="10.5" fill="#8b98a5">Proxmox VE · cluster node</text>
</g>
<!-- ===== Paths ===== -->
<path id="p-inet" d="M 180 75 L 220 75"
stroke="#ffd166" stroke-width="2" fill="none" marker-end="url(#ar-y)"/>
<path id="p-gw-br" d="M 360 118 L 360 180"
stroke="#1dd1a1" stroke-width="2" fill="none" marker-end="url(#ar-g)"/>
<path id="p-pve1" d="M 220 234 L 220 290"
stroke="#5ec9d6" stroke-width="1.8" fill="none" marker-end="url(#ar-c)"/>
<path id="p-pve2" d="M 510 234 L 510 290"
stroke="#5ec9d6" stroke-width="1.8" fill="none" marker-end="url(#ar-c)"/>
<path id="p-pve3" d="M 800 234 L 800 290"
stroke="#5ec9d6" stroke-width="1.8" fill="none" marker-end="url(#ar-c)"/>
<!-- ===== Animated dots ===== -->
<circle r="4" fill="#ffd166" filter="url(#glow)">
<animateMotion dur="1.2s" repeatCount="indefinite"><mpath href="#p-inet"/></animateMotion>
</circle>
<circle r="4" fill="#ffd166" filter="url(#glow)">
<animateMotion dur="1.2s" begin="-0.6s" repeatCount="indefinite"><mpath href="#p-inet"/></animateMotion>
</circle>
<circle r="4" fill="#1dd1a1" filter="url(#glow)">
<animateMotion dur="1s" repeatCount="indefinite"><mpath href="#p-gw-br"/></animateMotion>
</circle>
<circle r="4" fill="#5ec9d6" filter="url(#glow)">
<animateMotion dur="1.2s" repeatCount="indefinite"><mpath href="#p-pve1"/></animateMotion>
</circle>
<circle r="4" fill="#5ec9d6" filter="url(#glow)">
<animateMotion dur="1.2s" begin="-0.4s" repeatCount="indefinite"><mpath href="#p-pve2"/></animateMotion>
</circle>
<circle r="4" fill="#5ec9d6" filter="url(#glow)">
<animateMotion dur="1.2s" begin="-0.8s" repeatCount="indefinite"><mpath href="#p-pve3"/></animateMotion>
</circle>
<!-- Bridge traffic (left↔right) -->
<circle r="3" fill="#5ec9d6" opacity="0.7">
<animate attributeName="cx" values="100;920;100" dur="6s" repeatCount="indefinite"/>
<animate attributeName="cy" values="207;207;207" dur="6s" repeatCount="indefinite"/>
</circle>
<circle r="3" fill="#5ec9d6" opacity="0.7">
<animate attributeName="cx" values="920;100;920" dur="6s" repeatCount="indefinite"/>
<animate attributeName="cy" values="207;207;207" dur="6s" repeatCount="indefinite"/>
</circle>
</g>
<!-- Legend -->
<g transform="translate(20, 548)" font-family="'JetBrains Mono', 'Consolas', monospace" font-size="11" fill="#8b98a5">
<g>
<circle cx="5" cy="0" r="5" fill="#ffd166"/>
<text x="16" y="4">Internet</text>
</g>
<g transform="translate(110, 0)">
<circle cx="5" cy="0" r="5" fill="#1dd1a1"/>
<text x="16" y="4">OpenWRT Gateway</text>
</g>
<g transform="translate(290, 0)">
<circle cx="5" cy="0" r="5" fill="#5ec9d6"/>
<text x="16" y="4">vmbr0 (L2 bridge)</text>
</g>
<g transform="translate(460, 0)">
<circle cx="5" cy="0" r="5" fill="#a29bfe"/>
<text x="16" y="4">PVE 節點</text>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 13 KiB