# izumidkc/signature-processing architecture

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

## Overview

Signature Cleaner is a browser-based tool for batch cleaning signature images and exporting transparent SVG or PNG, with no backend. The workflow is: select or drop images, validate and decode them, process them in a Web Worker, inspect results and adjust settings, then export or copy them. The README also documents batch saving, error reporting, and image limits. Several stages share app.js or engine.js; the excerpts show the worker dispatch and processing calls, while some UI and export details are supported only by the README.

Main entry points: [`web/src/app.js`](https://github.com/izumidkc/signature-processing/blob/main/web/src/app.js) (Batch workflow), [`web/src/worker.js`](https://github.com/izumidkc/signature-processing/blob/main/web/src/worker.js) (Worker dispatch), [`web/src/engine.js`](https://github.com/izumidkc/signature-processing/blob/main/web/src/engine.js) (SVG vectorization), [`web/src/index.html`](https://github.com/izumidkc/signature-processing/blob/main/web/src/index.html) (Web interface)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_intake["Image intake"]
  node_interface["Web interface<br/>[index.html]"]
  node_intake["File intake and validation<br/>[app.js]"]
  node_decode["Image decode and resize<br/>[app.js]"]
  node_batch["Batch workflow<br/>[app.js]"]
end

subgraph group_processing["Ink processing"]
  node_worker["Worker dispatch<br/>[worker.js]"]
  node_extract["Ink extraction<br/>[engine.js]"]
  node_cleanup["Noise filtering and warnings<br/>[engine.js]"]
  node_vectorize["SVG vectorization<br/>[engine.js]"]
  node_tracer["ImageTracerJS"]
end

subgraph group_review["Review and settings"]
  node_review["Preview and inspection<br/>[app.js]"]
  node_settings["Processing settings<br/>[app.js]"]
end

subgraph group_outputs["Export and save"]
  node_svg["SVG result<br/>[engine.js]"]
  node_raster["PNG rasterization<br/>[app.js]"]
  node_export["Download and clipboard<br/>[app.js]"]
  node_save["Batch save<br/>[app.js]"]
end

node_user(("Image editor"))

node_user -->|"selects images"| node_interface
node_interface -->|"submits files"| node_intake
node_intake -->|"queues valid files"| node_batch
node_batch -->|"decodes images"| node_decode
node_batch -->|"dispatches jobs"| node_worker
node_worker -->|"extracts ink"| node_extract
node_worker -->|"vectorizes result"| node_vectorize
node_extract -->|"filters components"| node_cleanup
node_vectorize -->|"traces contours"| node_tracer
node_vectorize -->|"creates SVG"| node_svg
node_batch -->|"presents results"| node_review
node_user -->|"adjusts options"| node_settings
node_settings -->|"reapplies options"| node_batch
node_svg -->|"rasterizes PNG"| node_raster
node_user -->|"requests export"| node_export
node_export -->|"downloads SVG"| node_svg
node_export -->|"downloads or copies PNG"| node_raster
node_user -->|"saves batch"| node_save

click node_interface "https://github.com/izumidkc/signature-processing/blob/main/web/src/index.html"
click node_intake "https://github.com/izumidkc/signature-processing/blob/main/web/src/app.js"
click node_decode "https://github.com/izumidkc/signature-processing/blob/main/web/src/app.js"
click node_batch "https://github.com/izumidkc/signature-processing/blob/main/web/src/app.js"
click node_worker "https://github.com/izumidkc/signature-processing/blob/main/web/src/worker.js"
click node_extract "https://github.com/izumidkc/signature-processing/blob/main/web/src/engine.js"
click node_cleanup "https://github.com/izumidkc/signature-processing/blob/main/web/src/engine.js"
click node_vectorize "https://github.com/izumidkc/signature-processing/blob/main/web/src/engine.js"
click node_review "https://github.com/izumidkc/signature-processing/blob/main/web/src/app.js"
click node_settings "https://github.com/izumidkc/signature-processing/blob/main/web/src/app.js"
click node_svg "https://github.com/izumidkc/signature-processing/blob/main/web/src/engine.js"
click node_raster "https://github.com/izumidkc/signature-processing/blob/main/web/src/app.js"
click node_export "https://github.com/izumidkc/signature-processing/blob/main/web/src/app.js"
click node_save "https://github.com/izumidkc/signature-processing/blob/main/web/src/app.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_intake,node_decode,node_batch toneBlue
class node_worker,node_extract,node_cleanup,node_vectorize,node_tracer toneAmber
class node_review,node_settings toneMint
class node_svg,node_raster,node_export,node_save toneRose
class node_user toneIndigo
```

## Components

### Image intake

- [Web interface](https://github.com/izumidkc/signature-processing/blob/main/web/src/index.html): `web/src/index.html`
- [File intake and validation](https://github.com/izumidkc/signature-processing/blob/main/web/src/app.js): `web/src/app.js`
- [Image decode and resize](https://github.com/izumidkc/signature-processing/blob/main/web/src/app.js): `web/src/app.js`
- [Batch workflow](https://github.com/izumidkc/signature-processing/blob/main/web/src/app.js): `web/src/app.js`

### Ink processing

- [Worker dispatch](https://github.com/izumidkc/signature-processing/blob/main/web/src/worker.js): `web/src/worker.js`
- [Ink extraction](https://github.com/izumidkc/signature-processing/blob/main/web/src/engine.js): `web/src/engine.js`
- [Noise filtering and warnings](https://github.com/izumidkc/signature-processing/blob/main/web/src/engine.js): `web/src/engine.js`
- [SVG vectorization](https://github.com/izumidkc/signature-processing/blob/main/web/src/engine.js): `web/src/engine.js`
- **ImageTracerJS**

### Review and settings

- [Preview and inspection](https://github.com/izumidkc/signature-processing/blob/main/web/src/app.js): `web/src/app.js`
- [Processing settings](https://github.com/izumidkc/signature-processing/blob/main/web/src/app.js): `web/src/app.js`

### Export and save

- [SVG result](https://github.com/izumidkc/signature-processing/blob/main/web/src/engine.js): `web/src/engine.js`
- [PNG rasterization](https://github.com/izumidkc/signature-processing/blob/main/web/src/app.js): `web/src/app.js`
- [Download and clipboard](https://github.com/izumidkc/signature-processing/blob/main/web/src/app.js): `web/src/app.js`
- [Batch save](https://github.com/izumidkc/signature-processing/blob/main/web/src/app.js): `web/src/app.js`

### Other components

- **Image editor**

## Connections

- Image editor → Web interface: selects images (evidence: `README.md`)
- Web interface → File intake and validation: submits files (evidence: `web/src/app.js`)
- File intake and validation → Batch workflow: queues valid files (evidence: `web/src/app.js`)
- Batch workflow → Image decode and resize: decodes images (evidence: `web/src/app.js`)
- Batch workflow → Worker dispatch: dispatches jobs (evidence: `web/src/app.js`)
- Worker dispatch → Ink extraction: extracts ink (evidence: `web/src/worker.js`)
- Worker dispatch → SVG vectorization: vectorizes result (evidence: `web/src/worker.js`)
- Ink extraction → Noise filtering and warnings: filters components (evidence: `web/src/engine.js`)
- SVG vectorization → ImageTracerJS: traces contours (evidence: `web/src/engine.js`)
- SVG vectorization → SVG result: creates SVG (evidence: `web/src/engine.js`)
- Batch workflow → Preview and inspection: presents results (evidence: `README.md`)
- Image editor → Processing settings: adjusts options (evidence: `README.md`)
- Processing settings → Batch workflow: reapplies options (evidence: `README.md`)
- SVG result → PNG rasterization: rasterizes PNG (evidence: `web/src/app.js`)
- Image editor → Download and clipboard: requests export (evidence: `README.md`)
- Download and clipboard → SVG result: downloads SVG (evidence: `web/src/app.js`)
- Download and clipboard → PNG rasterization: downloads or copies PNG (evidence: `README.md`)
- Image editor → Batch save: saves batch (evidence: `README.md`)