# jeremywhalen/greyhawkvectormap architecture

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

- Interactive diagram: https://gitdiagram.com/jeremywhalen/greyhawkvectormap
- Repository: https://github.com/jeremywhalen/greyhawkvectormap

## Overview

Greyhawk is a Vue application for exploring a richly illustrated map of the World of Greyhawk alongside a political and historical legend. The principal interaction is to choose a linked place in the legend and have the map focus on its corresponding feature. The tree also shows map grid and framing components, heraldry, and reactive search state. The README identifies the subject and map credits but documents few implementation details; several component connections below are therefore limited to the sampled view and app wiring.

Main entry points: [`src/components/Map/Greyhawk/MapGreyhawk.vue`](https://github.com/jeremywhalen/greyhawkvectormap/blob/main/src/components/Map/Greyhawk/MapGreyhawk.vue) (Greyhawk map), [`src/views/MapView.vue`](https://github.com/jeremywhalen/greyhawkvectormap/blob/main/src/views/MapView.vue) (Map view), [`src/components/Legend/Greyhawk/LegendGreyhawkPoliticalDivisions.vue`](https://github.com/jeremywhalen/greyhawkvectormap/blob/main/src/components/Legend/Greyhawk/LegendGreyhawkPoliticalDivisions.vue) (Political divisions), [`src/components/Map/Greyhawk/MapGreyhawkImage.vue`](https://github.com/jeremywhalen/greyhawkvectormap/blob/main/src/components/Map/Greyhawk/MapGreyhawkImage.vue) (Map image)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["Application flow"]
  node_entry["Vue entry<br/>[main.ts]"]
  node_app_shell["App shell<br/>[App.vue]"]
  node_router["Router<br/>[index.ts]"]
  node_map_view["Map view<br/>[MapView.vue]"]
end

subgraph group_map["Map visualization"]
  node_frame["Map frame<br/>[MapFrame.vue]"]
  node_greyhawk_map["Greyhawk map<br/>[MapGreyhawk.vue]"]
  node_map_image["Map image"]
  node_map_features["Map features"]
  node_map_kingdoms["Kingdoms"]
  node_map_rivers["Rivers"]
  node_map_settlements["Settlements"]
  node_grid["Map grid<br/>[MapGrid.vue]"]
  node_grid_canvas["Grid canvas<br/>[MapGridCanvas.vue]"]
  node_grid_path["Grid path<br/>[MapGridPath.vue]"]
end

subgraph group_legend["Legend and lore"]
  node_greyhawk_legend["Greyhawk legend<br/>[LegendGreyhawk.vue]"]
  node_political_divisions["Political divisions"]
  node_legend_header["Legend header"]
  node_legend_section["Legend section<br/>[LegendSection.vue]"]
  node_legend_link["Legend links<br/>[LegendLink.vue]"]
  node_heraldry["Heraldry icons<br/>[HeraldryIcon.vue]"]
end

subgraph group_state["Search state"]
  node_search_state["Search state<br/>[search.ts]"]
  node_sanitize["Search sanitizer<br/>[sanitize.ts]"]
end

node_visitor(("Map explorer"))

node_visitor -->|"opens app"| node_entry
node_entry -->|"mounts"| node_app_shell
node_entry -->|"installs"| node_router
node_app_shell -->|"renders route"| node_router
node_router -->|"routes to"| node_map_view
node_map_view -->|"renders"| node_map_image
node_map_view -->|"renders"| node_greyhawk_legend
node_map_view -->|"focuses on linked place"| node_map_image
node_map_view -->|"handles link clicks"| node_greyhawk_legend
node_greyhawk_legend -->|"presents"| node_political_divisions
node_greyhawk_legend -->|"uses"| node_legend_header
node_political_divisions -->|"uses"| node_legend_section
node_political_divisions -->|"uses"| node_legend_link
node_political_divisions -->|"references"| node_heraldry
node_map_image -->|"frames"| node_frame
node_map_image -->|"displays"| node_greyhawk_map
node_greyhawk_map -->|"renders"| node_map_features
node_greyhawk_map -->|"renders"| node_map_kingdoms
node_greyhawk_map -->|"renders"| node_map_rivers
node_greyhawk_map -->|"renders"| node_map_settlements
node_greyhawk_map -->|"renders"| node_grid
node_grid -->|"uses"| node_grid_canvas
node_grid -->|"uses"| node_grid_path
node_search_state -->|"sanitizes input"| node_sanitize

click node_entry "https://github.com/jeremywhalen/greyhawkvectormap/blob/main/src/main.ts"
click node_app_shell "https://github.com/jeremywhalen/greyhawkvectormap/blob/main/src/App.vue"
click node_router "https://github.com/jeremywhalen/greyhawkvectormap/blob/main/src/router/index.ts"
click node_map_view "https://github.com/jeremywhalen/greyhawkvectormap/blob/main/src/views/MapView.vue"
click node_frame "https://github.com/jeremywhalen/greyhawkvectormap/blob/main/src/components/Map/Frame/MapFrame.vue"
click node_greyhawk_map "https://github.com/jeremywhalen/greyhawkvectormap/blob/main/src/components/Map/Greyhawk/MapGreyhawk.vue"
click node_map_image "https://github.com/jeremywhalen/greyhawkvectormap/blob/main/src/components/Map/Greyhawk/MapGreyhawkImage.vue"
click node_map_features "https://github.com/jeremywhalen/greyhawkvectormap/blob/main/src/components/Map/Greyhawk/MapGreyhawkFeatures.vue"
click node_map_kingdoms "https://github.com/jeremywhalen/greyhawkvectormap/blob/main/src/components/Map/Greyhawk/MapGreyhawkKingdoms.vue"
click node_map_rivers "https://github.com/jeremywhalen/greyhawkvectormap/blob/main/src/components/Map/Greyhawk/MapGreyhawkRivers.vue"
click node_map_settlements "https://github.com/jeremywhalen/greyhawkvectormap/blob/main/src/components/Map/Greyhawk/MapGreyhawkSettlements.vue"
click node_grid "https://github.com/jeremywhalen/greyhawkvectormap/blob/main/src/components/Map/Grid/MapGrid.vue"
click node_grid_canvas "https://github.com/jeremywhalen/greyhawkvectormap/blob/main/src/components/Map/Grid/MapGridCanvas.vue"
click node_grid_path "https://github.com/jeremywhalen/greyhawkvectormap/blob/main/src/components/Map/Grid/MapGridPath.vue"
click node_greyhawk_legend "https://github.com/jeremywhalen/greyhawkvectormap/blob/main/src/components/Legend/Greyhawk/LegendGreyhawk.vue"
click node_political_divisions "https://github.com/jeremywhalen/greyhawkvectormap/blob/main/src/components/Legend/Greyhawk/LegendGreyhawkPoliticalDivisions.vue"
click node_legend_header "https://github.com/jeremywhalen/greyhawkvectormap/blob/main/src/components/Legend/Greyhawk/LegendGreyhawkHeader.vue"
click node_legend_section "https://github.com/jeremywhalen/greyhawkvectormap/blob/main/src/components/Legend/Section/LegendSection.vue"
click node_legend_link "https://github.com/jeremywhalen/greyhawkvectormap/blob/main/src/components/Legend/Link/LegendLink.vue"
click node_heraldry "https://github.com/jeremywhalen/greyhawkvectormap/blob/main/src/components/Heraldry/HeraldryIcon.vue"
click node_search_state "https://github.com/jeremywhalen/greyhawkvectormap/blob/main/src/store/search.ts"
click node_sanitize "https://github.com/jeremywhalen/greyhawkvectormap/blob/main/src/utils/sanitize.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_shell,node_router,node_map_view toneBlue
class node_frame,node_greyhawk_map,node_map_image,node_map_features,node_map_kingdoms,node_map_rivers,node_map_settlements,node_grid,node_grid_canvas,node_grid_path toneAmber
class node_greyhawk_legend,node_political_divisions,node_legend_header,node_legend_section,node_legend_link,node_heraldry toneMint
class node_search_state,node_sanitize toneRose
class node_visitor toneIndigo
```

## Components

### Application flow

- [Vue entry](https://github.com/jeremywhalen/greyhawkvectormap/blob/main/src/main.ts): `src/main.ts`
- [App shell](https://github.com/jeremywhalen/greyhawkvectormap/blob/main/src/App.vue): `src/App.vue`
- [Router](https://github.com/jeremywhalen/greyhawkvectormap/blob/main/src/router/index.ts): `src/router/index.ts`
- [Map view](https://github.com/jeremywhalen/greyhawkvectormap/blob/main/src/views/MapView.vue): `src/views/MapView.vue`

### Map visualization

- [Map frame](https://github.com/jeremywhalen/greyhawkvectormap/blob/main/src/components/Map/Frame/MapFrame.vue): `src/components/Map/Frame/MapFrame.vue`
- [Greyhawk map](https://github.com/jeremywhalen/greyhawkvectormap/blob/main/src/components/Map/Greyhawk/MapGreyhawk.vue): `src/components/Map/Greyhawk/MapGreyhawk.vue`
- [Map image](https://github.com/jeremywhalen/greyhawkvectormap/blob/main/src/components/Map/Greyhawk/MapGreyhawkImage.vue): `src/components/Map/Greyhawk/MapGreyhawkImage.vue`
- [Map features](https://github.com/jeremywhalen/greyhawkvectormap/blob/main/src/components/Map/Greyhawk/MapGreyhawkFeatures.vue): `src/components/Map/Greyhawk/MapGreyhawkFeatures.vue`
- [Kingdoms](https://github.com/jeremywhalen/greyhawkvectormap/blob/main/src/components/Map/Greyhawk/MapGreyhawkKingdoms.vue): `src/components/Map/Greyhawk/MapGreyhawkKingdoms.vue`
- [Rivers](https://github.com/jeremywhalen/greyhawkvectormap/blob/main/src/components/Map/Greyhawk/MapGreyhawkRivers.vue): `src/components/Map/Greyhawk/MapGreyhawkRivers.vue`
- [Settlements](https://github.com/jeremywhalen/greyhawkvectormap/blob/main/src/components/Map/Greyhawk/MapGreyhawkSettlements.vue): `src/components/Map/Greyhawk/MapGreyhawkSettlements.vue`
- [Map grid](https://github.com/jeremywhalen/greyhawkvectormap/blob/main/src/components/Map/Grid/MapGrid.vue): `src/components/Map/Grid/MapGrid.vue`
- [Grid canvas](https://github.com/jeremywhalen/greyhawkvectormap/blob/main/src/components/Map/Grid/MapGridCanvas.vue): `src/components/Map/Grid/MapGridCanvas.vue`
- [Grid path](https://github.com/jeremywhalen/greyhawkvectormap/blob/main/src/components/Map/Grid/MapGridPath.vue): `src/components/Map/Grid/MapGridPath.vue`

### Legend and lore

- [Greyhawk legend](https://github.com/jeremywhalen/greyhawkvectormap/blob/main/src/components/Legend/Greyhawk/LegendGreyhawk.vue): `src/components/Legend/Greyhawk/LegendGreyhawk.vue`
- [Political divisions](https://github.com/jeremywhalen/greyhawkvectormap/blob/main/src/components/Legend/Greyhawk/LegendGreyhawkPoliticalDivisions.vue): `src/components/Legend/Greyhawk/LegendGreyhawkPoliticalDivisions.vue`
- [Legend header](https://github.com/jeremywhalen/greyhawkvectormap/blob/main/src/components/Legend/Greyhawk/LegendGreyhawkHeader.vue): `src/components/Legend/Greyhawk/LegendGreyhawkHeader.vue`
- [Legend section](https://github.com/jeremywhalen/greyhawkvectormap/blob/main/src/components/Legend/Section/LegendSection.vue): `src/components/Legend/Section/LegendSection.vue`
- [Legend links](https://github.com/jeremywhalen/greyhawkvectormap/blob/main/src/components/Legend/Link/LegendLink.vue): `src/components/Legend/Link/LegendLink.vue`
- [Heraldry icons](https://github.com/jeremywhalen/greyhawkvectormap/blob/main/src/components/Heraldry/HeraldryIcon.vue): `src/components/Heraldry/HeraldryIcon.vue`

### Search state

- [Search state](https://github.com/jeremywhalen/greyhawkvectormap/blob/main/src/store/search.ts): `src/store/search.ts`
- [Search sanitizer](https://github.com/jeremywhalen/greyhawkvectormap/blob/main/src/utils/sanitize.ts): `src/utils/sanitize.ts`

### Other components

- **Map explorer**

## Connections

- Map explorer → Vue entry: opens app
- Vue entry → App shell: mounts
- Vue entry → Router: installs
- App shell → Router: renders route
- Router → Map view: routes to
- Map view → Map image: renders
- Map view → Greyhawk legend: renders
- Map view → Map image: focuses on linked place
- Map view → Greyhawk legend: handles link clicks
- Greyhawk legend → Political divisions: presents
- Greyhawk legend → Legend header: uses
- Political divisions → Legend section: uses
- Political divisions → Legend links: uses
- Political divisions → Heraldry icons: references
- Map image → Map frame: frames
- Map image → Greyhawk map: displays
- Greyhawk map → Map features: renders
- Greyhawk map → Kingdoms: renders
- Greyhawk map → Rivers: renders
- Greyhawk map → Settlements: renders
- Greyhawk map → Map grid: renders
- Map grid → Grid canvas: uses
- Map grid → Grid path: uses
- Search state → Search sanitizer: sanitizes input