https://github.com/artturik/network-policy-viewer
View your Kubernetes NetworkPolicy manifests as graph, online version available at https://artturik.github.io/network-policy-viewer
https://github.com/artturik/network-policy-viewer
graph kubernetes networkpolicy visualization
Last synced: 12 months ago
JSON representation
View your Kubernetes NetworkPolicy manifests as graph, online version available at https://artturik.github.io/network-policy-viewer
- Host: GitHub
- URL: https://github.com/artturik/network-policy-viewer
- Owner: artturik
- License: mit
- Created: 2020-10-14T19:53:26.000Z (almost 6 years ago)
- Default Branch: main
- Last Pushed: 2024-11-28T17:40:03.000Z (over 1 year ago)
- Last Synced: 2025-08-07T22:57:26.103Z (12 months ago)
- Topics: graph, kubernetes, networkpolicy, visualization
- Language: TypeScript
- Homepage: https://artturik.github.io/network-policy-viewer
- Size: 13.4 MB
- Stars: 29
- Watchers: 2
- Forks: 18
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
Kubernetes Network Policy Viewer
===
[ONLINE DEMO](https://artturik.github.io/network-policy-viewer/)
**BETA**: You also can **edit** NetworkPolicy in the editor and visualisation will update as you type
View your Kubernetes NetworkPolicy manifests as graph,
just Copy and Paste YAML to the editor and receive instant visualisation
This, hopefully, can help you find issues with NetworkPolicies
or understand NetworkPolicy concept better
## Related projects
* [NetworkPolicy Viewer as Lens IDE extension](https://github.com/artturik/lens-extension-network-policy-viewer)
## Installation
```bash
npm install network-policy-viewer
```
## Usage
NetworkPolicyViewer can be used as React component, see the sample below or [view demo source code](src/client/components/App.tsx)
```jsx
import React from 'react';
import ReactDOM from 'react-dom';
import { NetworkPolicyViewer } from "network-policy-viewer";
import "network-policy-viewer/index.css"
const networkPolicy = `
apiVersion: networking.k8s.io/v1
kind: NetworkPolicy
metadata:
name: default-deny-ingress
spec:
podSelector: {}
policyTypes:
- Ingress
`;
ReactDOM.render(
,
document.getElementById('root')
);
```
## Credits
* [React Flow](https://github.com/wbkd/react-flow)
## License
[MIT license](LICENSE)