# yc-2018/htmltools architecture

> Architecture diagram of the GitHub repository yc-2018/htmltools, 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/yc-2018/htmltools
- Repository: https://github.com/yc-2018/htmltools

## Overview

This repository is a collection of browser-based utilities and interactive demos rather than one integrated application. Users open a tool, provide text, files, settings, or interaction, and receive a conversion, calculation, visualization, or generated configuration. Sampled code shows direct UI-to-logic calls for several tools; other capabilities are represented from their tree paths only, so uncertain internal wiring is omitted. The README is empty, and source excerpts are partial.

Main entry points: [`生活与计算/3D人体标注/js/main.js`](https://github.com/yc-2018/htmltools/blob/master/%E7%94%9F%E6%B4%BB%E4%B8%8E%E8%AE%A1%E7%AE%97/3D%E4%BA%BA%E4%BD%93%E6%A0%87%E6%B3%A8/js/main.js) (3D body annotation UI), [`文本与格式/yaml-properties-converter/app.js`](https://github.com/yc-2018/htmltools/blob/master/%E6%96%87%E6%9C%AC%E4%B8%8E%E6%A0%BC%E5%BC%8F/yaml-properties-converter/app.js) (YAML converter UI), [`图像与文件/图片转盲文/main.js`](https://github.com/yc-2018/htmltools/blob/master/%E5%9B%BE%E5%83%8F%E4%B8%8E%E6%96%87%E4%BB%B6/%E5%9B%BE%E7%89%87%E8%BD%AC%E7%9B%B2%E6%96%87/main.js) (Image to Braille), [`生活与计算/工资不止差一半计算器/app.js`](https://github.com/yc-2018/htmltools/blob/master/%E7%94%9F%E6%B4%BB%E4%B8%8E%E8%AE%A1%E7%AE%97/%E5%B7%A5%E8%B5%84%E4%B8%8D%E6%AD%A2%E5%B7%AE%E4%B8%80%E5%8D%8A%E8%AE%A1%E7%AE%97%E5%99%A8/app.js) (Salary comparison UI)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_text["Text and developer tools"]
  node_yaml["YAML converter UI<br/>[app.js]"]
  node_grid["CSS grid generator<br/>[app.9e69c8f9.js]"]
  node_nginx["Nginx config builder<br/>[app.js]"]
  node_cheatsheet["Developer reference search<br/>[main.js]"]
  node_diff["Text comparison tools"]
end

subgraph group_media["Image and file tools"]
  node_braille["Image to Braille<br/>[main.js]"]
  node_dither["Dithering transforms<br/>[dithering.js]"]
  node_livephoto["Live photo cover editor<br/>[app.js]"]
  node_pdf["PDF editor<br/>[pdf-lib.js]"]
  node_webp["Video to WebP<br/>[ffmpeg.js]"]
end

subgraph group_visual["Interactive demos"]
  node_bodyui["3D body annotation UI<br/>[main.js]"]
  node_anatomy["Anatomy descriptions<br/>[anatomy.js]"]
  node_annotations["Annotation operations<br/>[annotations.js]"]
  node_report["Report generation<br/>[report.js]"]
  node_fighter["Fighting game"]
  node_effects["Visual effects demos"]
end

subgraph group_life["Life and calculation"]
  node_salaryui["Salary comparison UI<br/>[app.js]"]
  node_salarycalc["Salary calculations<br/>[calculator.js]"]
  node_probeui["API station probe UI<br/>[app.js]"]
  node_probeapi["Station API operations<br/>[api.js]"]
end

subgraph group_security["Encoding and security"]
  node_twofa["Two-factor codes<br/>[index.js]"]
  node_qr["QR code tools"]
  node_steg["Image steganography analysis"]
end

node_user(("Tool user"))

node_user -->|"enters text"| node_yaml
node_yaml -->|"converts formats"| node_user
node_user -->|"sets grid"| node_grid
node_user -->|"configures sites"| node_nginx
node_user -->|"searches reference"| node_cheatsheet
node_user -->|"compares text"| node_diff
node_user -->|"provides image"| node_braille
node_braille -->|"applies dithering"| node_dither
node_user -->|"provides media"| node_livephoto
node_user -->|"edits PDF"| node_pdf
node_user -->|"converts video"| node_webp
node_user -->|"annotates model"| node_bodyui
node_bodyui -->|"describes hit"| node_anatomy
node_bodyui -->|"adds annotation"| node_annotations
node_bodyui -->|"gets date"| node_report
node_user -->|"plays game"| node_fighter
node_user -->|"views effects"| node_effects
node_user -->|"enters salaries"| node_salaryui
node_salaryui -->|"calculates results"| node_salarycalc
node_user -->|"tests station"| node_probeui
node_probeui -->|"requests status"| node_probeapi
node_user -->|"generates codes"| node_twofa
node_user -->|"encodes QR"| node_qr
node_user -->|"analyzes image"| node_steg

click node_yaml "https://github.com/yc-2018/htmltools/blob/master/%E6%96%87%E6%9C%AC%E4%B8%8E%E6%A0%BC%E5%BC%8F/yaml-properties-converter/app.js"
click node_grid "https://github.com/yc-2018/htmltools/blob/master/%E5%BC%80%E5%8F%91/css%E7%BD%91%E6%A0%BC%E5%B8%83%E5%B1%80/js/app.9e69c8f9.js"
click node_nginx "https://github.com/yc-2018/htmltools/blob/master/%E5%BC%80%E5%8F%91/nginx%E5%8F%AF%E8%A7%86%E5%8C%96%E9%85%8D%E7%BD%AE/js/app.js"
click node_cheatsheet "https://github.com/yc-2018/htmltools/blob/master/%E5%BC%80%E5%8F%91/%E5%BC%80%E5%8F%91%E9%80%9F%E6%9F%A5%E8%A1%A8/js/main.js"
click node_diff "https://github.com/yc-2018/htmltools/tree/master/%E6%96%87%E6%9C%AC%E4%B8%8E%E6%A0%BC%E5%BC%8F/%E6%96%87%E6%9C%AC%E5%B7%AE%E5%BC%82%E5%AF%B9%E6%AF%94"
click node_braille "https://github.com/yc-2018/htmltools/blob/master/%E5%9B%BE%E5%83%8F%E4%B8%8E%E6%96%87%E4%BB%B6/%E5%9B%BE%E7%89%87%E8%BD%AC%E7%9B%B2%E6%96%87/main.js"
click node_dither "https://github.com/yc-2018/htmltools/blob/master/%E5%9B%BE%E5%83%8F%E4%B8%8E%E6%96%87%E4%BB%B6/%E5%9B%BE%E7%89%87%E8%BD%AC%E7%9B%B2%E6%96%87/dithering.js"
click node_livephoto "https://github.com/yc-2018/htmltools/blob/master/%E5%9B%BE%E5%83%8F%E4%B8%8E%E6%96%87%E4%BB%B6/%E5%AE%9E%E5%86%B5%E5%9B%BE%E7%89%87%E6%8D%A2%E5%B0%81%E9%9D%A2/app.js"
click node_pdf "https://github.com/yc-2018/htmltools/blob/master/%E5%9B%BE%E5%83%8F%E4%B8%8E%E6%96%87%E4%BB%B6/PDF%E5%A4%9A%E5%8A%9F%E8%83%BD%E7%BC%96%E8%BE%91%E5%99%A8/pdf-lib.js"
click node_webp "https://github.com/yc-2018/htmltools/blob/master/%E5%9B%BE%E5%83%8F%E4%B8%8E%E6%96%87%E4%BB%B6/%E8%A7%86%E9%A2%91%E8%BD%ACwebp/ffmpeg.js"
click node_bodyui "https://github.com/yc-2018/htmltools/blob/master/%E7%94%9F%E6%B4%BB%E4%B8%8E%E8%AE%A1%E7%AE%97/3D%E4%BA%BA%E4%BD%93%E6%A0%87%E6%B3%A8/js/main.js"
click node_anatomy "https://github.com/yc-2018/htmltools/blob/master/%E7%94%9F%E6%B4%BB%E4%B8%8E%E8%AE%A1%E7%AE%97/3D%E4%BA%BA%E4%BD%93%E6%A0%87%E6%B3%A8/js/anatomy.js"
click node_annotations "https://github.com/yc-2018/htmltools/blob/master/%E7%94%9F%E6%B4%BB%E4%B8%8E%E8%AE%A1%E7%AE%97/3D%E4%BA%BA%E4%BD%93%E6%A0%87%E6%B3%A8/js/annotations.js"
click node_report "https://github.com/yc-2018/htmltools/blob/master/%E7%94%9F%E6%B4%BB%E4%B8%8E%E8%AE%A1%E7%AE%97/3D%E4%BA%BA%E4%BD%93%E6%A0%87%E6%B3%A8/js/report.js"
click node_fighter "https://github.com/yc-2018/htmltools/tree/master/%E5%9B%BE%E4%B8%80%E4%B9%90/%E5%B0%8F%E6%B8%B8%E6%88%8F/%E6%8B%B3%E7%9A%87%E4%BA%8C%E7%A8%BF%E7%89%88/js"
click node_effects "https://github.com/yc-2018/htmltools/tree/master/%E5%9B%BE%E4%B8%80%E4%B9%90/%E7%89%B9%E6%95%88%E6%BC%94%E7%A4%BA"
click node_salaryui "https://github.com/yc-2018/htmltools/blob/master/%E7%94%9F%E6%B4%BB%E4%B8%8E%E8%AE%A1%E7%AE%97/%E5%B7%A5%E8%B5%84%E4%B8%8D%E6%AD%A2%E5%B7%AE%E4%B8%80%E5%8D%8A%E8%AE%A1%E7%AE%97%E5%99%A8/app.js"
click node_salarycalc "https://github.com/yc-2018/htmltools/blob/master/%E7%94%9F%E6%B4%BB%E4%B8%8E%E8%AE%A1%E7%AE%97/%E5%B7%A5%E8%B5%84%E4%B8%8D%E6%AD%A2%E5%B7%AE%E4%B8%80%E5%8D%8A%E8%AE%A1%E7%AE%97%E5%99%A8/calculator.js"
click node_probeui "https://github.com/yc-2018/htmltools/blob/master/%E6%B2%A1%E5%95%A5%E7%94%A8%E7%9A%84/%E4%B8%AD%E8%BD%AC%E6%8E%A2%E9%92%88/app.js"
click node_probeapi "https://github.com/yc-2018/htmltools/blob/master/%E6%B2%A1%E5%95%A5%E7%94%A8%E7%9A%84/%E4%B8%AD%E8%BD%AC%E6%8E%A2%E9%92%88/api.js"
click node_twofa "https://github.com/yc-2018/htmltools/blob/master/%E7%BC%96%E7%A0%81%E4%B8%8E%E5%AE%89%E5%85%A8/2fa/index.js"
click node_qr "https://github.com/yc-2018/htmltools/tree/master/%E7%BC%96%E7%A0%81%E4%B8%8E%E5%AE%89%E5%85%A8/%E4%BA%8C%E7%BB%B4%E7%A0%81%E5%B7%A5%E5%85%B7"
click node_steg "https://github.com/yc-2018/htmltools/tree/master/%E7%BC%96%E7%A0%81%E4%B8%8E%E5%AE%89%E5%85%A8/%E5%9B%BE%E7%89%87%E9%9A%90%E8%97%8F%E6%95%B0%E6%8D%AE%E5%88%86%E6%9E%90"

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_yaml,node_grid,node_nginx,node_cheatsheet,node_diff,node_user toneBlue
class node_braille,node_dither,node_livephoto,node_pdf,node_webp toneAmber
class node_bodyui,node_anatomy,node_annotations,node_report,node_fighter,node_effects toneMint
class node_salaryui,node_salarycalc,node_probeui,node_probeapi toneRose
class node_twofa,node_qr,node_steg toneIndigo
```

## Components

### Text and developer tools

- [YAML converter UI](https://github.com/yc-2018/htmltools/blob/master/%E6%96%87%E6%9C%AC%E4%B8%8E%E6%A0%BC%E5%BC%8F/yaml-properties-converter/app.js): `文本与格式/yaml-properties-converter/app.js`
- [CSS grid generator](https://github.com/yc-2018/htmltools/blob/master/%E5%BC%80%E5%8F%91/css%E7%BD%91%E6%A0%BC%E5%B8%83%E5%B1%80/js/app.9e69c8f9.js): `开发/css网格布局/js/app.9e69c8f9.js`
- [Nginx config builder](https://github.com/yc-2018/htmltools/blob/master/%E5%BC%80%E5%8F%91/nginx%E5%8F%AF%E8%A7%86%E5%8C%96%E9%85%8D%E7%BD%AE/js/app.js): `开发/nginx可视化配置/js/app.js`
- [Developer reference search](https://github.com/yc-2018/htmltools/blob/master/%E5%BC%80%E5%8F%91/%E5%BC%80%E5%8F%91%E9%80%9F%E6%9F%A5%E8%A1%A8/js/main.js): `开发/开发速查表/js/main.js`
- [Text comparison tools](https://github.com/yc-2018/htmltools/tree/master/%E6%96%87%E6%9C%AC%E4%B8%8E%E6%A0%BC%E5%BC%8F/%E6%96%87%E6%9C%AC%E5%B7%AE%E5%BC%82%E5%AF%B9%E6%AF%94): `文本与格式/文本差异对比`

### Image and file tools

- [Image to Braille](https://github.com/yc-2018/htmltools/blob/master/%E5%9B%BE%E5%83%8F%E4%B8%8E%E6%96%87%E4%BB%B6/%E5%9B%BE%E7%89%87%E8%BD%AC%E7%9B%B2%E6%96%87/main.js): `图像与文件/图片转盲文/main.js`
- [Dithering transforms](https://github.com/yc-2018/htmltools/blob/master/%E5%9B%BE%E5%83%8F%E4%B8%8E%E6%96%87%E4%BB%B6/%E5%9B%BE%E7%89%87%E8%BD%AC%E7%9B%B2%E6%96%87/dithering.js): `图像与文件/图片转盲文/dithering.js`
- [Live photo cover editor](https://github.com/yc-2018/htmltools/blob/master/%E5%9B%BE%E5%83%8F%E4%B8%8E%E6%96%87%E4%BB%B6/%E5%AE%9E%E5%86%B5%E5%9B%BE%E7%89%87%E6%8D%A2%E5%B0%81%E9%9D%A2/app.js): `图像与文件/实况图片换封面/app.js`
- [PDF editor](https://github.com/yc-2018/htmltools/blob/master/%E5%9B%BE%E5%83%8F%E4%B8%8E%E6%96%87%E4%BB%B6/PDF%E5%A4%9A%E5%8A%9F%E8%83%BD%E7%BC%96%E8%BE%91%E5%99%A8/pdf-lib.js): `图像与文件/PDF多功能编辑器/pdf-lib.js`
- [Video to WebP](https://github.com/yc-2018/htmltools/blob/master/%E5%9B%BE%E5%83%8F%E4%B8%8E%E6%96%87%E4%BB%B6/%E8%A7%86%E9%A2%91%E8%BD%ACwebp/ffmpeg.js): `图像与文件/视频转webp/ffmpeg.js`

### Interactive demos

- [3D body annotation UI](https://github.com/yc-2018/htmltools/blob/master/%E7%94%9F%E6%B4%BB%E4%B8%8E%E8%AE%A1%E7%AE%97/3D%E4%BA%BA%E4%BD%93%E6%A0%87%E6%B3%A8/js/main.js): `生活与计算/3D人体标注/js/main.js`
- [Anatomy descriptions](https://github.com/yc-2018/htmltools/blob/master/%E7%94%9F%E6%B4%BB%E4%B8%8E%E8%AE%A1%E7%AE%97/3D%E4%BA%BA%E4%BD%93%E6%A0%87%E6%B3%A8/js/anatomy.js): `生活与计算/3D人体标注/js/anatomy.js`
- [Annotation operations](https://github.com/yc-2018/htmltools/blob/master/%E7%94%9F%E6%B4%BB%E4%B8%8E%E8%AE%A1%E7%AE%97/3D%E4%BA%BA%E4%BD%93%E6%A0%87%E6%B3%A8/js/annotations.js): `生活与计算/3D人体标注/js/annotations.js`
- [Report generation](https://github.com/yc-2018/htmltools/blob/master/%E7%94%9F%E6%B4%BB%E4%B8%8E%E8%AE%A1%E7%AE%97/3D%E4%BA%BA%E4%BD%93%E6%A0%87%E6%B3%A8/js/report.js): `生活与计算/3D人体标注/js/report.js`
- [Fighting game](https://github.com/yc-2018/htmltools/tree/master/%E5%9B%BE%E4%B8%80%E4%B9%90/%E5%B0%8F%E6%B8%B8%E6%88%8F/%E6%8B%B3%E7%9A%87%E4%BA%8C%E7%A8%BF%E7%89%88/js): `图一乐/小游戏/拳皇二稿版/js`
- [Visual effects demos](https://github.com/yc-2018/htmltools/tree/master/%E5%9B%BE%E4%B8%80%E4%B9%90/%E7%89%B9%E6%95%88%E6%BC%94%E7%A4%BA): `图一乐/特效演示`

### Life and calculation

- [Salary comparison UI](https://github.com/yc-2018/htmltools/blob/master/%E7%94%9F%E6%B4%BB%E4%B8%8E%E8%AE%A1%E7%AE%97/%E5%B7%A5%E8%B5%84%E4%B8%8D%E6%AD%A2%E5%B7%AE%E4%B8%80%E5%8D%8A%E8%AE%A1%E7%AE%97%E5%99%A8/app.js): `生活与计算/工资不止差一半计算器/app.js`
- [Salary calculations](https://github.com/yc-2018/htmltools/blob/master/%E7%94%9F%E6%B4%BB%E4%B8%8E%E8%AE%A1%E7%AE%97/%E5%B7%A5%E8%B5%84%E4%B8%8D%E6%AD%A2%E5%B7%AE%E4%B8%80%E5%8D%8A%E8%AE%A1%E7%AE%97%E5%99%A8/calculator.js): `生活与计算/工资不止差一半计算器/calculator.js`
- [API station probe UI](https://github.com/yc-2018/htmltools/blob/master/%E6%B2%A1%E5%95%A5%E7%94%A8%E7%9A%84/%E4%B8%AD%E8%BD%AC%E6%8E%A2%E9%92%88/app.js): `没啥用的/中转探针/app.js`
- [Station API operations](https://github.com/yc-2018/htmltools/blob/master/%E6%B2%A1%E5%95%A5%E7%94%A8%E7%9A%84/%E4%B8%AD%E8%BD%AC%E6%8E%A2%E9%92%88/api.js): `没啥用的/中转探针/api.js`

### Encoding and security

- [Two-factor codes](https://github.com/yc-2018/htmltools/blob/master/%E7%BC%96%E7%A0%81%E4%B8%8E%E5%AE%89%E5%85%A8/2fa/index.js): `编码与安全/2fa/index.js`
- [QR code tools](https://github.com/yc-2018/htmltools/tree/master/%E7%BC%96%E7%A0%81%E4%B8%8E%E5%AE%89%E5%85%A8/%E4%BA%8C%E7%BB%B4%E7%A0%81%E5%B7%A5%E5%85%B7): `编码与安全/二维码工具`
- [Image steganography analysis](https://github.com/yc-2018/htmltools/tree/master/%E7%BC%96%E7%A0%81%E4%B8%8E%E5%AE%89%E5%85%A8/%E5%9B%BE%E7%89%87%E9%9A%90%E8%97%8F%E6%95%B0%E6%8D%AE%E5%88%86%E6%9E%90): `编码与安全/图片隐藏数据分析`

### Other components

- **Tool user**

## Connections

- Tool user → YAML converter UI: enters text
- YAML converter UI → Tool user: converts formats
- Tool user → CSS grid generator: sets grid
- Tool user → Nginx config builder: configures sites
- Tool user → Developer reference search: searches reference
- Tool user → Text comparison tools: compares text
- Tool user → Image to Braille: provides image
- Image to Braille → Dithering transforms: applies dithering
- Tool user → Live photo cover editor: provides media
- Tool user → PDF editor: edits PDF
- Tool user → Video to WebP: converts video
- Tool user → 3D body annotation UI: annotates model
- 3D body annotation UI → Anatomy descriptions: describes hit
- 3D body annotation UI → Annotation operations: adds annotation
- 3D body annotation UI → Report generation: gets date
- Tool user → Fighting game: plays game
- Tool user → Visual effects demos: views effects
- Tool user → Salary comparison UI: enters salaries
- Salary comparison UI → Salary calculations: calculates results
- Tool user → API station probe UI: tests station
- API station probe UI → Station API operations: requests status
- Tool user → Two-factor codes: generates codes
- Tool user → QR code tools: encodes QR
- Tool user → Image steganography analysis: analyzes image