Kubernetes CRD Visualizer

A modern web application for visualizing and managing Kubernetes Custom Resource Definitions (CRDs) and their relationships.

Table of Contents

• Features
• Getting Started
  • Prerequisites
  • Installation
  • Configuration
• Usage
  • Connecting to a Cluster
  • Using Mock Mode
  • Visualizing CRDs
  • Using the Graph View
  • Managing Missing Dependencies
  • Using the List View
  • Using the Raw Data View
  • Schema Mapping
  • Searching Resources
  • Downloading Resources
• Technical Implementation
• Project Structure
• Key Components
• Advanced Features
• Performance Optimization
• Troubleshooting
• Deployment
• Roadmap
• Contributing
• License
• Acknowledgments

Features

• 📊 Interactive Graph View: Visualize CRDs and their relationships in an interactive graph
• 📋 List View: Browse CRDs and custom resources in a structured list
• 🔍 Search Functionality: Find resources by name, field values, or dependencies
• 🔄 Cross-Cluster Visualization: View and manage resources across multiple clusters
• 🔗 Relationship Mapping: Define and visualize relationships between different resource types
• 🚨 Dependency Tracking: Highlight resources with missing dependencies
• 📥 Download Resources: Export resources as YAML files
• 🌓 Dark/Light Mode: Support for both dark and light themes

Getting Started

Prerequisites

1. Node.js: Install Node.js 18.x or later

   # Check your Node.js version
   node --version
   
   # If you need to install or update Node.js, visit https://nodejs.org/

2. Package Manager: This project uses pnpm

   # Install pnpm if you haven't already
   npm install -g pnpm

Installation

1. Clone the repository:

   git clone https://github.com/yourusername/crd-visualize.git
   cd crd-visualize

2. Install dependencies:

   pnpm install

3. Start the development server:

   pnpm dev

4. Open your browser and navigate to http://localhost:3000

Configuration

The application can be configured through environment variables or the configuration file:

1. Create a .env.local file in the root directory:

   NEXT_PUBLIC_API_URL=your_api_url

Basic Usage

1. Connect to a Cluster:

   • Use the cluster selector in the top navigation to choose your Kubernetes cluster
   • Or use mock mode for testing without a live cluster

2. Browse CRDs:

   • Navigate to the CRD browser to see all available Custom Resource Definitions
   • Use the search functionality to filter CRDs
   • Click on any CRD to view its details and relationships

3. Visualize Relationships:

   • Switch to the Graph View to see CRD relationships
   • Drag nodes to rearrange the visualization
   • Zoom in/out to focus on specific areas

4. Export Resources:

   • Select resources you want to export
   • Click the Download button to get YAML files