# nqwrc/3d-anatomy architecture

> Architecture diagram of the GitHub repository nqwrc/3d-anatomy, 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/nqwrc/3d-anatomy
- Repository: https://github.com/nqwrc/3d-anatomy

## Overview

This is a browser-based 3D anatomy atlas: users load anatomical systems, explore structures in a Three.js viewer, search and inspect anatomy, adjust visibility and camera, and share a restorable view through the URL. The graph covers the documented model, lexicon, definitions, localization and synonym-search capabilities. Some modules were not sampled, so links to those capabilities are limited to README or tree evidence; uncertain internal calls are omitted.

Main entry points: [`src/ui/sidebar.js`](https://github.com/nqwrc/3d-anatomy/blob/master/src/ui/sidebar.js) (Atlas interface), [`src/viewer/selection.js`](https://github.com/nqwrc/3d-anatomy/blob/master/src/viewer/selection.js) (Structure selection), [`src/viewer/loadModel.js`](https://github.com/nqwrc/3d-anatomy/blob/master/src/viewer/loadModel.js) (Model loader), [`src/main.js`](https://github.com/nqwrc/3d-anatomy/blob/master/src/main.js) (App startup)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["Application flow"]
  node_main["App startup<br/>[main.js]"]
  node_sidebar["Atlas interface<br/>[sidebar.js]"]
  node_search["Search and data<br/>[dataLoader.js]"]
  node_focus["Focus handling<br/>[focus.js]"]
end

subgraph group_viewer["3D exploration"]
  node_scene["3D scene<br/>[createScene.js]"]
  node_models["Model loader<br/>[loadModel.js]"]
  node_selection["Structure selection<br/>[selection.js]"]
  node_visibility["Visibility controls<br/>[visibility.js]"]
  node_camera["Camera controls<br/>[camera.js]"]
  node_callout["Structure callout<br/>[callout.js]"]
  node_depth["Depth control<br/>[depthSlider.js]"]
end

subgraph group_anatomy["Anatomy data"]
  node_anatomy["Anatomy catalog<br/>[anatomy.js]"]
  node_definitions["Definitions and lexicon<br/>[definitions.json]"]
  node_systems["System index<br/>[systems.json]"]
  node_lexicon["Names and terms<br/>[lexicon.json]"]
  node_synonyms["Italian synonyms<br/>[synonyms.it.json]"]
  node_translations["UI translations"]
  node_modelsdata["Anatomy models"]
end

subgraph group_state["View state"]
  node_store["Shared application state<br/>[store.js]"]
  node_urlstate["Shareable view state<br/>[urlState.js]"]
end

node_person(("Atlas user"))
node_browser[("Browser URL")]
node_three["Three.js renderer"]
node_draco["Draco decoder"]

node_person -->|"uses"| node_sidebar
node_person -->|"explores"| node_scene
node_main -->|"creates"| node_scene
node_main -->|"loads systems"| node_models
node_main -->|"loads catalog"| node_anatomy
node_main -->|"initializes"| node_store
node_main -->|"restores view"| node_urlstate
node_main -->|"initializes"| node_sidebar
node_sidebar -->|"searches"| node_search
node_sidebar -->|"loads systems"| node_models
node_sidebar -->|"selects structures"| node_selection
node_sidebar -->|"changes visibility"| node_visibility
node_sidebar -->|"sets view"| node_camera
node_sidebar -->|"reads state"| node_store
node_search -->|"loads terms"| node_synonyms
node_search -->|"loads dictionaries"| node_translations
node_search -->|"sets search index"| node_store
node_anatomy -->|"loads index"| node_systems
node_anatomy -->|"loads names"| node_lexicon
node_anatomy -->|"loads definitions"| node_definitions
node_models -->|"loads GLB"| node_modelsdata
node_models -->|"decodes models"| node_draco
node_models -->|"builds scene objects"| node_three
node_models -->|"updates loading state"| node_store
node_selection -->|"sets selection"| node_store
node_selection -->|"highlights mesh"| node_visibility
node_selection -->|"focuses mesh"| node_camera
node_selection -->|"shows details"| node_callout
node_selection -->|"loads definitions"| node_anatomy
node_visibility -->|"updates part state"| node_store
node_camera -->|"moves camera"| node_scene
node_urlstate -->|"reads and writes hash"| node_browser
node_urlstate -->|"serializes state"| node_store
node_urlstate -->|"restores systems"| node_models
node_urlstate -->|"restores selection"| node_selection
node_urlstate -->|"restores visibility"| node_visibility

click node_main "https://github.com/nqwrc/3d-anatomy/blob/master/src/main.js"
click node_sidebar "https://github.com/nqwrc/3d-anatomy/blob/master/src/ui/sidebar.js"
click node_search "https://github.com/nqwrc/3d-anatomy/blob/master/src/utils/dataLoader.js"
click node_scene "https://github.com/nqwrc/3d-anatomy/blob/master/src/viewer/createScene.js"
click node_models "https://github.com/nqwrc/3d-anatomy/blob/master/src/viewer/loadModel.js"
click node_selection "https://github.com/nqwrc/3d-anatomy/blob/master/src/viewer/selection.js"
click node_visibility "https://github.com/nqwrc/3d-anatomy/blob/master/src/viewer/visibility.js"
click node_camera "https://github.com/nqwrc/3d-anatomy/blob/master/src/viewer/camera.js"
click node_callout "https://github.com/nqwrc/3d-anatomy/blob/master/src/ui/callout.js"
click node_depth "https://github.com/nqwrc/3d-anatomy/blob/master/src/ui/depthSlider.js"
click node_focus "https://github.com/nqwrc/3d-anatomy/blob/master/src/ui/focus.js"
click node_anatomy "https://github.com/nqwrc/3d-anatomy/blob/master/src/data/anatomy.js"
click node_definitions "https://github.com/nqwrc/3d-anatomy/blob/master/public/data/definitions.json"
click node_systems "https://github.com/nqwrc/3d-anatomy/blob/master/public/data/systems.json"
click node_lexicon "https://github.com/nqwrc/3d-anatomy/blob/master/public/data/lexicon.json"
click node_synonyms "https://github.com/nqwrc/3d-anatomy/blob/master/public/data/synonyms.it.json"
click node_translations "https://github.com/nqwrc/3d-anatomy/tree/master/public/data/translations"
click node_modelsdata "https://github.com/nqwrc/3d-anatomy/tree/master/public/models"
click node_store "https://github.com/nqwrc/3d-anatomy/blob/master/src/state/store.js"
click node_urlstate "https://github.com/nqwrc/3d-anatomy/blob/master/src/state/urlState.js"
click node_draco "https://github.com/nqwrc/3d-anatomy/tree/master/public/draco"

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_sidebar,node_search,node_focus,node_person toneBlue
class node_scene,node_models,node_selection,node_visibility,node_camera,node_callout,node_depth,node_browser toneAmber
class node_anatomy,node_definitions,node_systems,node_lexicon,node_synonyms,node_translations,node_modelsdata toneMint
class node_store,node_urlstate toneRose
class node_three toneIndigo
class node_draco toneTeal
```

## Components

### Application flow

- [App startup](https://github.com/nqwrc/3d-anatomy/blob/master/src/main.js): `src/main.js`
- [Atlas interface](https://github.com/nqwrc/3d-anatomy/blob/master/src/ui/sidebar.js): `src/ui/sidebar.js`
- [Search and data](https://github.com/nqwrc/3d-anatomy/blob/master/src/utils/dataLoader.js): `src/utils/dataLoader.js`
- [Focus handling](https://github.com/nqwrc/3d-anatomy/blob/master/src/ui/focus.js): `src/ui/focus.js`

### 3D exploration

- [3D scene](https://github.com/nqwrc/3d-anatomy/blob/master/src/viewer/createScene.js): `src/viewer/createScene.js`
- [Model loader](https://github.com/nqwrc/3d-anatomy/blob/master/src/viewer/loadModel.js): `src/viewer/loadModel.js`
- [Structure selection](https://github.com/nqwrc/3d-anatomy/blob/master/src/viewer/selection.js): `src/viewer/selection.js`
- [Visibility controls](https://github.com/nqwrc/3d-anatomy/blob/master/src/viewer/visibility.js): `src/viewer/visibility.js`
- [Camera controls](https://github.com/nqwrc/3d-anatomy/blob/master/src/viewer/camera.js): `src/viewer/camera.js`
- [Structure callout](https://github.com/nqwrc/3d-anatomy/blob/master/src/ui/callout.js): `src/ui/callout.js`
- [Depth control](https://github.com/nqwrc/3d-anatomy/blob/master/src/ui/depthSlider.js): `src/ui/depthSlider.js`

### Anatomy data

- [Anatomy catalog](https://github.com/nqwrc/3d-anatomy/blob/master/src/data/anatomy.js): `src/data/anatomy.js`
- [Definitions and lexicon](https://github.com/nqwrc/3d-anatomy/blob/master/public/data/definitions.json): `public/data/definitions.json`
- [System index](https://github.com/nqwrc/3d-anatomy/blob/master/public/data/systems.json): `public/data/systems.json`
- [Names and terms](https://github.com/nqwrc/3d-anatomy/blob/master/public/data/lexicon.json): `public/data/lexicon.json`
- [Italian synonyms](https://github.com/nqwrc/3d-anatomy/blob/master/public/data/synonyms.it.json): `public/data/synonyms.it.json`
- [UI translations](https://github.com/nqwrc/3d-anatomy/tree/master/public/data/translations): `public/data/translations`
- [Anatomy models](https://github.com/nqwrc/3d-anatomy/tree/master/public/models): `public/models`

### View state

- [Shared application state](https://github.com/nqwrc/3d-anatomy/blob/master/src/state/store.js): `src/state/store.js`
- [Shareable view state](https://github.com/nqwrc/3d-anatomy/blob/master/src/state/urlState.js): `src/state/urlState.js`

### Other components

- **Atlas user**
- **Browser URL**
- **Three.js renderer**
- [Draco decoder](https://github.com/nqwrc/3d-anatomy/tree/master/public/draco): `public/draco`

## Connections

- Atlas user → Atlas interface: uses
- Atlas user → 3D scene: explores
- App startup → 3D scene: creates
- App startup → Model loader: loads systems
- App startup → Anatomy catalog: loads catalog
- App startup → Shared application state: initializes
- App startup → Shareable view state: restores view
- App startup → Atlas interface: initializes
- Atlas interface → Search and data: searches
- Atlas interface → Model loader: loads systems
- Atlas interface → Structure selection: selects structures
- Atlas interface → Visibility controls: changes visibility
- Atlas interface → Camera controls: sets view
- Atlas interface → Shared application state: reads state
- Search and data → Italian synonyms: loads terms
- Search and data → UI translations: loads dictionaries
- Search and data → Shared application state: sets search index
- Anatomy catalog → System index: loads index
- Anatomy catalog → Names and terms: loads names
- Anatomy catalog → Definitions and lexicon: loads definitions
- Model loader → Anatomy models: loads GLB
- Model loader → Draco decoder: decodes models
- Model loader → Three.js renderer: builds scene objects
- Model loader → Shared application state: updates loading state
- Structure selection → Shared application state: sets selection
- Structure selection → Visibility controls: highlights mesh
- Structure selection → Camera controls: focuses mesh
- Structure selection → Structure callout: shows details
- Structure selection → Anatomy catalog: loads definitions
- Visibility controls → Shared application state: updates part state
- Camera controls → 3D scene: moves camera
- Shareable view state → Browser URL: reads and writes hash
- Shareable view state → Shared application state: serializes state
- Shareable view state → Model loader: restores systems
- Shareable view state → Structure selection: restores selection
- Shareable view state → Visibility controls: restores visibility