https://github.com/SocialGouv/react-k8s-viewer

Render diagrams from your kubernetes manifests
https://github.com/SocialGouv/react-k8s-viewer

diagram k8s kubernetes reactjs

Last synced: 10 days ago
JSON representation

Render diagrams from your kubernetes manifests

• Host: GitHub
• URL: https://github.com/SocialGouv/react-k8s-viewer
• Owner: SocialGouv
• Created: 2021-01-21T07:59:17.000Z (about 4 years ago)
• Default Branch: master
• Last Pushed: 2024-12-05T23:46:50.000Z (2 months ago)
• Last Synced: 2025-01-18T06:25:04.634Z (17 days ago)
• Topics: diagram, k8s, kubernetes, reactjs
• Language: TypeScript
• Homepage: https://socialgouv.github.io/react-k8s-viewer
• Size: 3.05 MB
• Stars: 13
• Watchers: 3
• Forks: 1
• Open Issues: 12
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md

Awesome Lists containing this project

• awesome-kubernetes-architecture-diagrams - react-k8s-viewer
• awesome-kubernetes-architecture-diagrams - react-k8s-viewer

README

        
# @socialgouv/react-k8s-viewer

Render diagrams from your kubernetes manifests.

Use [kubernetes-models-ts](https://github.com/tommy351/kubernetes-models-ts), [react-flow](https://reactflow.dev/) and [dagre](https://github.com/dagrejs/dagre) for layouting.

See demo : https://socialgouv.github.io/react-k8s-viewer

![](./demo.png)

## Usage

`K8sViewer` expect a list of `Manifest` or a `ManifestList` as JSON

```js

import { K8sViewer } from "@socialgouv/react-k8s-viewer";

import manifests from "./manifests.json";

const App = () => (

  


    

  

);

```


To extract the manifests from some namespace:

```sh

kubectl --namespace some-app get deploy,ing,service,secret,sealedsecret,configmap -ojson > manifests.json

```

## Todo:

- handle multiple namespaces