diff --git a/src/collections/blog/2025/06-17-cluster-visualization-kanva/hero-image-alt.png b/src/collections/blog/2025/06-17-cluster-visualization-kanva/hero-image-alt.png new file mode 100644 index 0000000000000..7c76eb948d4b6 Binary files /dev/null and b/src/collections/blog/2025/06-17-cluster-visualization-kanva/hero-image-alt.png differ diff --git a/src/collections/blog/2025/06-17-cluster-visualization-kanva/hero-image.png b/src/collections/blog/2025/06-17-cluster-visualization-kanva/hero-image.png new file mode 100644 index 0000000000000..5680381cf08d0 Binary files /dev/null and b/src/collections/blog/2025/06-17-cluster-visualization-kanva/hero-image.png differ diff --git a/src/collections/blog/2025/06-17-cluster-visualization-kanva/post.mdx b/src/collections/blog/2025/06-17-cluster-visualization-kanva/post.mdx new file mode 100644 index 0000000000000..7ecde319178a3 --- /dev/null +++ b/src/collections/blog/2025/06-17-cluster-visualization-kanva/post.mdx @@ -0,0 +1,91 @@ +--- +title: "Cluster Visualization With Meshery Playground and Kanvas" +subtitle: "Transform Complex Cluster into actionable visuals" +date: 2025-06-18 02:30:05 -0530 +author: Naman Verma +thumbnail: ./hero-image.png +darkthumbnail: ./hero-image.png +category: "Kanvas" +description: "Visualize Kubernetes clusters with Meshery Playground and Kanvas" +tags: + - Kanvas + - Playground + - Meshery +type: Blog +resource: true +published: true +--- + +import { BlogWrapper } from "../../Blog.style.js"; +import { Link } from "gatsby"; + + + +Understanding the Structure of Kubernetes clusters is important for DevOps engineers and developers managing cloud native applications. +But working with YAML files can be a challenging task specially when they get hard to visualize and make relations. +Meshery Playground along with its Kanvas extension offers a simple way to visualize cluster states by transforming YAML snapshots into clear, interactive diagrams + + + +## **The Challenge of Traditional Kubernetes Analysis** + +Traditionally To check a cluster’s state, engineers often rely on kubectl, the Kubernetes command-line tool, to query resources and inspect configurations. Using Commands like (get, describe, logs) to piece together a cluster’s state, each providing only a fragment of the picture each with a dense output. +Text-based outputs don’t show how resources connect, making it hard to visualize traffic flow or dependencies. +Sharing raw YAML or command outputs with teammates leads to miscommunication, as each person must interpret the text independently. +Combining outputs to diagnose and fix issues takes significant time, delaying production fixes. + +## **Why Use Meshery Playground and Kanvas?** + +The Meshery Playground is a hosted environment that provides pre-configured Kubernetes clusters, requiring no local setup (You can use it on cloud or have it native on your own server) +Kanvas, a Meshery extension, allows users to drag and drop YAML files to create visual representations of cluster resources, such as pods and services. Together, they help you: + +1. **See Cluster State Clearly:** + Turn YAML files into easy-to-read diagrams. +2. **Save Time:** + Identify issues like failed pods without parsing text. +3. **Work as a Team:** + Share visuals with your team and work together to align on cluster management. + + + +## **Understanding the Workflow: From YAML to Diagram** + +The process starts with a familiar Kubernetes tool: kubectl, the command-line interface for interacting with clusters. By running a command like the one below, you can create a YAML file that captures your cluster’s current state: + +``` +kubectl get all --all-namespaces -o yaml > cluster-dump.yaml +``` +This command collects details about resources like pods, services, and deployments across all namespaces and saves them in a file called cluster-dump.yaml. +This is a snapshot of your cluster, showing what’s running, how things are configured, and any issues (like a pod that keeps crashing). + + +With your YAML file ready, you can use Meshery Playground’s Kanvas to turn it into a visual diagram. You don’t need to install anything—simply visit [play.meshery.io](https://play.meshery.io), sign in with a free account, and access Kanvas. +From there, you drag the cluster-dump.yaml file onto the Kanvas canvas, and it instantly creates a diagram showing your resources as nodes and their connections/relations as lines. For example: a service might link to a pod if they share a label, helping you see how traffic flows. + +- **Nodes:** + Resources like pods, services, and deployments. +- **Edges:** + Connections, such as a service’s selector linking to a pod’s labels. +- **Statuses:** + Visual cues (e.g.: red for failing pods, green for running). + +You can interact with the diagram by clicking nodes to view details (e.g., error messages) or zooming to explore large clusters. Snapshots can be saved to your Meshery account or shared as URLs: + +``` +kubectl meshery snapshot -f cluster-dump.yaml +``` + +This process takes under 5 minutes, compared to 15–20 minutes with traditional methods. Kanvas’s snapshot highlights essentiald visually, guides fixes, reusability and collaboration. + + + +## **What else can Kanvas do?** + +- **CI/CD Integration** + Kanvas snapshots integrate with CI/CD pipelines, ensuring visual validation of cluster changes and preventing productin issues in future. +- **Cloud-Native Extensibility** + Kanvas supports service mesh configurations, like Istio VirtualServices, visualizing complex traffic rules. Diagram an Istio traffic split to optimize load balancing, ensuring smooth rollouts. Kanvas renders this as a traffic flow map, simplifying mesh management. + + +To explore Kanvas in more details checkout [Kanvas](https://layer5.io/cloud-native-management/kanvas) + diff --git a/src/collections/members/naman-verma/index.mdx b/src/collections/members/naman-verma/index.mdx new file mode 100644 index 0000000000000..151c1d1f4d902 --- /dev/null +++ b/src/collections/members/naman-verma/index.mdx @@ -0,0 +1,13 @@ +--- +name: Naman Verma +position: Contributor +image_path: ./naman-verma.jpeg +github: Namanv0509 +twitter: explorers_111 +linkedin: naman-verma-6948a72a5 +layer5: f6bedf26-411c-474b-89cb-3d7cf9f97ef2 +location: Silvassa, Dadra and Nagar Haveli, India +bio: Hi , I am Naman Verma an undergrad at IIIT Jabalpur. I have been learning about DevOPs and cloud native infrastructure , and loves to be a part of an open source community and contrubuting to it. +status: Active +published: true +--- diff --git a/src/collections/members/naman-verma/naman-verma.jpeg b/src/collections/members/naman-verma/naman-verma.jpeg new file mode 100644 index 0000000000000..a40d048cc156a Binary files /dev/null and b/src/collections/members/naman-verma/naman-verma.jpeg differ