# mjunhaochen/virtual-avatar-builder architecture

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

- Interactive diagram: https://gitdiagram.com/mjunhaochen/virtual-avatar-builder
- Repository: https://github.com/mjunhaochen/virtual-avatar-builder

## Overview

Virtual Avatar Builder is a client-side avatar customization app. Users choose features, see the composed avatar update, then optionally randomize or reset it and export the display as a PNG. The README also documents responsive presentation and clothing/hair variants; these are represented by the selector and renderer. The sampled page source establishes state ownership, rendering, and export calls. Other UI and responsive details are represented at their documented or exact tree paths; no server-side storage is evidenced.

Main entry points: [`src/pages/AvatarBuilderPage.tsx`](https://github.com/mjunhaochen/virtual-avatar-builder/blob/main/src/pages/AvatarBuilderPage.tsx) (Builder workflow), [`src/components/FeatureSelector.tsx`](https://github.com/mjunhaochen/virtual-avatar-builder/blob/main/src/components/FeatureSelector.tsx) (Feature selector), [`src/main.tsx`](https://github.com/mjunhaochen/virtual-avatar-builder/blob/main/src/main.tsx) (React mount), [`src/App.tsx`](https://github.com/mjunhaochen/virtual-avatar-builder/blob/main/src/App.tsx) (Routes and providers)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["App entry"]
  node_main["React mount<br/>[main.tsx]"]
  node_app_shell["Routes and providers<br/>[App.tsx]"]
end

subgraph group_customize["Avatar customization"]
  node_builder_page["Builder workflow"]
  node_selector["Feature selector"]
  node_feature_model["Feature options<br/>[avatar.ts]"]
  node_avatar_state["Current features"]
end

subgraph group_presentation["Avatar presentation"]
  node_avatar_display["Avatar renderer<br/>[AvatarDisplay.tsx]"]
end

subgraph group_export["Image export"]
  node_png_renderer["Canvas capture"]
  node_html2canvas["html2canvas"]
  node_download["Browser download"]
end

subgraph group_ui["UI support"]
  node_toast["Action feedback"]
  node_sonner["Toast UI<br/>[sonner.tsx]"]
  node_tabs["Tabs controls<br/>[tabs.tsx]"]
  node_buttons["Button controls<br/>[button.tsx]"]
  node_scroll_area["Scrollable options<br/>[scroll-area.tsx]"]
end

node_user(("Avatar creator"))

node_user -->|"opens app"| node_main
node_main -->|"mounts"| node_app_shell
node_app_shell -->|"routes to"| node_builder_page
node_user -->|"customizes"| node_builder_page
node_builder_page -->|"renders"| node_selector
node_builder_page -->|"updates"| node_avatar_state
node_builder_page -->|"reads options"| node_feature_model
node_selector -->|"reads options"| node_feature_model
node_selector -->|"selects feature"| node_builder_page
node_builder_page -->|"passes features"| node_avatar_display
node_user -->|"randomizes or resets"| node_builder_page
node_builder_page -->|"captures display"| node_png_renderer
node_png_renderer -->|"renders canvas"| node_html2canvas
node_png_renderer -->|"downloads PNG"| node_download
node_builder_page -->|"reports actions"| node_toast
node_toast -->|"shows feedback"| node_sonner
node_selector -->|"uses"| node_tabs
node_selector -->|"uses"| node_buttons
node_selector -->|"uses"| node_scroll_area

click node_main "https://github.com/mjunhaochen/virtual-avatar-builder/blob/main/src/main.tsx"
click node_app_shell "https://github.com/mjunhaochen/virtual-avatar-builder/blob/main/src/App.tsx"
click node_builder_page "https://github.com/mjunhaochen/virtual-avatar-builder/blob/main/src/pages/AvatarBuilderPage.tsx"
click node_selector "https://github.com/mjunhaochen/virtual-avatar-builder/blob/main/src/components/FeatureSelector.tsx"
click node_feature_model "https://github.com/mjunhaochen/virtual-avatar-builder/blob/main/src/types/avatar.ts"
click node_avatar_state "https://github.com/mjunhaochen/virtual-avatar-builder/blob/main/src/pages/AvatarBuilderPage.tsx"
click node_avatar_display "https://github.com/mjunhaochen/virtual-avatar-builder/blob/main/src/components/AvatarDisplay.tsx"
click node_png_renderer "https://github.com/mjunhaochen/virtual-avatar-builder/blob/main/src/pages/AvatarBuilderPage.tsx"
click node_toast "https://github.com/mjunhaochen/virtual-avatar-builder/blob/main/src/pages/AvatarBuilderPage.tsx"
click node_sonner "https://github.com/mjunhaochen/virtual-avatar-builder/blob/main/src/components/ui/sonner.tsx"
click node_tabs "https://github.com/mjunhaochen/virtual-avatar-builder/blob/main/src/components/ui/tabs.tsx"
click node_buttons "https://github.com/mjunhaochen/virtual-avatar-builder/blob/main/src/components/ui/button.tsx"
click node_scroll_area "https://github.com/mjunhaochen/virtual-avatar-builder/blob/main/src/components/ui/scroll-area.tsx"

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_main,node_app_shell toneBlue
class node_builder_page,node_selector,node_feature_model,node_avatar_state toneAmber
class node_avatar_display toneMint
class node_png_renderer,node_html2canvas,node_download toneRose
class node_toast,node_sonner,node_tabs,node_buttons,node_scroll_area,node_user toneIndigo
```

## Components

### App entry

- [React mount](https://github.com/mjunhaochen/virtual-avatar-builder/blob/main/src/main.tsx): `src/main.tsx`
- [Routes and providers](https://github.com/mjunhaochen/virtual-avatar-builder/blob/main/src/App.tsx): `src/App.tsx`

### Avatar customization

- [Builder workflow](https://github.com/mjunhaochen/virtual-avatar-builder/blob/main/src/pages/AvatarBuilderPage.tsx): `src/pages/AvatarBuilderPage.tsx`
- [Feature selector](https://github.com/mjunhaochen/virtual-avatar-builder/blob/main/src/components/FeatureSelector.tsx): `src/components/FeatureSelector.tsx`
- [Feature options](https://github.com/mjunhaochen/virtual-avatar-builder/blob/main/src/types/avatar.ts): `src/types/avatar.ts`
- [Current features](https://github.com/mjunhaochen/virtual-avatar-builder/blob/main/src/pages/AvatarBuilderPage.tsx): `src/pages/AvatarBuilderPage.tsx`

### Avatar presentation

- [Avatar renderer](https://github.com/mjunhaochen/virtual-avatar-builder/blob/main/src/components/AvatarDisplay.tsx): `src/components/AvatarDisplay.tsx`

### Image export

- [Canvas capture](https://github.com/mjunhaochen/virtual-avatar-builder/blob/main/src/pages/AvatarBuilderPage.tsx): `src/pages/AvatarBuilderPage.tsx`
- **html2canvas**
- **Browser download**

### UI support

- [Action feedback](https://github.com/mjunhaochen/virtual-avatar-builder/blob/main/src/pages/AvatarBuilderPage.tsx): `src/pages/AvatarBuilderPage.tsx`
- [Toast UI](https://github.com/mjunhaochen/virtual-avatar-builder/blob/main/src/components/ui/sonner.tsx): `src/components/ui/sonner.tsx`
- [Tabs controls](https://github.com/mjunhaochen/virtual-avatar-builder/blob/main/src/components/ui/tabs.tsx): `src/components/ui/tabs.tsx`
- [Button controls](https://github.com/mjunhaochen/virtual-avatar-builder/blob/main/src/components/ui/button.tsx): `src/components/ui/button.tsx`
- [Scrollable options](https://github.com/mjunhaochen/virtual-avatar-builder/blob/main/src/components/ui/scroll-area.tsx): `src/components/ui/scroll-area.tsx`

### Other components

- **Avatar creator**

## Connections

- Avatar creator → React mount: opens app
- React mount → Routes and providers: mounts
- Routes and providers → Builder workflow: routes to
- Avatar creator → Builder workflow: customizes
- Builder workflow → Feature selector: renders
- Builder workflow → Current features: updates
- Builder workflow → Feature options: reads options
- Feature selector → Feature options: reads options
- Feature selector → Builder workflow: selects feature
- Builder workflow → Avatar renderer: passes features
- Avatar creator → Builder workflow: randomizes or resets
- Builder workflow → Canvas capture: captures display
- Canvas capture → html2canvas: renders canvas
- Canvas capture → Browser download: downloads PNG
- Builder workflow → Action feedback: reports actions
- Action feedback → Toast UI: shows feedback
- Feature selector → Tabs controls: uses
- Feature selector → Button controls: uses
- Feature selector → Scrollable options: uses