Transform your Kubernetes cluster into a 3D abstract city
KubeScene is an interactive 3D visualization tool for Kubernetes clusters. Inspired by the city metaphor for software visualization [1], it renders your cluster resources as an abstract city, where namespaces become districts, deployments become neighborhoods, pods become buildings, and services become glowing connection poles.
- Real-time 3D Visualization: Watch your cluster come alive as a living, breathing abstract city structure
- Interactive Exploration: Click, zoom, and navigate through your cluster architecture
- Resource Mapping: Namespaces → Districts, Pods → Buildings, Services and Ingresses → Cubes, ConfigMaps/Secrets → Floating Diamonds
- Status Indicators: Visual feedback for pod health, container states, and resource utilization
- Modern UI: Sleek sidebar with filterable resource tree and detailed information panels
- Node.js (v16 or higher)
- npm (comes with Node.js)
- Python 3 (for demo mode)
# Clone the repository
git clone https://github.com/dangelic/KubeScene.git
cd KubeScene
# Install dependencies
npm installStart the development server with hot-reload:
npm run devThen open your browser to http://localhost:3232 (or the port shown in the terminal).
To see KubeScene in action without connecting to a real cluster, use the demo script:
npm run demoThis will:
- Start the Vite development server
- Launch a WebSocket server
- Run a Python script that simulates a Kubernetes watcher, sending mock cluster data
Note: The Python demo script (scripts/demo_advanced.py) generates randomized Kubernetes resources and continuously updates the visualization to simulate a live cluster. This is perfect for testing, demonstrations, or exploring KubeScene's features.
You can control the size of the mock cluster by passing a size parameter. The demo supports five cluster sizes:
# Small cluster (2 namespaces, 5 pods)
npm run demo -- --size s
# Medium cluster (5 namespaces, 30 pods) - Default
npm run demo -- --size m
# Large cluster (10 namespaces, 100 pods)
npm run demo -- --size l
# Extra large cluster (15 namespaces, 200 pods)
npm run demo -- --size xl
# XX-large cluster (25 namespaces, 500 pods)
npm run demo -- --size xxlEach size includes proportional numbers of deployments, services, ingresses, ConfigMaps, and secrets. Larger sizes are great for stress-testing the visualization or demonstrating scalability.
Note: The
xlandxxlsizes may experience performance issues on some systems. These are primarily useful for performance testing and identifying optimization opportunities.
KubeScene uses a WebSocket connection to receive Kubernetes resource data. The current implementation includes:
- Frontend: Built with TypeScript, Three.js for 3D rendering, and Vite for build tooling
- Mock Backend: Python script that simulates Kubernetes API watch events
- WebSocket Layer: Real-time communication between backend and frontend
| Kubernetes Resource | 3D Representation |
|---|---|
| Namespace | District (platform with labeled sides) |
| Deployment | Neighborhood (grouped buildings) |
| ReplicaSet | Neighborhood (grouped buildings) |
| StatefulSet | Neighborhood (grouped buildings) |
| Pod | Building (with chimneys for containers) |
| Container | Chimney (on top of pod building) |
| Service | Cube |
| Ingress | Bigger cube |
| ConfigMap | Floating diamond (white/black texture) |
| Secret | Floating diamond (white/red texture) |
- Real Kubernetes cluster integration (replacing mock watcher)
- Enhanced filtering and search capabilities
- Support for additional resource types (DaemonSets, Jobs, CronJobs, etc.)
- Metrics integration (CPU, memory, network)
- Historical playback and time-travel debugging
- Multi-cluster visualization
- Export and share cluster snapshots
- Custom themes and visual styles
- Performance optimizations for large clusters
- AR/VR mode for immersive exploration
- Real-time alerting and notifications
- Integration with GitOps workflows
- Plugin system for custom visualizations
Contributions are welcome! Please feel free to submit a Pull Request.
This project is licensed under the ISC License - see the LICENSE file for details.
Leonardo d'Angelico (@dangelic)
- Built with Three.js for 3D rendering
- Inspired by the city metaphor for software visualization
[1] Wettel, R., & Lanza, M. (2007). Visualizing Software Systems as Cities. VISSOFT 2007 - 4th IEEE International Workshop on Visualizing Software for Understanding and Analysis. https://wettel.github.io/codecity.html
Made with ♥ by dangelic