# pcmdk369/waterix architecture

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

- Interactive diagram: https://gitdiagram.com/pcmdk369/waterix
- Repository: https://github.com/pcmdk369/waterix

## Overview

Waterix is a browser-based image and video editor for removing unwanted marks and adding text or logo watermarks. Users upload media, select a removal or watermark workflow, configure the edit, submit it for server-side processing, monitor a job, then compare and download the result. Image removal uses a painted or drawn mask; video removal uses a target region. The sampled server code confirms job tracking and image/video watermark processing; some route details and unsampled subsystem wiring are not shown, so uncertain links are omitted.

Main entry points: [`src/App.tsx`](https://github.com/pcmdk369/waterix/blob/main/src/App.tsx) (App workflow), [`server.ts`](https://github.com/pcmdk369/waterix/blob/main/server.ts) (Express API), [`server/watermarkProcessor.ts`](https://github.com/pcmdk369/waterix/blob/main/server/watermarkProcessor.ts) (Watermark rendering), [`src/components/ImageEditor.tsx`](https://github.com/pcmdk369/waterix/blob/main/src/components/ImageEditor.tsx) (Image removal)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_client["Editing interface"]
  node_app["App workflow<br/>[App.tsx]"]
  node_upload["Media upload<br/>[UploadZone.tsx]"]
  node_imageedit["Image removal<br/>[ImageEditor.tsx]"]
  node_videoedit["Video removal<br/>[VideoEditor.tsx]"]
  node_watermarkui["Watermark setup"]
  node_progress["Job progress<br/>[ProcessingView.tsx]"]
  node_result["Compare and download<br/>[ResultView.tsx]"]
  node_legal["Privacy and terms<br/>[PrivacyPage.tsx]"]
  node_terms["Terms page<br/>[TermsPage.tsx]"]
end

subgraph group_api["Job API"]
  node_api["Express API<br/>[server.ts]"]
end

subgraph group_processing["Media processing"]
  node_inpaint["Image inpainting<br/>[inpainting.ts]"]
  node_video["Video processing<br/>[videoProcessor.ts]"]
  node_watermark["Watermark rendering"]
end

subgraph group_state["Temporary job state"]
  node_jobs[("Job registry and files<br/>[jobStore.ts]")]
end

node_user(("Editor"))
node_sharp["Image engine"]
node_ffmpeg["FFmpeg tools"]
node_media["Uploaded media"]

node_user -->|"selects media"| node_upload
node_upload -->|"reports selection"| node_app
node_app -->|"opens image edit"| node_imageedit
node_app -->|"opens video edit"| node_videoedit
node_app -->|"opens watermark setup"| node_watermarkui
node_app -->|"shows privacy"| node_legal
node_app -->|"shows terms"| node_terms
node_user -->|"marks image region"| node_imageedit
node_user -->|"marks video region"| node_videoedit
node_user -->|"configures watermark"| node_watermarkui
node_imageedit -->|"submits removal"| node_app
node_videoedit -->|"submits removal"| node_app
node_watermarkui -->|"submits watermark"| node_app
node_app -->|"uploads and requests jobs"| node_api
node_api -->|"creates and updates"| node_jobs
node_api -->|"processes image removal"| node_inpaint
node_api -->|"reads video metadata"| node_video
node_api -->|"renders watermark"| node_watermark
node_inpaint -->|"reads and writes pixels"| node_sharp
node_watermark -->|"renders image layers"| node_sharp
node_video -->|"probes and processes video"| node_ffmpeg
node_watermark -->|"reads video metadata"| node_video
node_watermark -->|"composites video"| node_ffmpeg
node_media -->|"uploaded for processing"| node_api
node_app -->|"polls job status"| node_api
node_api -->|"returns job state"| node_app
node_app -->|"shows processing state"| node_progress
node_app -->|"shows completed job"| node_result
node_result -->|"downloads result"| node_api
node_app -->|"deletes temporary job"| node_api

click node_app "https://github.com/pcmdk369/waterix/blob/main/src/App.tsx"
click node_upload "https://github.com/pcmdk369/waterix/blob/main/src/components/UploadZone.tsx"
click node_imageedit "https://github.com/pcmdk369/waterix/blob/main/src/components/ImageEditor.tsx"
click node_videoedit "https://github.com/pcmdk369/waterix/blob/main/src/components/VideoEditor.tsx"
click node_watermarkui "https://github.com/pcmdk369/waterix/blob/main/src/components/AddWatermarkEditor.tsx"
click node_progress "https://github.com/pcmdk369/waterix/blob/main/src/components/ProcessingView.tsx"
click node_result "https://github.com/pcmdk369/waterix/blob/main/src/components/ResultView.tsx"
click node_legal "https://github.com/pcmdk369/waterix/blob/main/src/components/PrivacyPage.tsx"
click node_terms "https://github.com/pcmdk369/waterix/blob/main/src/components/TermsPage.tsx"
click node_api "https://github.com/pcmdk369/waterix/blob/main/server.ts"
click node_jobs "https://github.com/pcmdk369/waterix/blob/main/server/jobStore.ts"
click node_inpaint "https://github.com/pcmdk369/waterix/blob/main/server/inpainting.ts"
click node_video "https://github.com/pcmdk369/waterix/blob/main/server/videoProcessor.ts"
click node_watermark "https://github.com/pcmdk369/waterix/blob/main/server/watermarkProcessor.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_app,node_upload,node_imageedit,node_videoedit,node_watermarkui,node_progress,node_result,node_legal,node_terms toneBlue
class node_api toneAmber
class node_inpaint,node_video,node_watermark toneMint
class node_jobs toneRose
class node_user,node_sharp,node_ffmpeg,node_media toneIndigo
```

## Components

### Editing interface

- [App workflow](https://github.com/pcmdk369/waterix/blob/main/src/App.tsx): `src/App.tsx`
- [Media upload](https://github.com/pcmdk369/waterix/blob/main/src/components/UploadZone.tsx): `src/components/UploadZone.tsx`
- [Image removal](https://github.com/pcmdk369/waterix/blob/main/src/components/ImageEditor.tsx): `src/components/ImageEditor.tsx`
- [Video removal](https://github.com/pcmdk369/waterix/blob/main/src/components/VideoEditor.tsx): `src/components/VideoEditor.tsx`
- [Watermark setup](https://github.com/pcmdk369/waterix/blob/main/src/components/AddWatermarkEditor.tsx): `src/components/AddWatermarkEditor.tsx`
- [Job progress](https://github.com/pcmdk369/waterix/blob/main/src/components/ProcessingView.tsx): `src/components/ProcessingView.tsx`
- [Compare and download](https://github.com/pcmdk369/waterix/blob/main/src/components/ResultView.tsx): `src/components/ResultView.tsx`
- [Privacy and terms](https://github.com/pcmdk369/waterix/blob/main/src/components/PrivacyPage.tsx): `src/components/PrivacyPage.tsx`
- [Terms page](https://github.com/pcmdk369/waterix/blob/main/src/components/TermsPage.tsx): `src/components/TermsPage.tsx`

### Job API

- [Express API](https://github.com/pcmdk369/waterix/blob/main/server.ts): `server.ts`

### Media processing

- [Image inpainting](https://github.com/pcmdk369/waterix/blob/main/server/inpainting.ts): `server/inpainting.ts`
- [Video processing](https://github.com/pcmdk369/waterix/blob/main/server/videoProcessor.ts): `server/videoProcessor.ts`
- [Watermark rendering](https://github.com/pcmdk369/waterix/blob/main/server/watermarkProcessor.ts): `server/watermarkProcessor.ts`

### Temporary job state

- [Job registry and files](https://github.com/pcmdk369/waterix/blob/main/server/jobStore.ts): `server/jobStore.ts`

### Other components

- **Editor**
- **Image engine**
- **FFmpeg tools**
- **Uploaded media**

## Connections

- Editor → Media upload: selects media
- Media upload → App workflow: reports selection
- App workflow → Image removal: opens image edit
- App workflow → Video removal: opens video edit
- App workflow → Watermark setup: opens watermark setup
- App workflow → Privacy and terms: shows privacy
- App workflow → Terms page: shows terms
- Editor → Image removal: marks image region
- Editor → Video removal: marks video region
- Editor → Watermark setup: configures watermark
- Image removal → App workflow: submits removal
- Video removal → App workflow: submits removal
- Watermark setup → App workflow: submits watermark
- App workflow → Express API: uploads and requests jobs
- Express API → Job registry and files: creates and updates
- Express API → Image inpainting: processes image removal
- Express API → Video processing: reads video metadata
- Express API → Watermark rendering: renders watermark
- Image inpainting → Image engine: reads and writes pixels
- Watermark rendering → Image engine: renders image layers
- Video processing → FFmpeg tools: probes and processes video
- Watermark rendering → Video processing: reads video metadata
- Watermark rendering → FFmpeg tools: composites video
- Uploaded media → Express API: uploaded for processing
- App workflow → Express API: polls job status
- Express API → App workflow: returns job state
- App workflow → Job progress: shows processing state
- App workflow → Compare and download: shows completed job
- Compare and download → Express API: downloads result
- App workflow → Express API: deletes temporary job