Angular Codebase Visualizer

A web application for visualizing and understanding complex Angular codebases through interactive node-link diagrams.

Features

• Create, view, edit, and delete nodes representing different types of classes and conditions
• Connect nodes with various relationship types (extends, uses, injects, conditions)
• Interactive diagram manipulation using React Flow
• Data persistence using SQLite database

Node Types

• Component
• Service
• Widget (custom type)
• SDK (custom type)
• Other
• Condition (special type for logical conditions)

Connection Types

• Extends (class inheritance)
• Uses (general usage)
• Injects (Angular dependency injection)
• Condition (logical flow)

Setup

Frontend

1. Install dependencies:

npm install

2. Start the development server:

npm run dev

Backend

1. Navigate to the backend directory:

cd backend

2. Install dependencies:

npm install

3. Start the development server:

npm run dev

Tech Stack

• Frontend:

  • React with TypeScript
  • Vite
  • React Flow (for diagrams)
  • Material-UI (for UI components)

• Backend:

  • Node.js with Express
  • TypeScript
  • SQLite (for data persistence)

Development

The application is structured as follows:

• /src - Frontend React application

  • /components - React components
  • /App.tsx - Main application component

• /backend - Node.js backend

  • server.ts - Express server and API endpoints
  • database.ts - Database configuration and models