# koutarou4096/g-tracer architecture

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

- Interactive diagram: https://gitdiagram.com/koutarou4096/g-tracer
- Repository: https://github.com/koutarou4096/g-tracer

## Overview

This browser-based pseudo-language tracer helps exam learners inspect program execution and convert programs to code. The main workflow is to enter a program and initial values, parse the program into an AST, execute it with tracing, and view the resulting state table. A separate code-generation branch produces Python; the README also documents Java generation as implemented in JavaScript, though its page button is not yet present. The excerpts show the main calls; the page markup and unsampled generator details were not inspected.

Main entry points: [`app.js`](https://github.com/koutarou4096/g-tracer/blob/main/app.js) (Run and convert controls), [`interpreter.js`](https://github.com/koutarou4096/g-tracer/blob/main/interpreter.js) (Trace interpreter), [`index.html`](https://github.com/koutarou4096/g-tracer/blob/main/index.html) (Tracer page), [`codegen.js`](https://github.com/koutarou4096/g-tracer/blob/main/codegen.js) (Python generator)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_interface["User interface"]
  node_page["Tracer page<br/>[index.html]"]
  node_controls["Run and convert controls<br/>[app.js]"]
  node_trace_view["Trace table<br/>[app.js]"]
end

subgraph group_language["Language processing"]
  node_parser["Program parser<br/>[parser.js]"]
  node_initial_values["Initial values<br/>[interpreter.js]"]
end

subgraph group_outputs["Execution and generation"]
  node_interpreter["Trace interpreter<br/>[interpreter.js]"]
  node_python_gen["Python generator<br/>[codegen.js]"]
  node_java_gen["Java generator<br/>[codegen.js]"]
  node_python_result["Python output"]
  node_java_result["Java output"]
end

node_learner(("Learner"))

node_learner -->|"uses"| node_page
node_page -->|"hosts controls"| node_controls
node_controls -->|"parses program"| node_parser
node_controls -->|"parses values"| node_initial_values
node_controls -->|"runs AST"| node_interpreter
node_controls -->|"renders trace"| node_trace_view
node_interpreter -->|"returns trace"| node_trace_view
node_controls -->|"generates Python"| node_python_gen
node_python_gen -->|"produces code"| node_python_result
node_java_gen -->|"produces code"| node_java_result
node_interpreter -->|"parses constants"| node_parser

click node_page "https://github.com/koutarou4096/g-tracer/blob/main/index.html"
click node_controls "https://github.com/koutarou4096/g-tracer/blob/main/app.js"
click node_trace_view "https://github.com/koutarou4096/g-tracer/blob/main/app.js"
click node_parser "https://github.com/koutarou4096/g-tracer/blob/main/parser.js"
click node_initial_values "https://github.com/koutarou4096/g-tracer/blob/main/interpreter.js"
click node_interpreter "https://github.com/koutarou4096/g-tracer/blob/main/interpreter.js"
click node_python_gen "https://github.com/koutarou4096/g-tracer/blob/main/codegen.js"
click node_java_gen "https://github.com/koutarou4096/g-tracer/blob/main/codegen.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_page,node_controls,node_trace_view toneBlue
class node_parser,node_initial_values toneAmber
class node_interpreter,node_python_gen,node_java_gen,node_python_result,node_java_result toneMint
class node_learner toneIndigo
```

## Components

### User interface

- [Tracer page](https://github.com/koutarou4096/g-tracer/blob/main/index.html): `index.html`
- [Run and convert controls](https://github.com/koutarou4096/g-tracer/blob/main/app.js): `app.js`
- [Trace table](https://github.com/koutarou4096/g-tracer/blob/main/app.js): `app.js`

### Language processing

- [Program parser](https://github.com/koutarou4096/g-tracer/blob/main/parser.js): `parser.js`
- [Initial values](https://github.com/koutarou4096/g-tracer/blob/main/interpreter.js): `interpreter.js`

### Execution and generation

- [Trace interpreter](https://github.com/koutarou4096/g-tracer/blob/main/interpreter.js): `interpreter.js`
- [Python generator](https://github.com/koutarou4096/g-tracer/blob/main/codegen.js): `codegen.js`
- [Java generator](https://github.com/koutarou4096/g-tracer/blob/main/codegen.js): `codegen.js`
- **Python output**
- **Java output**

### Other components

- **Learner**

## Connections

- Learner → Tracer page: uses (evidence: `README.md`)
- Tracer page → Run and convert controls: hosts controls (evidence: `app.js`)
- Run and convert controls → Program parser: parses program (evidence: `app.js`)
- Run and convert controls → Initial values: parses values (evidence: `app.js`)
- Run and convert controls → Trace interpreter: runs AST (evidence: `app.js`)
- Run and convert controls → Trace table: renders trace (evidence: `app.js`)
- Trace interpreter → Trace table: returns trace (evidence: `app.js`)
- Run and convert controls → Python generator: generates Python (evidence: `app.js`)
- Python generator → Python output: produces code (evidence: `README.md`)
- Java generator → Java output: produces code (evidence: `README.md`)
- Trace interpreter → Program parser: parses constants (evidence: `interpreter.js`)