# suzunacodehime/tool_box architecture

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

- Interactive diagram: https://gitdiagram.com/suzunacodehime/tool_box
- Repository: https://github.com/suzunacodehime/tool_box

## Overview

Tool Box is a static, browser-only suite of independent utilities. The main workflow is to open the home page, choose a tool, provide text or a file, and interact with the result in that tool’s page; most processing stays in the browser. The graph preserves the README’s major tool branches and the documented external libraries and image-generation providers. Sampled scripts support the detailed local processing and storage links; unsampled tools are represented by their README-listed capabilities without inferred internal wiring.

Main entry points: [`index.html`](https://github.com/suzunacodehime/tool_box/blob/main/index.html) (Toolbox home), [`markdown-preview/script.js`](https://github.com/suzunacodehime/tool_box/blob/main/markdown-preview/script.js) (Markdown preview), [`image-gen/script.js`](https://github.com/suzunacodehime/tool_box/blob/main/image-gen/script.js) (Image generation), [`text-stats/index.html`](https://github.com/suzunacodehime/tool_box/blob/main/text-stats/index.html) (Text statistics page)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_text["Text tools"]
  node_textstats_page["Text statistics page<br/>[index.html]"]
  node_textstats["Text statistics<br/>[script.js]"]
  node_fancy_page["Fancy text page<br/>[index.html]"]
  node_fancy["Fancy text conversion<br/>[script.js]"]
  node_convert_page["Chinese conversion page<br/>[index.html]"]
  node_convert["Chinese conversion<br/>[script.js]"]
  node_markdown_page["Markdown preview page<br/>[index.html]"]
  node_markdown["Markdown preview<br/>[script.js]"]
end

subgraph group_media["Image tools"]
  node_exif_page["Photo information page<br/>[index.html]"]
  node_exif["Photo metadata viewer<br/>[script.js]"]
  node_watermark_page["Watermark page<br/>[index.html]"]
  node_watermark["Watermark processing<br/>[script.js]"]
end

subgraph group_generators["Generators"]
  node_qr_page["QR code page<br/>[index.html]"]
  node_qr["QR code generation<br/>[script.js]"]
  node_barcode_page["Barcode page<br/>[index.html]"]
  node_barcode["Barcode generation<br/>[script.js]"]
  node_image_page["Image generation page<br/>[index.html]"]
  node_imagegen["Image generation<br/>[script.js]"]
  node_history[("Browser history store<br/>[script.js]")]
end

subgraph group_calculators["Calculators"]
  node_dof_page["Depth-of-field page<br/>[index.html]"]
  node_dof["Depth-of-field calculation<br/>[script.js]"]
end

node_user(("Tool user"))
node_home["Toolbox home<br/>[index.html]"]
node_opencc["OpenCC"]
node_marked["marked"]
node_highlight["highlight.js"]
node_qr_lib["qr-code-styling"]
node_exifr["exifr"]
node_jszip["JSZip"]
node_providers["Image API providers"]

node_user -->|"opens"| node_home
node_home -->|"selects tool"| node_textstats_page
node_home -->|"selects tool"| node_fancy_page
node_home -->|"selects tool"| node_convert_page
node_home -->|"selects tool"| node_markdown_page
node_home -->|"selects tool"| node_qr_page
node_home -->|"selects tool"| node_barcode_page
node_home -->|"selects tool"| node_dof_page
node_home -->|"selects tool"| node_exif_page
node_home -->|"selects tool"| node_watermark_page
node_home -->|"selects tool"| node_image_page
node_textstats_page -->|"loads"| node_textstats
node_fancy_page -->|"loads"| node_fancy
node_convert_page -->|"loads"| node_convert
node_convert -->|"converts with"| node_opencc
node_markdown_page -->|"loads"| node_markdown
node_markdown -->|"parses with"| node_marked
node_markdown -->|"highlights with"| node_highlight
node_qr_page -->|"loads"| node_qr
node_qr -->|"generates with"| node_qr_lib
node_barcode_page -->|"loads"| node_barcode
node_dof_page -->|"loads"| node_dof
node_exif_page -->|"loads"| node_exif
node_exif -->|"parses with"| node_exifr
node_watermark_page -->|"loads"| node_watermark
node_watermark -->|"packs downloads"| node_jszip
node_image_page -->|"loads"| node_imagegen
node_imagegen -.->|"requests images"| node_providers
node_imagegen -->|"reads and writes"| node_history

click node_home "https://github.com/suzunacodehime/tool_box/blob/main/index.html"
click node_textstats_page "https://github.com/suzunacodehime/tool_box/blob/main/text-stats/index.html"
click node_textstats "https://github.com/suzunacodehime/tool_box/blob/main/text-stats/script.js"
click node_fancy_page "https://github.com/suzunacodehime/tool_box/blob/main/fancy-text/index.html"
click node_fancy "https://github.com/suzunacodehime/tool_box/blob/main/fancy-text/script.js"
click node_convert_page "https://github.com/suzunacodehime/tool_box/blob/main/zh-convert/index.html"
click node_convert "https://github.com/suzunacodehime/tool_box/blob/main/zh-convert/script.js"
click node_markdown_page "https://github.com/suzunacodehime/tool_box/blob/main/markdown-preview/index.html"
click node_markdown "https://github.com/suzunacodehime/tool_box/blob/main/markdown-preview/script.js"
click node_qr_page "https://github.com/suzunacodehime/tool_box/blob/main/QRCode/index.html"
click node_qr "https://github.com/suzunacodehime/tool_box/blob/main/QRCode/script.js"
click node_barcode_page "https://github.com/suzunacodehime/tool_box/blob/main/barcode/index.html"
click node_barcode "https://github.com/suzunacodehime/tool_box/blob/main/barcode/script.js"
click node_dof_page "https://github.com/suzunacodehime/tool_box/blob/main/dof-calculator/index.html"
click node_dof "https://github.com/suzunacodehime/tool_box/blob/main/dof-calculator/script.js"
click node_exif_page "https://github.com/suzunacodehime/tool_box/blob/main/exif-viewer/index.html"
click node_exif "https://github.com/suzunacodehime/tool_box/blob/main/exif-viewer/script.js"
click node_watermark_page "https://github.com/suzunacodehime/tool_box/blob/main/watermark/index.html"
click node_watermark "https://github.com/suzunacodehime/tool_box/blob/main/watermark/script.js"
click node_image_page "https://github.com/suzunacodehime/tool_box/blob/main/image-gen/index.html"
click node_imagegen "https://github.com/suzunacodehime/tool_box/blob/main/image-gen/script.js"
click node_history "https://github.com/suzunacodehime/tool_box/blob/main/image-gen/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_textstats_page,node_textstats,node_fancy_page,node_fancy,node_convert_page,node_convert,node_markdown_page,node_markdown,node_user toneBlue
class node_exif_page,node_exif,node_watermark_page,node_watermark toneAmber
class node_qr_page,node_qr,node_barcode_page,node_barcode,node_image_page,node_imagegen,node_history,node_providers toneMint
class node_dof_page,node_dof toneRose
class node_home toneTeal
class node_opencc,node_marked,node_highlight,node_qr_lib,node_exifr,node_jszip toneIndigo
```

## Components

### Text tools

- [Text statistics page](https://github.com/suzunacodehime/tool_box/blob/main/text-stats/index.html): `text-stats/index.html`
- [Text statistics](https://github.com/suzunacodehime/tool_box/blob/main/text-stats/script.js): `text-stats/script.js`
- [Fancy text page](https://github.com/suzunacodehime/tool_box/blob/main/fancy-text/index.html): `fancy-text/index.html`
- [Fancy text conversion](https://github.com/suzunacodehime/tool_box/blob/main/fancy-text/script.js): `fancy-text/script.js`
- [Chinese conversion page](https://github.com/suzunacodehime/tool_box/blob/main/zh-convert/index.html): `zh-convert/index.html`
- [Chinese conversion](https://github.com/suzunacodehime/tool_box/blob/main/zh-convert/script.js): `zh-convert/script.js`
- [Markdown preview page](https://github.com/suzunacodehime/tool_box/blob/main/markdown-preview/index.html): `markdown-preview/index.html`
- [Markdown preview](https://github.com/suzunacodehime/tool_box/blob/main/markdown-preview/script.js): `markdown-preview/script.js`

### Image tools

- [Photo information page](https://github.com/suzunacodehime/tool_box/blob/main/exif-viewer/index.html): `exif-viewer/index.html`
- [Photo metadata viewer](https://github.com/suzunacodehime/tool_box/blob/main/exif-viewer/script.js): `exif-viewer/script.js`
- [Watermark page](https://github.com/suzunacodehime/tool_box/blob/main/watermark/index.html): `watermark/index.html`
- [Watermark processing](https://github.com/suzunacodehime/tool_box/blob/main/watermark/script.js): `watermark/script.js`

### Generators

- [QR code page](https://github.com/suzunacodehime/tool_box/blob/main/QRCode/index.html): `QRCode/index.html`
- [QR code generation](https://github.com/suzunacodehime/tool_box/blob/main/QRCode/script.js): `QRCode/script.js`
- [Barcode page](https://github.com/suzunacodehime/tool_box/blob/main/barcode/index.html): `barcode/index.html`
- [Barcode generation](https://github.com/suzunacodehime/tool_box/blob/main/barcode/script.js): `barcode/script.js`
- [Image generation page](https://github.com/suzunacodehime/tool_box/blob/main/image-gen/index.html): `image-gen/index.html`
- [Image generation](https://github.com/suzunacodehime/tool_box/blob/main/image-gen/script.js): `image-gen/script.js`
- [Browser history store](https://github.com/suzunacodehime/tool_box/blob/main/image-gen/script.js): `image-gen/script.js`

### Calculators

- [Depth-of-field page](https://github.com/suzunacodehime/tool_box/blob/main/dof-calculator/index.html): `dof-calculator/index.html`
- [Depth-of-field calculation](https://github.com/suzunacodehime/tool_box/blob/main/dof-calculator/script.js): `dof-calculator/script.js`

### Other components

- **Tool user**
- [Toolbox home](https://github.com/suzunacodehime/tool_box/blob/main/index.html): `index.html`
- **OpenCC**
- **marked**
- **highlight.js**
- **qr-code-styling**
- **exifr**
- **JSZip**
- **Image API providers**

## Connections

- Tool user → Toolbox home: opens
- Toolbox home → Text statistics page: selects tool
- Toolbox home → Fancy text page: selects tool
- Toolbox home → Chinese conversion page: selects tool
- Toolbox home → Markdown preview page: selects tool
- Toolbox home → QR code page: selects tool
- Toolbox home → Barcode page: selects tool
- Toolbox home → Depth-of-field page: selects tool
- Toolbox home → Photo information page: selects tool
- Toolbox home → Watermark page: selects tool
- Toolbox home → Image generation page: selects tool
- Text statistics page → Text statistics: loads
- Fancy text page → Fancy text conversion: loads
- Chinese conversion page → Chinese conversion: loads
- Chinese conversion → OpenCC: converts with
- Markdown preview page → Markdown preview: loads
- Markdown preview → marked: parses with
- Markdown preview → highlight.js: highlights with
- QR code page → QR code generation: loads
- QR code generation → qr-code-styling: generates with
- Barcode page → Barcode generation: loads
- Depth-of-field page → Depth-of-field calculation: loads
- Photo information page → Photo metadata viewer: loads
- Photo metadata viewer → exifr: parses with
- Watermark page → Watermark processing: loads
- Watermark processing → JSZip: packs downloads
- Image generation page → Image generation: loads
- Image generation → Image API providers: requests images
- Image generation → Browser history store: reads and writes