Swagger API Visualizer

A modern, interactive React-based tool for visualizing Swagger/OpenAPI specifications as hierarchical tree structures. This tool supports both standard Swagger format and custom categorized JSON structures for organized API documentation.

🚀 Features

• Hierarchical Visualization: Clean tree structure showing API → Categories → Sub-categories → Endpoints
• Interactive Tree Navigation: Click to expand/collapse categories and sub-categories
• Multiple Format Support:
  • Standard Swagger/OpenAPI JSON format
  • Custom categorized JSON format with categories and sub-categories
• Visual Indicators:
  • Color-coded HTTP methods (GET, POST, PUT, DELETE, etc.)
  • Expandable/collapsible nodes with visual feedback
  • Tooltips with endpoint details
• Zoom & Pan: Built-in controls for navigating large API structures
• Responsive Design: Clean, modern interface that works on different screen sizes

📋 Supported JSON Structures

Standard Swagger Format

{
  "openapi": "3.0.1",
  "info": {
    "title": "My API",
    "version": "1.0.0"
  },
  "paths": {
    "/users": {
      "get": {
        "tags": ["User Management"],
        "summary": "Get all users"
      }
    }
  }
}

Custom Categorized Format

{
  "openapi": "3.0.1",
  "info": {
    "title": "My API",
    "version": "1.0.0"
  },
  "paths": {
    "categories": {
      "Authentication Endpoints": {
        "Login Endpoints": {
          "/v1/api/Auth/LoginAdmin": {
            "post": {
              "tags": ["Auth"],
              "summary": "Admin login"
            }
          }
        }
      }
    }
  }
}

🛠️ Installation

1. Clone the repository

   git clone <repository-url>
   cd swagger_visualizer

2. Install dependencies

   npm install

3. Start the development server

   npm run dev

4. Open your browser Navigate to http://localhost:5173

💻 Usage

Loading Your API Specification

1. Upload JSON File: Click the "Upload JSON" button and select your Swagger/OpenAPI JSON file
2. Paste JSON: Copy and paste your JSON content directly into the textarea
3. Load Sample: Use the "Load Sample" button to see the visualizer in action

Navigation

• Expand/Collapse: Click on category or sub-category nodes (colored circles with +/- indicators)
• Zoom Controls: Use the zoom in/out buttons in the top-right corner
• Reset View: Click the reset button to return to the original view
• Pan: Click and drag to move around the visualization

Visual Legend

• 🔵 API Root (Gray): The main API node
• 🔵 Categories (Blue): Primary groupings of endpoints
• 🟣 Sub-categories (Purple): Secondary groupings within categories
• 🟢 Endpoints (Color-coded by HTTP method):
  • 🟢 GET (Green)
  • 🔵 POST (Blue)
  • 🟡 PUT (Yellow)
  • 🔴 DELETE (Red)

🏗️ Project Structure

swagger_visualizer/
├── src/
│   ├── components/
│   │   ├── HierarchyChart.tsx    # Main visualization component
│   │   ├── chart.css             # Styling for the chart
│   │   └── swagger - Copy.json   # Sample categorized JSON file
│   ├── App.tsx                   # Main application component
│   └── main.tsx                  # Application entry point
├── package.json
└── README.md

🔧 Technical Stack

• React 19: Modern React with hooks
• TypeScript: Type-safe development
• D3.js: Powerful data visualization library
• Vite: Fast build tool and dev server
• Lucide React: Beautiful icons
• Tailwind CSS: Utility-first CSS framework

🎨 Customization

Adding New Node Types

To add support for additional node types, modify the following sections in HierarchyChart.tsx:

1. Node Type Detection (in createTreeData)
2. Visual Styling (in the D3 visualization code)
3. Click Handlers (for expand/collapse functionality)
4. Legend (to show the new node type)

Styling

The visualization uses a combination of:

• CSS classes in chart.css
• Inline D3 styling
• Tailwind CSS utilities

📊 Data Flow

1. JSON Input → Parse and validate JSON structure
2. Data Processing → Transform into hierarchical tree structure
3. Tree Generation → Create D3 hierarchy with proper node types
4. Visualization → Render interactive SVG with expand/collapse functionality
5. User Interaction → Handle clicks, zoom, and pan operations

🐛 Troubleshooting

Common Issues

1. JSON Not Loading: Ensure your JSON is valid and follows one of the supported formats
2. Visualization Not Appearing: Check browser console for errors
3. Performance Issues: Large APIs may require optimization - consider filtering or pagination

Development Commands

# Start development server
npm run dev

# Build for production
npm run build

# Run linter
npm run lint

# Preview production build
npm run preview

📝 Contributing

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

📄 License

This project is open source and available under the MIT License.

🤝 Support

For questions, issues, or contributions, please open an issue on the GitHub repository.

---

Made with ❤️ for API developers and documentation enthusiasts