# arseniy-sk/crosshair-studio architecture

> Architecture diagram of the GitHub repository arseniy-sk/crosshair-studio, 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/arseniy-sk/crosshair-studio
- Repository: https://github.com/arseniy-sk/crosshair-studio

## Overview

Crosshair Studio is a desktop app for designing crosshairs and placing configurable game overlays, with a separate Workshop service for sharing designs. The main workflow is configure a design or HUD widget, persist settings, then show an overlay on a selected monitor. The README documents cross-platform support; sampled code also confirms rendering, telemetry, magnification, hotkeys, and Workshop publishing/browsing. Several UI and overlay links are inferred only where the excerpts show their owning entry points; unsampled implementation details are omitted.

Main entry points: [`src/CrosshairStudio/ViewModels/MainViewModel.cs`](https://github.com/arseniy-sk/crosshair-studio/blob/main/src/CrosshairStudio/ViewModels/MainViewModel.cs) (Main workflow), [`src/CrosshairStudio/Overlay/OverlayService.cs`](https://github.com/arseniy-sk/crosshair-studio/blob/main/src/CrosshairStudio/Overlay/OverlayService.cs) (Overlay service), [`src/CrosshairStudio/App.axaml.cs`](https://github.com/arseniy-sk/crosshair-studio/blob/main/src/CrosshairStudio/App.axaml.cs) (App bootstrap), [`src/CrosshairStudio/Views/MainWindow.axaml.cs`](https://github.com/arseniy-sk/crosshair-studio/blob/main/src/CrosshairStudio/Views/MainWindow.axaml.cs) (Main window)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_desktop["Desktop app"]
  node_app["App bootstrap<br/>[App.axaml.cs]"]
  node_mainvm["Main workflow<br/>[MainViewModel.cs]"]
  node_mainwindow["Main window"]
  node_onboarding["Onboarding"]
end

subgraph group_design["Design and display"]
  node_settings["App settings<br/>[Settings.cs]"]
  node_crosshair["Crosshair model<br/>[Crosshair.cs]"]
  node_widget["HUD widget model<br/>[HudWidget.cs]"]
  node_crosshairview["Crosshair preview<br/>[CrosshairView.cs]"]
  node_painter["Crosshair painter"]
  node_jsonstore[("Local settings store<br/>[JsonStore.cs]")]
  node_monitor["Monitor query<br/>[MonitorQuery.cs]"]
end

subgraph group_overlay["Overlay runtime"]
  node_overlayservice["Overlay service<br/>[OverlayService.cs]"]
  node_overlaywindow["Crosshair overlay"]
  node_hudwindow["HUD overlay<br/>[HudWindow.axaml.cs]"]
  node_magnifier["Magnifier"]
  node_sampling["Telemetry sampling"]
  node_input["Hotkey input<br/>[InputWatch.cs]"]
end

subgraph group_workshop["Workshop service"]
  node_workshopvm["Workshop workflow"]
  node_workshopclient["Workshop client<br/>[WorkshopClient.cs]"]
  node_workshopapi["Workshop API<br/>[index.mjs]"]
  node_workshopstore[("Workshop catalog<br/>[store.mjs]")]
end

node_user(("Player"))
node_http(("HTTP clients"))

node_user -->|"uses"| node_mainwindow
node_app -->|"loads settings"| node_jsonstore
node_app -->|"creates"| node_overlayservice
node_app -->|"creates workflow"| node_workshopvm
node_app -->|"creates"| node_mainvm
node_app -->|"opens"| node_mainwindow
node_mainwindow -->|"binds"| node_mainvm
node_mainvm -->|"persists settings"| node_jsonstore
node_mainvm -->|"queries displays"| node_monitor
node_mainvm -->|"updates overlay"| node_overlayservice
node_mainvm -->|"edits design"| node_crosshair
node_mainvm -->|"configures widgets"| node_widget
node_crosshairview -->|"renders preview"| node_painter
node_overlayservice -->|"shows crosshair"| node_overlaywindow
node_overlayservice -->|"shows widgets"| node_hudwindow
node_overlayservice -->|"shows magnifier"| node_magnifier
node_overlayservice -->|"starts sampling"| node_sampling
node_mainvm -->|"starts watching"| node_input
node_workshopvm -->|"requests items"| node_workshopclient
node_mainvm -->|"publishes designs"| node_workshopclient
node_workshopclient -->|"sends requests"| node_http
node_http -->|"calls API"| node_workshopapi
node_workshopapi -->|"reads and writes"| node_workshopstore

click node_app "https://github.com/arseniy-sk/crosshair-studio/blob/main/src/CrosshairStudio/App.axaml.cs"
click node_mainvm "https://github.com/arseniy-sk/crosshair-studio/blob/main/src/CrosshairStudio/ViewModels/MainViewModel.cs"
click node_mainwindow "https://github.com/arseniy-sk/crosshair-studio/blob/main/src/CrosshairStudio/Views/MainWindow.axaml.cs"
click node_onboarding "https://github.com/arseniy-sk/crosshair-studio/blob/main/src/CrosshairStudio/Views/OnboardingView.axaml.cs"
click node_settings "https://github.com/arseniy-sk/crosshair-studio/blob/main/src/CrosshairStudio/Domain/Settings.cs"
click node_crosshair "https://github.com/arseniy-sk/crosshair-studio/blob/main/src/CrosshairStudio/Domain/Crosshair.cs"
click node_widget "https://github.com/arseniy-sk/crosshair-studio/blob/main/src/CrosshairStudio/Domain/HudWidget.cs"
click node_crosshairview "https://github.com/arseniy-sk/crosshair-studio/blob/main/src/CrosshairStudio/Controls/CrosshairView.cs"
click node_painter "https://github.com/arseniy-sk/crosshair-studio/blob/main/src/CrosshairStudio/Rendering/CrosshairPainter.cs"
click node_jsonstore "https://github.com/arseniy-sk/crosshair-studio/blob/main/src/CrosshairStudio/Infrastructure/JsonStore.cs"
click node_monitor "https://github.com/arseniy-sk/crosshair-studio/blob/main/src/CrosshairStudio/Infrastructure/MonitorQuery.cs"
click node_overlayservice "https://github.com/arseniy-sk/crosshair-studio/blob/main/src/CrosshairStudio/Overlay/OverlayService.cs"
click node_overlaywindow "https://github.com/arseniy-sk/crosshair-studio/blob/main/src/CrosshairStudio/Overlay/OverlayWindow.axaml.cs"
click node_hudwindow "https://github.com/arseniy-sk/crosshair-studio/blob/main/src/CrosshairStudio/Overlay/HudWindow.axaml.cs"
click node_magnifier "https://github.com/arseniy-sk/crosshair-studio/blob/main/src/CrosshairStudio/Overlay/MagnifierWindow.axaml.cs"
click node_sampling "https://github.com/arseniy-sk/crosshair-studio/blob/main/src/CrosshairStudio/Infrastructure/Sampling/TelemetrySampler.cs"
click node_input "https://github.com/arseniy-sk/crosshair-studio/blob/main/src/CrosshairStudio/Infrastructure/InputWatch.cs"
click node_workshopvm "https://github.com/arseniy-sk/crosshair-studio/blob/main/src/CrosshairStudio/ViewModels/WorkshopViewModel.cs"
click node_workshopclient "https://github.com/arseniy-sk/crosshair-studio/blob/main/src/CrosshairStudio/Infrastructure/WorkshopClient.cs"
click node_workshopapi "https://github.com/arseniy-sk/crosshair-studio/blob/main/server/src/index.mjs"
click node_workshopstore "https://github.com/arseniy-sk/crosshair-studio/blob/main/server/src/store.mjs"

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_app,node_mainvm,node_mainwindow,node_onboarding,node_http toneBlue
class node_settings,node_crosshair,node_widget,node_crosshairview,node_painter,node_jsonstore,node_monitor toneAmber
class node_overlayservice,node_overlaywindow,node_hudwindow,node_magnifier,node_sampling,node_input toneMint
class node_workshopvm,node_workshopclient,node_workshopapi,node_workshopstore toneRose
class node_user toneIndigo
```

## Components

### Desktop app

- [App bootstrap](https://github.com/arseniy-sk/crosshair-studio/blob/main/src/CrosshairStudio/App.axaml.cs): `src/CrosshairStudio/App.axaml.cs`
- [Main workflow](https://github.com/arseniy-sk/crosshair-studio/blob/main/src/CrosshairStudio/ViewModels/MainViewModel.cs): `src/CrosshairStudio/ViewModels/MainViewModel.cs`
- [Main window](https://github.com/arseniy-sk/crosshair-studio/blob/main/src/CrosshairStudio/Views/MainWindow.axaml.cs): `src/CrosshairStudio/Views/MainWindow.axaml.cs`
- [Onboarding](https://github.com/arseniy-sk/crosshair-studio/blob/main/src/CrosshairStudio/Views/OnboardingView.axaml.cs): `src/CrosshairStudio/Views/OnboardingView.axaml.cs`

### Design and display

- [App settings](https://github.com/arseniy-sk/crosshair-studio/blob/main/src/CrosshairStudio/Domain/Settings.cs): `src/CrosshairStudio/Domain/Settings.cs`
- [Crosshair model](https://github.com/arseniy-sk/crosshair-studio/blob/main/src/CrosshairStudio/Domain/Crosshair.cs): `src/CrosshairStudio/Domain/Crosshair.cs`
- [HUD widget model](https://github.com/arseniy-sk/crosshair-studio/blob/main/src/CrosshairStudio/Domain/HudWidget.cs): `src/CrosshairStudio/Domain/HudWidget.cs`
- [Crosshair preview](https://github.com/arseniy-sk/crosshair-studio/blob/main/src/CrosshairStudio/Controls/CrosshairView.cs): `src/CrosshairStudio/Controls/CrosshairView.cs`
- [Crosshair painter](https://github.com/arseniy-sk/crosshair-studio/blob/main/src/CrosshairStudio/Rendering/CrosshairPainter.cs): `src/CrosshairStudio/Rendering/CrosshairPainter.cs`
- [Local settings store](https://github.com/arseniy-sk/crosshair-studio/blob/main/src/CrosshairStudio/Infrastructure/JsonStore.cs): `src/CrosshairStudio/Infrastructure/JsonStore.cs`
- [Monitor query](https://github.com/arseniy-sk/crosshair-studio/blob/main/src/CrosshairStudio/Infrastructure/MonitorQuery.cs): `src/CrosshairStudio/Infrastructure/MonitorQuery.cs`

### Overlay runtime

- [Overlay service](https://github.com/arseniy-sk/crosshair-studio/blob/main/src/CrosshairStudio/Overlay/OverlayService.cs): `src/CrosshairStudio/Overlay/OverlayService.cs`
- [Crosshair overlay](https://github.com/arseniy-sk/crosshair-studio/blob/main/src/CrosshairStudio/Overlay/OverlayWindow.axaml.cs): `src/CrosshairStudio/Overlay/OverlayWindow.axaml.cs`
- [HUD overlay](https://github.com/arseniy-sk/crosshair-studio/blob/main/src/CrosshairStudio/Overlay/HudWindow.axaml.cs): `src/CrosshairStudio/Overlay/HudWindow.axaml.cs`
- [Magnifier](https://github.com/arseniy-sk/crosshair-studio/blob/main/src/CrosshairStudio/Overlay/MagnifierWindow.axaml.cs): `src/CrosshairStudio/Overlay/MagnifierWindow.axaml.cs`
- [Telemetry sampling](https://github.com/arseniy-sk/crosshair-studio/blob/main/src/CrosshairStudio/Infrastructure/Sampling/TelemetrySampler.cs): `src/CrosshairStudio/Infrastructure/Sampling/TelemetrySampler.cs`
- [Hotkey input](https://github.com/arseniy-sk/crosshair-studio/blob/main/src/CrosshairStudio/Infrastructure/InputWatch.cs): `src/CrosshairStudio/Infrastructure/InputWatch.cs`

### Workshop service

- [Workshop workflow](https://github.com/arseniy-sk/crosshair-studio/blob/main/src/CrosshairStudio/ViewModels/WorkshopViewModel.cs): `src/CrosshairStudio/ViewModels/WorkshopViewModel.cs`
- [Workshop client](https://github.com/arseniy-sk/crosshair-studio/blob/main/src/CrosshairStudio/Infrastructure/WorkshopClient.cs): `src/CrosshairStudio/Infrastructure/WorkshopClient.cs`
- [Workshop API](https://github.com/arseniy-sk/crosshair-studio/blob/main/server/src/index.mjs): `server/src/index.mjs`
- [Workshop catalog](https://github.com/arseniy-sk/crosshair-studio/blob/main/server/src/store.mjs): `server/src/store.mjs`

### Other components

- **Player**
- **HTTP clients**

## Connections

- Player → Main window: uses
- App bootstrap → Local settings store: loads settings
- App bootstrap → Overlay service: creates
- App bootstrap → Workshop workflow: creates workflow
- App bootstrap → Main workflow: creates
- App bootstrap → Main window: opens
- Main window → Main workflow: binds
- Main workflow → Local settings store: persists settings
- Main workflow → Monitor query: queries displays
- Main workflow → Overlay service: updates overlay
- Main workflow → Crosshair model: edits design
- Main workflow → HUD widget model: configures widgets
- Crosshair preview → Crosshair painter: renders preview
- Overlay service → Crosshair overlay: shows crosshair
- Overlay service → HUD overlay: shows widgets
- Overlay service → Magnifier: shows magnifier
- Overlay service → Telemetry sampling: starts sampling
- Main workflow → Hotkey input: starts watching
- Workshop workflow → Workshop client: requests items
- Main workflow → Workshop client: publishes designs
- Workshop client → HTTP clients: sends requests
- HTTP clients → Workshop API: calls API
- Workshop API → Workshop catalog: reads and writes