# wongyc-66/my-pdf-tool architecture

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

- Interactive diagram: https://gitdiagram.com/wongyc-66/my-pdf-tool
- Repository: https://github.com/wongyc-66/my-pdf-tool

## Overview

PDF Studio is a local-in-browser PDF utility. The user uploads a PDF, previews its pages, then either splits every page into PDFs in a ZIP or reorders/deletes pages and downloads a revised PDF. The graph separates UI, workflow, and PDF processing. Source excerpts show the main controller’s calls and the processing implementation; README statements support the documented editing and download capabilities. External library links are shown where the processing code uses their globals.

Main entry points: [`js/main.js`](https://github.com/wongyc-66/my-pdf-tool/blob/main/js/main.js) (Workflow controller), [`js/pdf-service.js`](https://github.com/wongyc-66/my-pdf-tool/blob/main/js/pdf-service.js) (PDF loading), [`index.html`](https://github.com/wongyc-66/my-pdf-tool/blob/main/index.html) (PDF interface), [`js/dom.js`](https://github.com/wongyc-66/my-pdf-tool/blob/main/js/dom.js) (DOM rendering)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_ui["Browser interface"]
  node_interface["PDF interface<br/>[index.html]"]
  node_dom["DOM rendering<br/>[dom.js]"]
end

subgraph group_workflow["PDF workflows"]
  node_controller["Workflow controller<br/>[main.js]"]
  node_editing["Page reorder and delete<br/>[main.js]"]
  node_download["Browser download<br/>[main.js]"]
end

subgraph group_processing["PDF processing"]
  node_upload["PDF loading<br/>[pdf-service.js]"]
  node_previews["Page previews<br/>[pdf-service.js]"]
  node_split["Split and ZIP<br/>[pdf-service.js]"]
  node_revised["Revised PDF<br/>[pdf-service.js]"]
end

node_user(("User"))
node_pdfjs{{"PDF.js"}}
node_pdflib{{"pdf-lib"}}
node_jszip{{"JSZip"}}

node_user -->|"uploads PDF"| node_interface
node_interface -.->|"starts workflow"| node_controller
node_controller -->|"updates UI"| node_dom
node_controller -->|"loads file"| node_upload
node_upload -->|"opens preview"| node_pdfjs
node_upload -->|"loads PDF"| node_pdflib
node_controller -->|"requests thumbnails"| node_previews
node_previews -->|"renders pages"| node_pdfjs
node_user -->|"reorders or deletes"| node_editing
node_editing -->|"refreshes page cards"| node_dom
node_controller -->|"creates ZIP"| node_split
node_split -->|"copies pages"| node_pdflib
node_split -->|"packages PDFs"| node_jszip
node_controller -->|"exports page order"| node_revised
node_revised -->|"copies pages"| node_pdflib
node_controller -->|"downloads result"| node_download

click node_interface "https://github.com/wongyc-66/my-pdf-tool/blob/main/index.html"
click node_dom "https://github.com/wongyc-66/my-pdf-tool/blob/main/js/dom.js"
click node_controller "https://github.com/wongyc-66/my-pdf-tool/blob/main/js/main.js"
click node_upload "https://github.com/wongyc-66/my-pdf-tool/blob/main/js/pdf-service.js"
click node_previews "https://github.com/wongyc-66/my-pdf-tool/blob/main/js/pdf-service.js"
click node_editing "https://github.com/wongyc-66/my-pdf-tool/blob/main/js/main.js"
click node_split "https://github.com/wongyc-66/my-pdf-tool/blob/main/js/pdf-service.js"
click node_revised "https://github.com/wongyc-66/my-pdf-tool/blob/main/js/pdf-service.js"
click node_download "https://github.com/wongyc-66/my-pdf-tool/blob/main/js/main.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_interface,node_dom,node_user toneBlue
class node_controller,node_editing,node_download toneAmber
class node_upload,node_previews,node_split,node_revised toneMint
class node_pdfjs,node_pdflib,node_jszip toneIndigo
```

## Components

### Browser interface

- [PDF interface](https://github.com/wongyc-66/my-pdf-tool/blob/main/index.html): `index.html`
- [DOM rendering](https://github.com/wongyc-66/my-pdf-tool/blob/main/js/dom.js): `js/dom.js`

### PDF workflows

- [Workflow controller](https://github.com/wongyc-66/my-pdf-tool/blob/main/js/main.js): `js/main.js`
- [Page reorder and delete](https://github.com/wongyc-66/my-pdf-tool/blob/main/js/main.js): `js/main.js`
- [Browser download](https://github.com/wongyc-66/my-pdf-tool/blob/main/js/main.js): `js/main.js`

### PDF processing

- [PDF loading](https://github.com/wongyc-66/my-pdf-tool/blob/main/js/pdf-service.js): `js/pdf-service.js`
- [Page previews](https://github.com/wongyc-66/my-pdf-tool/blob/main/js/pdf-service.js): `js/pdf-service.js`
- [Split and ZIP](https://github.com/wongyc-66/my-pdf-tool/blob/main/js/pdf-service.js): `js/pdf-service.js`
- [Revised PDF](https://github.com/wongyc-66/my-pdf-tool/blob/main/js/pdf-service.js): `js/pdf-service.js`

### Other components

- **User**
- **PDF.js**
- **pdf-lib**
- **JSZip**

## Connections

- User → PDF interface: uploads PDF (evidence: `readme.md`)
- PDF interface → Workflow controller: starts workflow
- Workflow controller → DOM rendering: updates UI (evidence: `js/main.js`)
- Workflow controller → PDF loading: loads file (evidence: `js/main.js`)
- PDF loading → PDF.js: opens preview (evidence: `js/pdf-service.js`)
- PDF loading → pdf-lib: loads PDF (evidence: `js/pdf-service.js`)
- Workflow controller → Page previews: requests thumbnails (evidence: `js/main.js`)
- Page previews → PDF.js: renders pages (evidence: `js/pdf-service.js`)
- User → Page reorder and delete: reorders or deletes (evidence: `readme.md`)
- Page reorder and delete → DOM rendering: refreshes page cards (evidence: `js/main.js`)
- Workflow controller → Split and ZIP: creates ZIP (evidence: `js/main.js`)
- Split and ZIP → pdf-lib: copies pages (evidence: `js/pdf-service.js`)
- Split and ZIP → JSZip: packages PDFs (evidence: `js/pdf-service.js`)
- Workflow controller → Revised PDF: exports page order (evidence: `js/main.js`)
- Revised PDF → pdf-lib: copies pages (evidence: `js/pdf-service.js`)
- Workflow controller → Browser download: downloads result (evidence: `js/main.js`)