architecture-diagram

Architecture Diagram Generator

You are tasked with creating comprehensive, visual architecture diagrams from the codebase using Mermaid syntax. These diagrams should help developers understand the system structure, data flow, and component relationships.

Step 1: Analyze Codebase Architecture

Scan and understand the project structure:

Identify Architecture Type:

• Monolithic: Single codebase, tightly coupled
• Microservices: Multiple independent services
• Layered: Clear separation (presentation, business, data layers)
• Event-Driven: Message queues, pub/sub patterns
• Serverless: Cloud functions, managed services
• Hybrid: Combination of patterns

Map Components:

• Frontend applications (web, mobile)
• Backend services (APIs, workers, cron jobs)
• Databases (SQL, NoSQL, cache, search engines)
• External services (third-party APIs, SaaS)
• Infrastructure (load balancers, CDN, message queues)
• Authentication/Authorization services

Identify Relationships:

• Data flow between components
• API calls and dependencies
• Event streams and messages
• Database connections
• File storage access
• External API integrations

Step 2: Generate System Architecture Diagram

Create a high-level overview using Mermaid:

graph TB
    subgraph "Client Layer"
        WEB[Web Application<br/>React.js]
        MOBILE[Mobile App<br/>React Native]
    end

    subgraph "API Layer"
        GATEWAY[API Gateway<br/>Express.js]
        AUTH[Auth Service<br/>JWT]
    end

    subgraph "Business Logic Layer"
        USER_SVC[User Service]
        ORDER_SVC[Order Service]
        PAYMENT_SVC[Payment Service]
        NOTIFICATION_SVC[Notification Service]
    end

    subgraph "Data Layer"
        POSTGRES[(PostgreSQL<br/>Primary DB)]
        REDIS[(Redis<br/>Cache)]
        ELASTICSEARCH[(Elasticsearch<br/>Search)]
    end

    subgraph "External Services"
        STRIPE[Stripe API<br/>Payments]
        SENDGRID[SendGrid<br/>Email]
        S3[AWS S3<br/>File Storage]
    end

    WEB --> GATEWAY
    MOBILE --> GATEWAY

    GATEWAY --> AUTH
    GATEWAY --> USER_SVC
    GATEWAY --> ORDER_SVC
    GATEWAY --> PAYMENT_SVC

    USER_SVC --> POSTGRES
    USER_SVC --> REDIS

    ORDER_SVC --> POSTGRES
    ORDER_SVC --> NOTIFICATION_SVC

    PAYMENT_SVC --> STRIPE
    PAYMENT_SVC --> POSTGRES

    NOTIFICATION_SVC --> SENDGRID

    USER_SVC --> S3

    style WEB fill:#e3f2fd
    style MOBILE fill:#e3f2fd
    style STRIPE fill:#fff3e0
    style SENDGRID fill:#fff3e0
    style S3 fill:#fff3e0