# hhdblog/dev_hud architecture

> Architecture diagram of the GitHub repository hhdblog/dev_hud, 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/hhdblog/dev_hud
- Repository: https://github.com/hhdblog/dev_hud

## Overview

DevHud is a Flutter debug overlay. The documented workflow is to wrap an app with `DevHud`, publish custom values through the singleton `DevHudService`, and inspect those values alongside FPS in the overlay. The widget also documents memory display, draggable placement, copy-on-long-press, collapsible groups, and optional position persistence. Source excerpts were unavailable, so the graph uses only README-documented relationships and does not infer internal calls or storage details.

Main entry points: [`lib/src/dev_hud_service.dart`](https://github.com/hhdblog/dev_hud/blob/main/lib/src/dev_hud_service.dart) (DevHudService), [`lib/src/dev_hud_widget.dart`](https://github.com/hhdblog/dev_hud/blob/main/lib/src/dev_hud_widget.dart) (DevHud widget)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_overlay["HUD overlay"]
  node_widget["DevHud widget"]
end

subgraph group_metrics["Metrics API"]
  node_service["DevHudService"]
end

node_developer(("App developer"))
node_app["Flutter app"]

node_app -->|"wraps app"| node_widget
node_developer -->|"updates metrics"| node_service
node_service -->|"provides tracked values"| node_widget

click node_widget "https://github.com/hhdblog/dev_hud/blob/main/lib/src/dev_hud_widget.dart"
click node_service "https://github.com/hhdblog/dev_hud/blob/main/lib/src/dev_hud_service.dart"

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_widget toneBlue
class node_service toneAmber
class node_developer,node_app toneIndigo
```

## Components

### HUD overlay

- [DevHud widget](https://github.com/hhdblog/dev_hud/blob/main/lib/src/dev_hud_widget.dart): `lib/src/dev_hud_widget.dart`

### Metrics API

- [DevHudService](https://github.com/hhdblog/dev_hud/blob/main/lib/src/dev_hud_service.dart): `lib/src/dev_hud_service.dart`

### Other components

- **App developer**
- **Flutter app**

## Connections

- Flutter app → DevHud widget: wraps app (evidence: `README.md`)
- App developer → DevHudService: updates metrics (evidence: `README.md`)
- DevHudService → DevHud widget: provides tracked values (evidence: `README.md`)