# kuankuan2007/scale architecture

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

- Interactive diagram: https://gitdiagram.com/kuankuan2007/scale
- Repository: https://github.com/kuankuan2007/scale

## Overview

Scale is a Vue-based website for self-guided psychological questionnaire assessments, presented for personal reference rather than clinical use. Users can browse the scale catalog, open a questionnaire, submit answers, and view its scale-specific interpretation and score visualizations; results can also be printed. The repository includes many independently defined scales and informational pages, plus theme controls. The route setup and assessment view are sampled; catalog internals and some view-to-data wiring are not, so those relationships are shown only where supported by the available evidence.

Main entry points: [`src/views/ScaleView.vue`](https://github.com/kuankuan2007/scale/blob/master/src/views/ScaleView.vue) (Assessment page), [`src/router/index.ts`](https://github.com/kuankuan2007/scale/blob/master/src/router/index.ts) (Route selection), [`src/App.vue`](https://github.com/kuankuan2007/scale/blob/master/src/App.vue) (Application shell), [`src/components/PageHeader.vue`](https://github.com/kuankuan2007/scale/blob/master/src/components/PageHeader.vue) (Page header)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["Application shell"]
  node_entry["App bootstrap<br/>[main.ts]"]
  node_shell["Application shell<br/>[App.vue]"]
  node_router["Route selection<br/>[index.ts]"]
  node_header["Page header<br/>[PageHeader.vue]"]
end

subgraph group_discovery["Scale discovery"]
  node_home["Home page<br/>[HomeView.vue]"]
  node_catalog["Scale catalog<br/>[ScaleIndexView.vue]"]
  node_about["About page<br/>[AboutView.vue]"]
end

subgraph group_assessment["Assessment flow"]
  node_scaleview["Assessment page<br/>[ScaleView.vue]"]
  node_definitions["Scale definitions"]
  node_form["Questionnaire form<br/>[FormConfigView.vue]"]
  node_choice["Choice input<br/>[FormChoice.vue]"]
  node_schema["Scale and result types<br/>[form.ts]"]
end

subgraph group_presentation["Results and display"]
  node_result["Result display<br/>[ResultScores.vue]"]
  node_scorecomponents["Score visualizations"]
  node_theme["Theme controls<br/>[theme.ts]"]
end

node_user(("Website user"))
node_print(("Browser print"))

node_user -->|"opens site"| node_entry
node_entry -->|"mounts"| node_shell
node_shell -->|"renders routes"| node_router
node_router -->|"routes home"| node_home
node_router -->|"routes catalog"| node_catalog
node_router -->|"routes scale"| node_scaleview
node_router -->|"routes about"| node_about
node_shell -->|"renders header"| node_header
node_user -->|"browses scales"| node_catalog
node_user -->|"opens assessment"| node_scaleview
node_scaleview -->|"loads scale"| node_definitions
node_scaleview -->|"renders questions"| node_form
node_form -->|"renders choices"| node_choice
node_definitions -->|"conforms to"| node_schema
node_scaleview -->|"scores answers"| node_definitions
node_scaleview -->|"shows result"| node_result
node_result -->|"renders charts"| node_scorecomponents
node_user -->|"changes theme"| node_header
node_header -->|"updates setting"| node_theme
node_user -->|"requests print"| node_print
node_scaleview -->|"prints result"| node_print

click node_entry "https://github.com/kuankuan2007/scale/blob/master/src/main.ts"
click node_shell "https://github.com/kuankuan2007/scale/blob/master/src/App.vue"
click node_router "https://github.com/kuankuan2007/scale/blob/master/src/router/index.ts"
click node_header "https://github.com/kuankuan2007/scale/blob/master/src/components/PageHeader.vue"
click node_home "https://github.com/kuankuan2007/scale/blob/master/src/views/HomeView.vue"
click node_catalog "https://github.com/kuankuan2007/scale/blob/master/src/views/ScaleIndexView.vue"
click node_about "https://github.com/kuankuan2007/scale/blob/master/src/views/AboutView.vue"
click node_scaleview "https://github.com/kuankuan2007/scale/blob/master/src/views/ScaleView.vue"
click node_definitions "https://github.com/kuankuan2007/scale/tree/master/src/scales"
click node_form "https://github.com/kuankuan2007/scale/blob/master/src/components/FormConfigView.vue"
click node_choice "https://github.com/kuankuan2007/scale/blob/master/src/components/form/FormChoice.vue"
click node_schema "https://github.com/kuankuan2007/scale/blob/master/src/types/form.ts"
click node_result "https://github.com/kuankuan2007/scale/blob/master/src/components/ResultScores.vue"
click node_scorecomponents "https://github.com/kuankuan2007/scale/tree/master/src/components/score"
click node_theme "https://github.com/kuankuan2007/scale/blob/master/src/scripts/theme.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_shell,node_router,node_header,node_user,node_print toneBlue
class node_home,node_catalog,node_about toneAmber
class node_scaleview,node_definitions,node_form,node_choice,node_schema toneMint
class node_result,node_scorecomponents,node_theme toneRose
```

## Components

### Application shell

- [App bootstrap](https://github.com/kuankuan2007/scale/blob/master/src/main.ts): `src/main.ts`
- [Application shell](https://github.com/kuankuan2007/scale/blob/master/src/App.vue): `src/App.vue`
- [Route selection](https://github.com/kuankuan2007/scale/blob/master/src/router/index.ts): `src/router/index.ts`
- [Page header](https://github.com/kuankuan2007/scale/blob/master/src/components/PageHeader.vue): `src/components/PageHeader.vue`

### Scale discovery

- [Home page](https://github.com/kuankuan2007/scale/blob/master/src/views/HomeView.vue): `src/views/HomeView.vue`
- [Scale catalog](https://github.com/kuankuan2007/scale/blob/master/src/views/ScaleIndexView.vue): `src/views/ScaleIndexView.vue`
- [About page](https://github.com/kuankuan2007/scale/blob/master/src/views/AboutView.vue): `src/views/AboutView.vue`

### Assessment flow

- [Assessment page](https://github.com/kuankuan2007/scale/blob/master/src/views/ScaleView.vue): `src/views/ScaleView.vue`
- [Scale definitions](https://github.com/kuankuan2007/scale/tree/master/src/scales): `src/scales`
- [Questionnaire form](https://github.com/kuankuan2007/scale/blob/master/src/components/FormConfigView.vue): `src/components/FormConfigView.vue`
- [Choice input](https://github.com/kuankuan2007/scale/blob/master/src/components/form/FormChoice.vue): `src/components/form/FormChoice.vue`
- [Scale and result types](https://github.com/kuankuan2007/scale/blob/master/src/types/form.ts): `src/types/form.ts`

### Results and display

- [Result display](https://github.com/kuankuan2007/scale/blob/master/src/components/ResultScores.vue): `src/components/ResultScores.vue`
- [Score visualizations](https://github.com/kuankuan2007/scale/tree/master/src/components/score): `src/components/score`
- [Theme controls](https://github.com/kuankuan2007/scale/blob/master/src/scripts/theme.ts): `src/scripts/theme.ts`

### Other components

- **Website user**
- **Browser print**

## Connections

- Website user → App bootstrap: opens site
- App bootstrap → Application shell: mounts
- Application shell → Route selection: renders routes
- Route selection → Home page: routes home
- Route selection → Scale catalog: routes catalog
- Route selection → Assessment page: routes scale
- Route selection → About page: routes about
- Application shell → Page header: renders header
- Website user → Scale catalog: browses scales
- Website user → Assessment page: opens assessment
- Assessment page → Scale definitions: loads scale
- Assessment page → Questionnaire form: renders questions
- Questionnaire form → Choice input: renders choices
- Scale definitions → Scale and result types: conforms to
- Assessment page → Scale definitions: scores answers
- Assessment page → Result display: shows result
- Result display → Score visualizations: renders charts
- Website user → Page header: changes theme
- Page header → Theme controls: updates setting
- Website user → Browser print: requests print
- Assessment page → Browser print: prints result