Overview

GitDiagram is a web application designed to automatically generate interactive system design or architecture diagrams from GitHub repositories. Users provide a repository URL, and the application analyzes its structure and README file to produce a Mermaid.js diagram.

The system comprises two main parts:

  1. Frontend: A Next.js application responsible for the user interface, handling user input, displaying diagrams, and managing interactions.

  2. Backend: A FastAPI application that orchestrates the diagram generation process. It interacts with the GitHub API to fetch repository data and uses Large Language Models (LLMs) via OpenAI's API to analyze the data and generate the Mermaid diagram code.

Technology Stack

  • Frontend: Next.js, React, TypeScript, Tailwind CSS, ShadCN UI, Mermaid.js, PostHog (Analytics)

  • Backend: FastAPI, Python, OpenAI (o3-mini), Docker, Nginx

  • Database: PostgreSQL (with Drizzle ORM) for caching generated diagrams.

  • Deployment: Vercel (Frontend), AWS EC2 (Backend)

  • CI/CD: GitHub Actions

High-Level Architecture

External Services

Backend Infrastructure (EC2)

User Browser

HTTPS Request

HTTP

API Call

API Call

DB Query

API Call

API Call

Frontend - Next.js/React

Nginx Reverse Proxy

Backend API - FastAPI

GitHub Service

LLM Service - OpenAI o3-mini

DB Cache - PostgreSQL

GitHub API

OpenAI API