Datacenter
ABOUT THIS DIAGRAM
A live network diagram of a home datacenter — 17 hosts drawn as nodes across five functional zones — EDGE, NETWORK, COMPUTE, DATA, APPS — tracing a request’s path from the internet edge through compute to data and apps. Node shape encodes role: diamonds for edge and proxy, hexagons for Kubernetes and storage, squares for databases, triangles for hypervisors, circles for apps and observability. Zone color separates the layers, and each node carries the real favicon of its primary technology.
Not a canned demo: the diagram fetches its topology from an API at runtime, so every node, link, and status reflects the running infrastructure, with IPs masked and internal tool names stripped. Alive hosts glow in their zone color; dim nodes are offline. Link color marks the protocol — HTTPS, HTTP, DNS, S3, Postgres, MySQL. Hover or tap a node for its name, operating system, services, latency, and open issues.
Stack: Canvas 2D on Vue 3 + Astro · Flask topology API · masked IPs only.
Status: frontend + backend health, polled every 60 seconds.