K8s Topology Visualiser — PoC

Interactive graph visualisation of Kubernetes resource relationships, built with React Flow.

Upload Kubernetes YAML manifests (or import from URL) and instantly see how Ingress, Service, Deployment, and ConfigMap resources connect — rendered as a directed, auto-laid-out graph.

npm install
npm run dev

Open http://localhost:5173 and upload a YAML file (a sample fixture is included in fixtures/).

• Drag-and-drop or file picker for .yaml/.yml files
• Import from URL (e.g. raw GitHub links)
• Multi-document YAML support (--- separated)
• Auto-layout via dagre (left-to-right: Ingress → Service → Deployment → ConfigMap)
• Colour-coded node cards with key fields
• Click a node to inspect full manifest in a detail panel
• Pan, zoom, minimap
• Error banners for invalid YAML with partial rendering of valid resources

React, Vite, React Flow (@xyflow/react), dagre, js-yaml, Tailwind CSS. No backend — everything runs in the browser.