# zelvarys/github-analytics architecture

> Architecture diagram of the GitHub repository zelvarys/github-analytics, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-29). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/zelvarys/github-analytics
- Repository: https://github.com/zelvarys/github-analytics

## Overview

GitHub Analytics serves customizable SVG profile cards and also offers a web configurator for previewing and copying embed markup. The documented flow is username and card options → GitHub data retrieval and metric derivation → themed SVG generation → image response for a README embed. The sampled API, data, theme, and rendering modules support those connections; the page excerpt confirms a browser preview workflow, but omits enough code to establish its exact request wiring.

Main entry points: [`src/app/api/route.ts`](https://github.com/zelvarys/github-analytics/blob/main/src/app/api/route.ts) (SVG endpoint), [`src/app/page.tsx`](https://github.com/zelvarys/github-analytics/blob/main/src/app/page.tsx) (Card configurator), [`src/lib/github.ts`](https://github.com/zelvarys/github-analytics/blob/main/src/lib/github.ts) (Stats retrieval), [`src/lib/generator.ts`](https://github.com/zelvarys/github-analytics/blob/main/src/lib/generator.ts) (Card composition)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_web["Web experience"]
  node_home["Card configurator<br/>[page.tsx]"]
  node_layout["App shell<br/>[layout.tsx]"]
end

subgraph group_api["Card API"]
  node_endpoint["SVG endpoint<br/>[route.ts]"]
end

subgraph group_data["GitHub data"]
  node_stats["Stats retrieval<br/>[github.ts]"]
  node_types["Stats model<br/>[index.ts]"]
end

subgraph group_render["SVG rendering"]
  node_theme["Theme selection<br/>[themes.ts]"]
  node_generator["Card composition<br/>[generator.ts]"]
  node_svgutils["SVG utilities<br/>[svg-utils.ts]"]
end

node_profile_author(("Profile author"))
node_browser_user(("Configurator user"))
node_github["GitHub GraphQL"]
node_readme["Profile README"]

node_browser_user -->|"configures"| node_home
node_profile_author -->|"requests card"| node_endpoint
node_home -.->|"previews card"| node_endpoint
node_endpoint -->|"fetches stats"| node_stats
node_stats -->|"queries profile"| node_github
node_stats -->|"returns stats"| node_types
node_endpoint -->|"selects theme"| node_theme
node_endpoint -->|"generates SVG"| node_generator
node_generator -->|"renders assets"| node_svgutils
node_generator -->|"uses stats model"| node_types
node_theme -->|"uses color model"| node_types
node_endpoint -->|"serves SVG for embed"| node_readme
node_home -->|"offers embed markup"| node_readme

click node_home "https://github.com/zelvarys/github-analytics/blob/main/src/app/page.tsx"
click node_layout "https://github.com/zelvarys/github-analytics/blob/main/src/app/layout.tsx"
click node_endpoint "https://github.com/zelvarys/github-analytics/blob/main/src/app/api/route.ts"
click node_stats "https://github.com/zelvarys/github-analytics/blob/main/src/lib/github.ts"
click node_types "https://github.com/zelvarys/github-analytics/blob/main/src/types/index.ts"
click node_theme "https://github.com/zelvarys/github-analytics/blob/main/src/lib/themes.ts"
click node_generator "https://github.com/zelvarys/github-analytics/blob/main/src/lib/generator.ts"
click node_svgutils "https://github.com/zelvarys/github-analytics/blob/main/src/lib/svg-utils.ts"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_home,node_layout,node_browser_user toneBlue
class node_endpoint toneAmber
class node_stats,node_types toneMint
class node_theme,node_generator,node_svgutils toneRose
class node_profile_author,node_github,node_readme toneIndigo
```

## Components

### Web experience

- [Card configurator](https://github.com/zelvarys/github-analytics/blob/main/src/app/page.tsx): `src/app/page.tsx`
- [App shell](https://github.com/zelvarys/github-analytics/blob/main/src/app/layout.tsx): `src/app/layout.tsx`

### Card API

- [SVG endpoint](https://github.com/zelvarys/github-analytics/blob/main/src/app/api/route.ts): `src/app/api/route.ts`

### GitHub data

- [Stats retrieval](https://github.com/zelvarys/github-analytics/blob/main/src/lib/github.ts): `src/lib/github.ts`
- [Stats model](https://github.com/zelvarys/github-analytics/blob/main/src/types/index.ts): `src/types/index.ts`

### SVG rendering

- [Theme selection](https://github.com/zelvarys/github-analytics/blob/main/src/lib/themes.ts): `src/lib/themes.ts`
- [Card composition](https://github.com/zelvarys/github-analytics/blob/main/src/lib/generator.ts): `src/lib/generator.ts`
- [SVG utilities](https://github.com/zelvarys/github-analytics/blob/main/src/lib/svg-utils.ts): `src/lib/svg-utils.ts`

### Other components

- **Profile author**
- **Configurator user**
- **GitHub GraphQL**
- **Profile README**

## Connections

- Configurator user → Card configurator: configures
- Profile author → SVG endpoint: requests card
- Card configurator → SVG endpoint: previews card
- SVG endpoint → Stats retrieval: fetches stats
- Stats retrieval → GitHub GraphQL: queries profile
- Stats retrieval → Stats model: returns stats
- SVG endpoint → Theme selection: selects theme
- SVG endpoint → Card composition: generates SVG
- Card composition → SVG utilities: renders assets
- Card composition → Stats model: uses stats model
- Theme selection → Stats model: uses color model
- SVG endpoint → Profile README: serves SVG for embed
- Card configurator → Profile README: offers embed markup