# vyk2rr/five-strings-guitar architecture

> Architecture diagram of the GitHub repository vyk2rr/five-strings-guitar, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-10-01). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/vyk2rr/five-strings-guitar
- Repository: https://github.com/vyk2rr/five-strings-guitar

## Overview

This is a browser-based music tool for choosing a root and chord, then comparing its voicing on a piano and five-string guitar. The main path runs from the app’s chord palette through chord generation and voicing into both visualizations; the piano also provides note highlighting and Tone.js playback. The README supplied no capability detail, so the map follows the sampled app and source index; some component internals and the ChordPalette component’s runtime use were not shown.

Main entry points: [`src/App.tsx`](https://github.com/vyk2rr/five-strings-guitar/blob/main/src/App.tsx) (Music workspace), [`src/PianoBase/PianoBase.tsx`](https://github.com/vyk2rr/five-strings-guitar/blob/main/src/PianoBase/PianoBase.tsx) (Piano view), [`src/PianoBase/PianoBase.types.ts`](https://github.com/vyk2rr/five-strings-guitar/blob/main/src/PianoBase/PianoBase.types.ts) (Music types), [`src/FiveStringsGuitar/FiveStringsGuitar.tsx`](https://github.com/vyk2rr/five-strings-guitar/blob/main/src/FiveStringsGuitar/FiveStringsGuitar.tsx) (Five-string guitar)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["App orchestration"]
  node_entry["React entry<br/>[main.tsx]"]
  node_app["Music workspace<br/>[App.tsx]"]
end

subgraph group_visuals["Instrument views"]
  node_palette["Chord palette UI<br/>[ChordPalette.tsx]"]
  node_piano["Piano view<br/>[PianoBase.tsx]"]
  node_guitar["Five-string guitar"]
end

subgraph group_music["Music logic"]
  node_chordlogic["Chord generation"]
  node_voicing["Voicing spread"]
  node_pianologic["Piano geometry<br/>[PianoBase.utils.ts]"]
  node_models["Music types<br/>[PianoBase.types.ts]"]
end

subgraph group_runtime["Interaction and audio"]
  node_highlight["Note highlighting<br/>[useHighlight.ts]"]
  node_tonehook["Tone playback<br/>[useToneJs.tsx]"]
  node_observer["Piano observer<br/>[PianoObserver.ts]"]
end

node_user(("Musician"))
node_tone["Tone.js engine"]

node_user -->|"selects chords"| node_app
node_entry -->|"renders"| node_app
node_app -->|"generates chords"| node_chordlogic
node_app -->|"spreads voicing"| node_voicing
node_app -->|"renders highlights"| node_piano
node_app -->|"renders voicing"| node_guitar
node_guitar -->|"reports unassigned"| node_app
node_app -.->|"not shown"| node_palette
node_palette -->|"uses utilities"| node_chordlogic
node_piano -->|"uses geometry"| node_pianologic
node_piano -->|"tracks highlights"| node_highlight
node_piano -->|"delegates playback"| node_tonehook
node_tonehook -->|"plays audio"| node_tone
node_piano -.->|"accepts observer"| node_observer
node_app -->|"uses chord types"| node_models
node_piano -->|"uses piano types"| node_models
node_guitar -->|"uses chord types"| node_models
node_chordlogic -->|"uses chord intervals"| node_models
node_voicing -->|"uses chord types"| node_models

click node_entry "https://github.com/vyk2rr/five-strings-guitar/blob/main/src/main.tsx"
click node_app "https://github.com/vyk2rr/five-strings-guitar/blob/main/src/App.tsx"
click node_palette "https://github.com/vyk2rr/five-strings-guitar/blob/main/src/ChordPalette/ChordPalette.tsx"
click node_piano "https://github.com/vyk2rr/five-strings-guitar/blob/main/src/PianoBase/PianoBase.tsx"
click node_guitar "https://github.com/vyk2rr/five-strings-guitar/blob/main/src/FiveStringsGuitar/FiveStringsGuitar.tsx"
click node_chordlogic "https://github.com/vyk2rr/five-strings-guitar/blob/main/src/ChordPalette/ChordPalette.utils.tsx"
click node_voicing "https://github.com/vyk2rr/five-strings-guitar/blob/main/src/FiveStringsGuitar/FiveStringsGuitar.utils.tsx"
click node_pianologic "https://github.com/vyk2rr/five-strings-guitar/blob/main/src/PianoBase/PianoBase.utils.ts"
click node_models "https://github.com/vyk2rr/five-strings-guitar/blob/main/src/PianoBase/PianoBase.types.ts"
click node_highlight "https://github.com/vyk2rr/five-strings-guitar/blob/main/src/hooks/useHighlight/useHighlight.ts"
click node_tonehook "https://github.com/vyk2rr/five-strings-guitar/blob/main/src/hooks/useToneJs/useToneJs.tsx"
click node_observer "https://github.com/vyk2rr/five-strings-guitar/blob/main/src/PianoObserver/PianoObserver.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_entry,node_app toneBlue
class node_palette,node_piano,node_guitar toneAmber
class node_chordlogic,node_voicing,node_pianologic,node_models toneMint
class node_highlight,node_tonehook,node_observer toneRose
class node_user,node_tone toneIndigo
```

## Components

### App orchestration

- [React entry](https://github.com/vyk2rr/five-strings-guitar/blob/main/src/main.tsx): `src/main.tsx`
- [Music workspace](https://github.com/vyk2rr/five-strings-guitar/blob/main/src/App.tsx): `src/App.tsx`

### Instrument views

- [Chord palette UI](https://github.com/vyk2rr/five-strings-guitar/blob/main/src/ChordPalette/ChordPalette.tsx): `src/ChordPalette/ChordPalette.tsx`
- [Piano view](https://github.com/vyk2rr/five-strings-guitar/blob/main/src/PianoBase/PianoBase.tsx): `src/PianoBase/PianoBase.tsx`
- [Five-string guitar](https://github.com/vyk2rr/five-strings-guitar/blob/main/src/FiveStringsGuitar/FiveStringsGuitar.tsx): `src/FiveStringsGuitar/FiveStringsGuitar.tsx`

### Music logic

- [Chord generation](https://github.com/vyk2rr/five-strings-guitar/blob/main/src/ChordPalette/ChordPalette.utils.tsx): `src/ChordPalette/ChordPalette.utils.tsx`
- [Voicing spread](https://github.com/vyk2rr/five-strings-guitar/blob/main/src/FiveStringsGuitar/FiveStringsGuitar.utils.tsx): `src/FiveStringsGuitar/FiveStringsGuitar.utils.tsx`
- [Piano geometry](https://github.com/vyk2rr/five-strings-guitar/blob/main/src/PianoBase/PianoBase.utils.ts): `src/PianoBase/PianoBase.utils.ts`
- [Music types](https://github.com/vyk2rr/five-strings-guitar/blob/main/src/PianoBase/PianoBase.types.ts): `src/PianoBase/PianoBase.types.ts`

### Interaction and audio

- [Note highlighting](https://github.com/vyk2rr/five-strings-guitar/blob/main/src/hooks/useHighlight/useHighlight.ts): `src/hooks/useHighlight/useHighlight.ts`
- [Tone playback](https://github.com/vyk2rr/five-strings-guitar/blob/main/src/hooks/useToneJs/useToneJs.tsx): `src/hooks/useToneJs/useToneJs.tsx`
- [Piano observer](https://github.com/vyk2rr/five-strings-guitar/blob/main/src/PianoObserver/PianoObserver.ts): `src/PianoObserver/PianoObserver.ts`

### Other components

- **Musician**
- **Tone.js engine**

## Connections

- Musician → Music workspace: selects chords (evidence: `src/App.tsx`)
- React entry → Music workspace: renders (evidence: `src/main.tsx`)
- Music workspace → Chord generation: generates chords (evidence: `src/App.tsx`)
- Music workspace → Voicing spread: spreads voicing (evidence: `src/App.tsx`)
- Music workspace → Piano view: renders highlights (evidence: `src/App.tsx`)
- Music workspace → Five-string guitar: renders voicing (evidence: `src/App.tsx`)
- Five-string guitar → Music workspace: reports unassigned (evidence: `src/FiveStringsGuitar/FiveStringsGuitar.tsx`)
- Music workspace → Chord palette UI: not shown
- Chord palette UI → Chord generation: uses utilities (evidence: `src/ChordPalette/ChordPalette.tsx`)
- Piano view → Piano geometry: uses geometry (evidence: `src/PianoBase/PianoBase.tsx`)
- Piano view → Note highlighting: tracks highlights (evidence: `src/PianoBase/PianoBase.tsx`)
- Piano view → Tone playback: delegates playback (evidence: `src/PianoBase/PianoBase.tsx`)
- Tone playback → Tone.js engine: plays audio (evidence: `src/hooks/useToneJs/useToneJs.tsx`)
- Piano view → Piano observer: accepts observer (evidence: `src/PianoBase/PianoBase.tsx`)
- Music workspace → Music types: uses chord types (evidence: `src/App.tsx`)
- Piano view → Music types: uses piano types (evidence: `src/PianoBase/PianoBase.tsx`)
- Five-string guitar → Music types: uses chord types (evidence: `src/FiveStringsGuitar/FiveStringsGuitar.tsx`)
- Chord generation → Music types: uses chord intervals (evidence: `src/ChordPalette/ChordPalette.utils.tsx`)
- Voicing spread → Music types: uses chord types (evidence: `src/FiveStringsGuitar/FiveStringsGuitar.utils.tsx`)