# chanjoongx/atlas architecture

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

## Overview

Atlas turns a public GitHub repository into an interactive isometric city map. A user submits a repository reference; the frontend uses a pre-rendered demo when available or requests analysis, then presents the annotated result for exploration and PNG export. The live analysis stages are archive ingestion, file and import parsing, spatial layout, and landmark annotation. The frontend converts the result into a renderable scene and draws the map. README capabilities such as the animated landing skyline, shareable links, themes, and inspector are included; unsampled subsystem wiring is omitted where uncertain.

Main entry points: [`src/App.tsx`](https://github.com/chanjoongx/atlas/blob/main/src/App.tsx) (App workflow), [`functions/api/analyze.ts`](https://github.com/chanjoongx/atlas/blob/main/functions/api/analyze.ts) (Analysis endpoint), [`src/lib/iso/index.ts`](https://github.com/chanjoongx/atlas/blob/main/src/lib/iso/index.ts) (Map interaction), [`src/lib/iso/draw.ts`](https://github.com/chanjoongx/atlas/blob/main/src/lib/iso/draw.ts) (SVG drawing)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_analysis["Repository Analysis"]
  node_analyze["Analysis endpoint<br/>[analyze.ts]"]
  node_ingester["Archive ingester<br/>[ingester.ts]"]
  node_tar_reader["Tar reader<br/>[tar.ts]"]
  node_parser["Structure parser<br/>[parser.ts]"]
  node_layout["District layout<br/>[layout.ts]"]
  node_annotator["Landmark annotator<br/>[annotator.ts]"]
end

subgraph group_frontend["Map Experience"]
  node_app["App workflow<br/>[App.tsx]"]
  node_api_client["API client<br/>[api-client.ts]"]
  node_citymap["City map view<br/>[CityMap.tsx]"]
  node_inspector["File inspector<br/>[Inspector.tsx]"]
  node_controls["Map controls<br/>[MapControls.tsx]"]
  node_repo_input["Repository input<br/>[RepoInput.tsx]"]
  node_themes["Theme settings<br/>[theme.ts]"]
end

subgraph group_rendering["Isometric Rendering"]
  node_scene["Scene builder<br/>[scene.ts]"]
  node_iso_index["Map interaction<br/>[index.ts]"]
  node_draw["SVG drawing<br/>[draw.ts]"]
  node_projection["Isometric projection<br/>[projection.ts]"]
  node_palette["Map palette<br/>[palette.ts]"]
end

subgraph group_discovery["Landing Discovery"]
  node_landing["Landing page<br/>[Landing.tsx]"]
  node_skyline["Animated skyline<br/>[skyline.ts]"]
end

subgraph group_export["Map Export"]
  node_export_button["Export control<br/>[ExportButton.tsx]"]
  node_png_export["PNG export<br/>[png-export.ts]"]
end

node_visitor(("Repository visitor"))
node_github[("GitHub archive")]

node_visitor -->|"enters reference"| node_repo_input
node_repo_input -->|"submits repository"| node_app
node_app -->|"requests analysis"| node_api_client
node_api_client -->|"posts request"| node_analyze
node_api_client -->|"returns layout"| node_app
node_analyze -->|"runs ingestion"| node_ingester
node_ingester -->|"downloads archive"| node_github
node_ingester -->|"reads stream"| node_tar_reader
node_analyze -->|"runs parsing"| node_parser
node_analyze -->|"runs layout"| node_layout
node_analyze -->|"runs annotation"| node_annotator
node_app -->|"builds scene"| node_scene
node_scene -->|"returns scene"| node_app
node_app -->|"shows map"| node_citymap
node_citymap -->|"renders interaction"| node_iso_index
node_iso_index -->|"draws scene"| node_draw
node_draw -->|"projects geometry"| node_projection
node_draw -->|"places nodes"| node_scene
node_visitor -->|"selects building"| node_inspector
node_app -->|"opens details"| node_inspector
node_visitor -->|"navigates map"| node_controls
node_app -->|"provides controls"| node_controls
node_visitor -->|"opens Atlas"| node_landing
node_landing -->|"shows skyline"| node_skyline
node_app -->|"reads settings"| node_themes
node_iso_index -->|"reads colors"| node_palette
node_visitor -->|"requests export"| node_export_button
node_export_button -->|"starts export"| node_png_export
node_iso_index -->|"exports markup"| node_draw

click node_app "https://github.com/chanjoongx/atlas/blob/main/src/App.tsx"
click node_api_client "https://github.com/chanjoongx/atlas/blob/main/src/lib/api-client.ts"
click node_analyze "https://github.com/chanjoongx/atlas/blob/main/functions/api/analyze.ts"
click node_ingester "https://github.com/chanjoongx/atlas/blob/main/functions/lib/agents/ingester.ts"
click node_tar_reader "https://github.com/chanjoongx/atlas/blob/main/functions/lib/tar.ts"
click node_parser "https://github.com/chanjoongx/atlas/blob/main/functions/lib/agents/parser.ts"
click node_layout "https://github.com/chanjoongx/atlas/blob/main/functions/lib/agents/layout.ts"
click node_annotator "https://github.com/chanjoongx/atlas/blob/main/functions/lib/agents/annotator.ts"
click node_scene "https://github.com/chanjoongx/atlas/blob/main/src/lib/iso/scene.ts"
click node_iso_index "https://github.com/chanjoongx/atlas/blob/main/src/lib/iso/index.ts"
click node_draw "https://github.com/chanjoongx/atlas/blob/main/src/lib/iso/draw.ts"
click node_projection "https://github.com/chanjoongx/atlas/blob/main/src/lib/iso/projection.ts"
click node_citymap "https://github.com/chanjoongx/atlas/blob/main/src/components/CityMap.tsx"
click node_inspector "https://github.com/chanjoongx/atlas/blob/main/src/components/Inspector.tsx"
click node_controls "https://github.com/chanjoongx/atlas/blob/main/src/components/MapControls.tsx"
click node_repo_input "https://github.com/chanjoongx/atlas/blob/main/src/components/RepoInput.tsx"
click node_export_button "https://github.com/chanjoongx/atlas/blob/main/src/components/ExportButton.tsx"
click node_png_export "https://github.com/chanjoongx/atlas/blob/main/src/lib/png-export.ts"
click node_landing "https://github.com/chanjoongx/atlas/blob/main/src/components/Landing.tsx"
click node_skyline "https://github.com/chanjoongx/atlas/blob/main/src/lib/iso/skyline.ts"
click node_themes "https://github.com/chanjoongx/atlas/blob/main/src/lib/theme.ts"
click node_palette "https://github.com/chanjoongx/atlas/blob/main/src/lib/palette.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_analyze,node_ingester,node_tar_reader,node_parser,node_layout,node_annotator toneBlue
class node_app,node_api_client,node_citymap,node_inspector,node_controls,node_repo_input,node_themes,node_github toneAmber
class node_scene,node_iso_index,node_draw,node_projection,node_palette toneMint
class node_landing,node_skyline toneRose
class node_export_button,node_png_export,node_visitor toneIndigo
```

## Components

### Repository Analysis

- [Analysis endpoint](https://github.com/chanjoongx/atlas/blob/main/functions/api/analyze.ts): `functions/api/analyze.ts`
- [Archive ingester](https://github.com/chanjoongx/atlas/blob/main/functions/lib/agents/ingester.ts): `functions/lib/agents/ingester.ts`
- [Tar reader](https://github.com/chanjoongx/atlas/blob/main/functions/lib/tar.ts): `functions/lib/tar.ts`
- [Structure parser](https://github.com/chanjoongx/atlas/blob/main/functions/lib/agents/parser.ts): `functions/lib/agents/parser.ts`
- [District layout](https://github.com/chanjoongx/atlas/blob/main/functions/lib/agents/layout.ts): `functions/lib/agents/layout.ts`
- [Landmark annotator](https://github.com/chanjoongx/atlas/blob/main/functions/lib/agents/annotator.ts): `functions/lib/agents/annotator.ts`

### Map Experience

- [App workflow](https://github.com/chanjoongx/atlas/blob/main/src/App.tsx): `src/App.tsx`
- [API client](https://github.com/chanjoongx/atlas/blob/main/src/lib/api-client.ts): `src/lib/api-client.ts`
- [City map view](https://github.com/chanjoongx/atlas/blob/main/src/components/CityMap.tsx): `src/components/CityMap.tsx`
- [File inspector](https://github.com/chanjoongx/atlas/blob/main/src/components/Inspector.tsx): `src/components/Inspector.tsx`
- [Map controls](https://github.com/chanjoongx/atlas/blob/main/src/components/MapControls.tsx): `src/components/MapControls.tsx`
- [Repository input](https://github.com/chanjoongx/atlas/blob/main/src/components/RepoInput.tsx): `src/components/RepoInput.tsx`
- [Theme settings](https://github.com/chanjoongx/atlas/blob/main/src/lib/theme.ts): `src/lib/theme.ts`

### Isometric Rendering

- [Scene builder](https://github.com/chanjoongx/atlas/blob/main/src/lib/iso/scene.ts): `src/lib/iso/scene.ts`
- [Map interaction](https://github.com/chanjoongx/atlas/blob/main/src/lib/iso/index.ts): `src/lib/iso/index.ts`
- [SVG drawing](https://github.com/chanjoongx/atlas/blob/main/src/lib/iso/draw.ts): `src/lib/iso/draw.ts`
- [Isometric projection](https://github.com/chanjoongx/atlas/blob/main/src/lib/iso/projection.ts): `src/lib/iso/projection.ts`
- [Map palette](https://github.com/chanjoongx/atlas/blob/main/src/lib/palette.ts): `src/lib/palette.ts`

### Landing Discovery

- [Landing page](https://github.com/chanjoongx/atlas/blob/main/src/components/Landing.tsx): `src/components/Landing.tsx`
- [Animated skyline](https://github.com/chanjoongx/atlas/blob/main/src/lib/iso/skyline.ts): `src/lib/iso/skyline.ts`

### Map Export

- [Export control](https://github.com/chanjoongx/atlas/blob/main/src/components/ExportButton.tsx): `src/components/ExportButton.tsx`
- [PNG export](https://github.com/chanjoongx/atlas/blob/main/src/lib/png-export.ts): `src/lib/png-export.ts`

### Other components

- **Repository visitor**
- **GitHub archive**

## Connections

- Repository visitor → Repository input: enters reference
- Repository input → App workflow: submits repository
- App workflow → API client: requests analysis
- API client → Analysis endpoint: posts request
- API client → App workflow: returns layout
- Analysis endpoint → Archive ingester: runs ingestion
- Archive ingester → GitHub archive: downloads archive
- Archive ingester → Tar reader: reads stream
- Analysis endpoint → Structure parser: runs parsing
- Analysis endpoint → District layout: runs layout
- Analysis endpoint → Landmark annotator: runs annotation
- App workflow → Scene builder: builds scene
- Scene builder → App workflow: returns scene
- App workflow → City map view: shows map
- City map view → Map interaction: renders interaction
- Map interaction → SVG drawing: draws scene
- SVG drawing → Isometric projection: projects geometry
- SVG drawing → Scene builder: places nodes
- Repository visitor → File inspector: selects building
- App workflow → File inspector: opens details
- Repository visitor → Map controls: navigates map
- App workflow → Map controls: provides controls
- Repository visitor → Landing page: opens Atlas
- Landing page → Animated skyline: shows skyline
- App workflow → Theme settings: reads settings
- Map interaction → Map palette: reads colors
- Repository visitor → Export control: requests export
- Export control → PNG export: starts export
- Map interaction → SVG drawing: exports markup