# m-yazidxx/acoustic-guitar-strum architecture

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

- Interactive diagram: https://gitdiagram.com/m-yazidxx/acoustic-guitar-strum
- Repository: https://github.com/m-yazidxx/acoustic-guitar-strum

## Overview

Acoustic Strum Studio is a browser-based guitar performance workstation. A user configures song sections, starts performance mode, then switches sections or uses automatic strumming while adjusting sound controls. The app builds an audio graph and loads an acoustic-guitar instrument; it can also record that graph’s output and expose a recording for download. The README is a generic React/Vite template and documents no additional product capabilities. The sampled excerpts establish these runtime features, but omit portions of the component logic, so uncertain scheduling and control details are not mapped.

Main entry points: [`src/App.jsx`](https://github.com/m-yazidxx/acoustic-guitar-strum/blob/main/src/App.jsx) (Studio UI), [`src/main.jsx`](https://github.com/m-yazidxx/acoustic-guitar-strum/blob/main/src/main.jsx) (React entry)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_ui["Studio interface"]
  node_entry["React entry<br/>[main.jsx]"]
  node_studio["Studio UI<br/>[App.jsx]"]
end

subgraph group_performance["Performance logic"]
  node_sections["Song sections<br/>[App.jsx]"]
  node_strumming["Strum controls<br/>[App.jsx]"]
  node_voicings["Chord voicings<br/>[App.jsx]"]
end

subgraph group_audio["Audio and recording"]
  node_audioengine["Audio graph<br/>[App.jsx]"]
  node_instrument["Guitar instrument<br/>[App.jsx]"]
  node_soundfont["Soundfont player"]
  node_browseraudio["Web Audio"]
  node_capture["Recording capture<br/>[App.jsx]"]
  node_mediarecorder["MediaRecorder API"]
  node_recording["Audio recording"]
end

node_user(("Performer"))

node_entry -->|"renders"| node_studio
node_user -->|"configures and plays"| node_studio
node_studio -->|"sets and switches"| node_sections
node_studio -->|"controls"| node_strumming
node_strumming -->|"selects chords"| node_voicings
node_strumming -->|"triggers sound"| node_audioengine
node_studio -->|"sets audio controls"| node_audioengine
node_audioengine -->|"routes audio"| node_instrument
node_instrument -->|"loads instrument"| node_soundfont
node_audioengine -->|"uses audio context"| node_browseraudio
node_studio -->|"toggles recording"| node_capture
node_capture -->|"records stream"| node_mediarecorder
node_capture -->|"creates download"| node_recording
node_audioengine -->|"provides stream"| node_capture

click node_entry "https://github.com/m-yazidxx/acoustic-guitar-strum/blob/main/src/main.jsx"
click node_studio "https://github.com/m-yazidxx/acoustic-guitar-strum/blob/main/src/App.jsx"
click node_sections "https://github.com/m-yazidxx/acoustic-guitar-strum/blob/main/src/App.jsx"
click node_strumming "https://github.com/m-yazidxx/acoustic-guitar-strum/blob/main/src/App.jsx"
click node_voicings "https://github.com/m-yazidxx/acoustic-guitar-strum/blob/main/src/App.jsx"
click node_audioengine "https://github.com/m-yazidxx/acoustic-guitar-strum/blob/main/src/App.jsx"
click node_instrument "https://github.com/m-yazidxx/acoustic-guitar-strum/blob/main/src/App.jsx"
click node_capture "https://github.com/m-yazidxx/acoustic-guitar-strum/blob/main/src/App.jsx"

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_entry,node_studio toneBlue
class node_sections,node_strumming,node_voicings toneAmber
class node_audioengine,node_instrument,node_soundfont,node_browseraudio,node_capture,node_mediarecorder,node_recording toneMint
class node_user toneIndigo
```

## Components

### Studio interface

- [React entry](https://github.com/m-yazidxx/acoustic-guitar-strum/blob/main/src/main.jsx): `src/main.jsx`
- [Studio UI](https://github.com/m-yazidxx/acoustic-guitar-strum/blob/main/src/App.jsx): `src/App.jsx`

### Performance logic

- [Song sections](https://github.com/m-yazidxx/acoustic-guitar-strum/blob/main/src/App.jsx): `src/App.jsx`
- [Strum controls](https://github.com/m-yazidxx/acoustic-guitar-strum/blob/main/src/App.jsx): `src/App.jsx`
- [Chord voicings](https://github.com/m-yazidxx/acoustic-guitar-strum/blob/main/src/App.jsx): `src/App.jsx`

### Audio and recording

- [Audio graph](https://github.com/m-yazidxx/acoustic-guitar-strum/blob/main/src/App.jsx): `src/App.jsx`
- [Guitar instrument](https://github.com/m-yazidxx/acoustic-guitar-strum/blob/main/src/App.jsx): `src/App.jsx`
- **Soundfont player**
- **Web Audio**
- [Recording capture](https://github.com/m-yazidxx/acoustic-guitar-strum/blob/main/src/App.jsx): `src/App.jsx`
- **MediaRecorder API**
- **Audio recording**

### Other components

- **Performer**

## Connections

- React entry → Studio UI: renders
- Performer → Studio UI: configures and plays
- Studio UI → Song sections: sets and switches
- Studio UI → Strum controls: controls
- Strum controls → Chord voicings: selects chords
- Strum controls → Audio graph: triggers sound
- Studio UI → Audio graph: sets audio controls
- Audio graph → Guitar instrument: routes audio
- Guitar instrument → Soundfont player: loads instrument
- Audio graph → Web Audio: uses audio context
- Studio UI → Recording capture: toggles recording
- Recording capture → MediaRecorder API: records stream
- Recording capture → Audio recording: creates download
- Audio graph → Recording capture: provides stream