# kamaleshs-23/crypt_learn architecture

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

- Interactive diagram: https://gitdiagram.com/kamaleshs-23/crypt_learn
- Repository: https://github.com/kamaleshs-23/crypt_learn

## Overview

#### Purpose and Entry Points
This is a static, browser-based cryptography learning tool. It implements classical ciphers plus DES, simplified DES (S-DES), and AES, with interactive encryption/decryption and algorithm visualizations.

Primary browser entry points:
- `index.html` supplies the application structure.
- `script.js` coordinates UI behavior and algorithm selection.
- `style.css` defines presentation.

#### UI-to-Algorithm Dispatch
The application is organized around selecting a cipher, collecting plaintext/key inputs, and invoking the corresponding module. `script.js` is the central integration boundary between DOM events and cryptographic implementations.

Relevant paths:
- `script.js`
- `index.html`
- `modules/visualizations.js`

#### Classical Cipher Implementations
Independent modules implement traditional substitution, transposition, and polyalphabetic algorithms. These are likely direct computational units consumed by the UI dispatcher, without a shared server or persistence layer.

Core paths:
- `modules/ceaser.js`
- `modules/vigenere.js`
- `modules/monoalphabetic.js`
- `modules/playfair.js`
- `modules/hillcipher.js`
- `modules/railfence.js`
- `modules/columnar.js`
- `modules/product.js`
- `modules/otp.js`

#### DES and S-DES Processing
DES-family functionality is separated into algorithm engines and visualization-oriented modules. This establishes a useful boundary: cryptographic transformations compute values, while flow modules expose intermediate rounds, permutations, keys, or diagrams for the browser UI.

Core paths:
- `modules/des.js`
- `modules/sdes.js`
- `modules/des-visualization.js`
- `modules/sdes-visualization.js`
- `modules/des-flow-diagrams.js`
- `modules/des-unified-flow.js`

#### AES Processing and Visualization
AES follows the same engine/presentation split as DES. The AES implementation is isolated from its explanatory visualization layer, allowing the UI to show state transformations independently of the core cipher operations.

Core paths:
- `modules/aes.js`
- `modules/aes-visualization.js`

#### Visualization Layer
Visualization modules are a major architectural concern rather than incidental UI decoration: they translate cipher stages into browser-renderable explanations. The generic visualization module appears to support shared display behavior, while DES/AES-specific modules provide algorithm-specific flows.

Relevant paths:
- `modules/visualizations.js`
- `modules/des-visualization.js`
- `modules/aes-visualization.js`
- `modules/des-flow-diagrams.js`

#### Runtime and External Boundaries
The repository contains only client-side HTML, CSS, and JavaScript. It has no visible backend, package manifest, build system, database, API client, or external service integration. Execution occurs in the browser, with local DOM state as the primary control and presentation boundary.

A focused S-DES test harness is present:
- `test-sdes.js`

Main entry points: [`script.js`](https://github.com/kamaleshs-23/crypt_learn/blob/main/script.js) (UI dispatcher), [`modules/des-visualization.js`](https://github.com/kamaleshs-23/crypt_learn/blob/main/modules/des-visualization.js) (DES visualization), [`modules/visualizations.js`](https://github.com/kamaleshs-23/crypt_learn/blob/main/modules/visualizations.js) (Shared visualizations), [`index.html`](https://github.com/kamaleshs-23/crypt_learn/blob/main/index.html) (Application page)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_browser["Browser Application"]
  node_html["Application page<br/>HTML entry<br/>[index.html]"]
  node_styles["Presentation<br/>CSS<br/>[style.css]"]
  node_dispatcher["UI dispatcher<br/>browser controller<br/>[script.js]"]
end

subgraph group_classical["Classical Ciphers"]
  node_caesar["Caesar cipher<br/>cipher engine<br/>[ceaser.js]"]
  node_vigenere["Vigenère cipher<br/>cipher engine<br/>[vigenere.js]"]
  node_monoalphabetic["Monoalphabetic cipher<br/>cipher engine<br/>[monoalphabetic.js]"]
  node_playfair["Playfair cipher<br/>cipher engine<br/>[playfair.js]"]
  node_hill["Hill cipher<br/>cipher engine<br/>[hillcipher.js]"]
  node_transposition["Transposition ciphers<br/>cipher engines<br/>[railfence.js]"]
  node_otp["One-time pad<br/>cipher engine<br/>[otp.js]"]
end

subgraph group_modern["DES, S-DES &amp; AES"]
  node_des["DES engine<br/>cipher engine<br/>[des.js]"]
  node_sdes["S-DES engine<br/>cipher engine<br/>[sdes.js]"]
  node_aes["AES engine<br/>cipher engine<br/>[aes.js]"]
end

subgraph group_visualization["Visualization Layer"]
  node_shared_viz["Shared visualizations<br/>visualization support<br/>[visualizations.js]"]
  node_des_viz["DES visualization<br/>algorithm visualization"]
  node_sdes_viz["S-DES visualization<br/>algorithm visualization"]
  node_des_flow["DES flow diagrams<br/>diagram renderer"]
  node_des_unified["Unified DES flow<br/>flow visualization"]
  node_aes_viz["AES visualization<br/>algorithm visualization"]
end

node_html -->|"loads"| node_dispatcher
node_html -->|"styles"| node_styles
node_dispatcher -->|"dispatches"| node_caesar
node_dispatcher -->|"dispatches"| node_vigenere
node_dispatcher -->|"dispatches"| node_monoalphabetic
node_dispatcher -->|"dispatches"| node_playfair
node_dispatcher -->|"dispatches"| node_hill
node_dispatcher -->|"dispatches"| node_transposition
node_dispatcher -->|"dispatches"| node_otp
node_dispatcher -->|"dispatches"| node_des
node_dispatcher -->|"dispatches"| node_sdes
node_dispatcher -->|"dispatches"| node_aes
node_dispatcher -->|"renders explanations"| node_shared_viz
node_des -->|"provides stages"| node_des_viz
node_sdes -->|"provides stages"| node_sdes_viz
node_aes -->|"provides state changes"| node_aes_viz
node_des_viz -->|"renders diagrams"| node_des_flow
node_des_viz -->|"renders flow"| node_des_unified
node_shared_viz -.->|"supports"| node_des_viz
node_shared_viz -.->|"supports"| node_aes_viz

click node_html "https://github.com/kamaleshs-23/crypt_learn/blob/main/index.html"
click node_styles "https://github.com/kamaleshs-23/crypt_learn/blob/main/style.css"
click node_dispatcher "https://github.com/kamaleshs-23/crypt_learn/blob/main/script.js"
click node_caesar "https://github.com/kamaleshs-23/crypt_learn/blob/main/modules/ceaser.js"
click node_vigenere "https://github.com/kamaleshs-23/crypt_learn/blob/main/modules/vigenere.js"
click node_monoalphabetic "https://github.com/kamaleshs-23/crypt_learn/blob/main/modules/monoalphabetic.js"
click node_playfair "https://github.com/kamaleshs-23/crypt_learn/blob/main/modules/playfair.js"
click node_hill "https://github.com/kamaleshs-23/crypt_learn/blob/main/modules/hillcipher.js"
click node_transposition "https://github.com/kamaleshs-23/crypt_learn/blob/main/modules/railfence.js"
click node_otp "https://github.com/kamaleshs-23/crypt_learn/blob/main/modules/otp.js"
click node_des "https://github.com/kamaleshs-23/crypt_learn/blob/main/modules/des.js"
click node_sdes "https://github.com/kamaleshs-23/crypt_learn/blob/main/modules/sdes.js"
click node_aes "https://github.com/kamaleshs-23/crypt_learn/blob/main/modules/aes.js"
click node_shared_viz "https://github.com/kamaleshs-23/crypt_learn/blob/main/modules/visualizations.js"
click node_des_viz "https://github.com/kamaleshs-23/crypt_learn/blob/main/modules/des-visualization.js"
click node_sdes_viz "https://github.com/kamaleshs-23/crypt_learn/blob/main/modules/sdes-visualization.js"
click node_des_flow "https://github.com/kamaleshs-23/crypt_learn/blob/main/modules/des-flow-diagrams.js"
click node_des_unified "https://github.com/kamaleshs-23/crypt_learn/blob/main/modules/des-unified-flow.js"
click node_aes_viz "https://github.com/kamaleshs-23/crypt_learn/blob/main/modules/aes-visualization.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_html,node_styles,node_dispatcher toneBlue
class node_caesar,node_vigenere,node_monoalphabetic,node_playfair,node_hill,node_transposition,node_otp toneAmber
class node_des,node_sdes,node_aes toneMint
class node_shared_viz,node_des_viz,node_sdes_viz,node_des_flow,node_des_unified,node_aes_viz toneRose
```

## Components

### Browser Application

Client-side entry and interaction layer.

- [Application page](https://github.com/kamaleshs-23/crypt_learn/blob/main/index.html): HTML entry · `index.html`
- [Presentation](https://github.com/kamaleshs-23/crypt_learn/blob/main/style.css): CSS · `style.css`
- [UI dispatcher](https://github.com/kamaleshs-23/crypt_learn/blob/main/script.js): browser controller · Collects inputs, selects algorithms, and updates the DOM. · `script.js`

### Classical Ciphers

Independent cipher computation modules.

- [Caesar cipher](https://github.com/kamaleshs-23/crypt_learn/blob/main/modules/ceaser.js): cipher engine · `modules/ceaser.js`
- [Vigenère cipher](https://github.com/kamaleshs-23/crypt_learn/blob/main/modules/vigenere.js): cipher engine · `modules/vigenere.js`
- [Monoalphabetic cipher](https://github.com/kamaleshs-23/crypt_learn/blob/main/modules/monoalphabetic.js): cipher engine · `modules/monoalphabetic.js`
- [Playfair cipher](https://github.com/kamaleshs-23/crypt_learn/blob/main/modules/playfair.js): cipher engine · `modules/playfair.js`
- [Hill cipher](https://github.com/kamaleshs-23/crypt_learn/blob/main/modules/hillcipher.js): cipher engine · `modules/hillcipher.js`
- [Transposition ciphers](https://github.com/kamaleshs-23/crypt_learn/blob/main/modules/railfence.js): cipher engines · Rail fence, columnar, and product cipher implementations. · `modules/railfence.js`
- [One-time pad](https://github.com/kamaleshs-23/crypt_learn/blob/main/modules/otp.js): cipher engine · `modules/otp.js`

### DES, S-DES & AES

Cipher engines and algorithm-specific explanatory flows.

- [DES engine](https://github.com/kamaleshs-23/crypt_learn/blob/main/modules/des.js): cipher engine · `modules/des.js`
- [S-DES engine](https://github.com/kamaleshs-23/crypt_learn/blob/main/modules/sdes.js): cipher engine · `modules/sdes.js`
- [AES engine](https://github.com/kamaleshs-23/crypt_learn/blob/main/modules/aes.js): cipher engine · `modules/aes.js`

### Visualization Layer

Browser-renderable algorithm explanations.

- [Shared visualizations](https://github.com/kamaleshs-23/crypt_learn/blob/main/modules/visualizations.js): visualization support · `modules/visualizations.js`
- [DES visualization](https://github.com/kamaleshs-23/crypt_learn/blob/main/modules/des-visualization.js): algorithm visualization · Exposes DES stages and intermediate values. · `modules/des-visualization.js`
- [S-DES visualization](https://github.com/kamaleshs-23/crypt_learn/blob/main/modules/sdes-visualization.js): algorithm visualization · `modules/sdes-visualization.js`
- [DES flow diagrams](https://github.com/kamaleshs-23/crypt_learn/blob/main/modules/des-flow-diagrams.js): diagram renderer · `modules/des-flow-diagrams.js`
- [Unified DES flow](https://github.com/kamaleshs-23/crypt_learn/blob/main/modules/des-unified-flow.js): flow visualization · `modules/des-unified-flow.js`
- [AES visualization](https://github.com/kamaleshs-23/crypt_learn/blob/main/modules/aes-visualization.js): algorithm visualization · Explains AES state transformations. · `modules/aes-visualization.js`

## Connections

- Application page → UI dispatcher: loads
- Application page → Presentation: styles
- UI dispatcher → Caesar cipher: dispatches
- UI dispatcher → Vigenère cipher: dispatches
- UI dispatcher → Monoalphabetic cipher: dispatches
- UI dispatcher → Playfair cipher: dispatches
- UI dispatcher → Hill cipher: dispatches
- UI dispatcher → Transposition ciphers: dispatches
- UI dispatcher → One-time pad: dispatches
- UI dispatcher → DES engine: dispatches
- UI dispatcher → S-DES engine: dispatches
- UI dispatcher → AES engine: dispatches
- UI dispatcher → Shared visualizations: renders explanations
- DES engine → DES visualization: provides stages
- S-DES engine → S-DES visualization: provides stages
- AES engine → AES visualization: provides state changes
- DES visualization → DES flow diagrams: renders diagrams
- DES visualization → Unified DES flow: renders flow
- Shared visualizations → DES visualization: supports
- Shared visualizations → AES visualization: supports