# maaz-gok/trello-board architecture

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

- Interactive diagram: https://gitdiagram.com/maaz-gok/trello-board
- Repository: https://github.com/maaz-gok/trello-board

## Overview

Trello Bug Viewer is a standalone, browser-local viewer for Trello JSON exports. The main workflow is to open the page, load an export by file picker or drag-and-drop, parse it, and render ordered lists and cards; selecting a card opens its details. The README also documents a preloaded-data mode. The sampled JavaScript shows the import, rendering, and modal behavior; the preload relationship is documented, but its runtime wiring is not shown in the excerpt.

Main entry points: [`index.html`](https://github.com/maaz-gok/trello-board/blob/main/index.html) (Viewer page), [`script.js`](https://github.com/maaz-gok/trello-board/blob/main/script.js) (JSON import), [`style.css`](https://github.com/maaz-gok/trello-board/blob/main/style.css) (Board styling)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_page["Page and styling"]
  node_page["Viewer page<br/>[index.html]"]
  node_preload["Preloaded export<br/>[index.html]"]
  node_styles["Board styling<br/>[style.css]"]
end

subgraph group_import["Import and board"]
  node_importer["JSON import<br/>[script.js]"]
  node_parser["Export parsing<br/>[script.js]"]
  node_board["Board rendering<br/>[script.js]"]
  node_lists["Lists and cards<br/>[script.js]"]
end

subgraph group_details["Card details"]
  node_card["Card selection<br/>[script.js]"]
  node_modal["Detail modal<br/>[script.js]"]
end

node_user(("Viewer"))

node_user -->|"opens"| node_page
node_user -->|"drops or selects"| node_importer
node_importer -->|"reads and parses"| node_parser
node_parser -->|"processes data"| node_board
node_board -->|"renders"| node_lists
node_lists -->|"handles click"| node_card
node_card -->|"opens"| node_modal
node_preload -->|"preloads data"| node_page
node_styles -.->|"styles"| node_page

click node_page "https://github.com/maaz-gok/trello-board/blob/main/index.html"
click node_preload "https://github.com/maaz-gok/trello-board/blob/main/index.html"
click node_styles "https://github.com/maaz-gok/trello-board/blob/main/style.css"
click node_importer "https://github.com/maaz-gok/trello-board/blob/main/script.js"
click node_parser "https://github.com/maaz-gok/trello-board/blob/main/script.js"
click node_board "https://github.com/maaz-gok/trello-board/blob/main/script.js"
click node_lists "https://github.com/maaz-gok/trello-board/blob/main/script.js"
click node_card "https://github.com/maaz-gok/trello-board/blob/main/script.js"
click node_modal "https://github.com/maaz-gok/trello-board/blob/main/script.js"

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_page,node_preload,node_styles,node_user toneBlue
class node_importer,node_parser,node_board,node_lists toneAmber
class node_card,node_modal toneMint
```

## Components

### Page and styling

- [Viewer page](https://github.com/maaz-gok/trello-board/blob/main/index.html): `index.html`
- [Preloaded export](https://github.com/maaz-gok/trello-board/blob/main/index.html): `index.html`
- [Board styling](https://github.com/maaz-gok/trello-board/blob/main/style.css): `style.css`

### Import and board

- [JSON import](https://github.com/maaz-gok/trello-board/blob/main/script.js): `script.js`
- [Export parsing](https://github.com/maaz-gok/trello-board/blob/main/script.js): `script.js`
- [Board rendering](https://github.com/maaz-gok/trello-board/blob/main/script.js): `script.js`
- [Lists and cards](https://github.com/maaz-gok/trello-board/blob/main/script.js): `script.js`

### Card details

- [Card selection](https://github.com/maaz-gok/trello-board/blob/main/script.js): `script.js`
- [Detail modal](https://github.com/maaz-gok/trello-board/blob/main/script.js): `script.js`

### Other components

- **Viewer**

## Connections

- Viewer → Viewer page: opens (evidence: `README.md`)
- Viewer → JSON import: drops or selects (evidence: `script.js`)
- JSON import → Export parsing: reads and parses (evidence: `script.js`)
- Export parsing → Board rendering: processes data (evidence: `script.js`)
- Board rendering → Lists and cards: renders (evidence: `script.js`)
- Lists and cards → Card selection: handles click (evidence: `script.js`)
- Card selection → Detail modal: opens (evidence: `script.js`)
- Preloaded export → Viewer page: preloads data (evidence: `README.md`)
- Board styling → Viewer page: styles