# vanshmishra26/compiler-design-project architecture

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

- Interactive diagram: https://gitdiagram.com/vanshmishra26/compiler-design-project
- Repository: https://github.com/vanshmishra26/compiler-design-project

## Overview

This is a stateless, full-stack visualizer for a small C-like compiler. A user edits source in the browser and requests compilation; the backend returns phase results and trace steps, which the interface presents as tokens, a parse tree, semantic symbols, TAC, and optimization views. The full-pipeline orchestration and frontend request path are visible in sampled source; the README documents the additional compiler and visualization capabilities represented here. Some component wiring and phase internals are based on documented capabilities and exact paths in the tree, not inspected excerpts.

Main entry points: [`frontend/app/page.tsx`](https://github.com/vanshmishra26/compiler-design-project/blob/main/frontend/app/page.tsx) (Visualizer page), [`backend/app/pipeline.py`](https://github.com/vanshmishra26/compiler-design-project/blob/main/backend/app/pipeline.py) (Pipeline runner), [`backend/app/routers/compile.py`](https://github.com/vanshmishra26/compiler-design-project/blob/main/backend/app/routers/compile.py) (Compile routes), [`frontend/store/pipelineStore.ts`](https://github.com/vanshmishra26/compiler-design-project/blob/main/frontend/store/pipelineStore.ts) (Pipeline state)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_authoring["Source and state"]
  node_home["Visualizer page<br/>[page.tsx]"]
  node_editor["Code editor<br/>[CodeEditor.tsx]"]
  node_store["Pipeline state<br/>[pipelineStore.ts]"]
  node_api_client["Compile client<br/>[api.ts]"]
end

subgraph group_service["Compilation service"]
  node_fastapi["FastAPI app<br/>[main.py]"]
  node_compile_router["Compile routes<br/>[compile.py]"]
  node_pipeline["Pipeline runner<br/>[pipeline.py]"]
  node_optimizer_runner["Optimize route runner"]
end

subgraph group_compiler["Compiler phases"]
  node_lexer["Lexer<br/>[lexer.py]"]
  node_parser["Parser and AST<br/>[parser.py]"]
  node_ast_nodes["AST nodes<br/>[ast_nodes.py]"]
  node_semantic["Semantic analysis<br/>[semantic.py]"]
  node_tac["TAC generation<br/>[tac.py]"]
  node_optimizer["Optimizer<br/>[optimizer.py]"]
  node_errors["Compiler errors<br/>[errors.py]"]
end

subgraph group_visualization["Pipeline views"]
  node_tokens["Token stream<br/>[TokenStream.tsx]"]
  node_parse_view["Parse tree<br/>[ParseTreeGraph.tsx]"]
  node_semantic_view["Symbol table"]
  node_tac_view["TAC view<br/>[TACView.tsx]"]
  node_optimization_view["Optimization view"]
  node_tree_layout["Graph layout<br/>[treeLayout.ts]"]
  node_phase_tabs["Phase tabs<br/>[PhaseTabs.tsx]"]
  node_playback["Playback controls"]
  node_error_banner["Error display<br/>[ErrorBanner.tsx]"]
end

node_user(("Engineer"))

node_user -->|"edits and compiles"| node_home
node_home -->|"renders"| node_editor
node_home -->|"reads and updates"| node_store
node_editor -->|"updates source"| node_store
node_home -->|"requests compilation"| node_api_client
node_api_client -->|"POST source"| node_fastapi
node_fastapi -->|"dispatches routes"| node_compile_router
node_compile_router -->|"runs full pipeline"| node_pipeline
node_compile_router -->|"runs phase requests"| node_pipeline
node_compile_router -->|"runs optimize request"| node_optimizer_runner
node_pipeline -->|"tokenizes source"| node_lexer
node_pipeline -->|"parses tokens"| node_parser
node_pipeline -->|"analyzes AST"| node_semantic
node_pipeline -->|"generates TAC"| node_tac
node_pipeline -->|"optimizes TAC"| node_optimizer
node_optimizer_runner -->|"optimizes source"| node_optimizer
node_parser -->|"builds AST"| node_ast_nodes
node_semantic -->|"annotates AST"| node_ast_nodes
node_pipeline -->|"packages phase errors"| node_errors
node_pipeline -->|"returns phase results"| node_api_client
node_home -->|"displays lex result"| node_tokens
node_home -->|"displays parse result"| node_parse_view
node_home -->|"displays semantic result"| node_semantic_view
node_home -->|"displays TAC result"| node_tac_view
node_home -->|"displays optimization"| node_optimization_view
node_parse_view -->|"lays out AST"| node_tree_layout
node_optimization_view -->|"lays out DAG"| node_tree_layout
node_home -->|"renders phase selection"| node_phase_tabs
node_phase_tabs -->|"changes phase"| node_store
node_home -->|"renders step controls"| node_playback
node_playback -->|"changes playback state"| node_store
node_home -->|"displays compiler errors"| node_error_banner

click node_home "https://github.com/vanshmishra26/compiler-design-project/blob/main/frontend/app/page.tsx"
click node_editor "https://github.com/vanshmishra26/compiler-design-project/blob/main/frontend/components/CodeEditor.tsx"
click node_store "https://github.com/vanshmishra26/compiler-design-project/blob/main/frontend/store/pipelineStore.ts"
click node_api_client "https://github.com/vanshmishra26/compiler-design-project/blob/main/frontend/lib/api.ts"
click node_fastapi "https://github.com/vanshmishra26/compiler-design-project/blob/main/backend/app/main.py"
click node_compile_router "https://github.com/vanshmishra26/compiler-design-project/blob/main/backend/app/routers/compile.py"
click node_pipeline "https://github.com/vanshmishra26/compiler-design-project/blob/main/backend/app/pipeline.py"
click node_optimizer_runner "https://github.com/vanshmishra26/compiler-design-project/blob/main/backend/app/optimizer_runner.py"
click node_lexer "https://github.com/vanshmishra26/compiler-design-project/blob/main/backend/app/engine/lexer.py"
click node_parser "https://github.com/vanshmishra26/compiler-design-project/blob/main/backend/app/engine/parser.py"
click node_ast_nodes "https://github.com/vanshmishra26/compiler-design-project/blob/main/backend/app/engine/ast_nodes.py"
click node_semantic "https://github.com/vanshmishra26/compiler-design-project/blob/main/backend/app/engine/semantic.py"
click node_tac "https://github.com/vanshmishra26/compiler-design-project/blob/main/backend/app/engine/tac.py"
click node_optimizer "https://github.com/vanshmishra26/compiler-design-project/blob/main/backend/app/engine/optimizer.py"
click node_errors "https://github.com/vanshmishra26/compiler-design-project/blob/main/backend/app/engine/errors.py"
click node_tokens "https://github.com/vanshmishra26/compiler-design-project/blob/main/frontend/components/TokenStream.tsx"
click node_parse_view "https://github.com/vanshmishra26/compiler-design-project/blob/main/frontend/components/ParseTreeGraph.tsx"
click node_semantic_view "https://github.com/vanshmishra26/compiler-design-project/blob/main/frontend/components/SymbolTablePanel.tsx"
click node_tac_view "https://github.com/vanshmishra26/compiler-design-project/blob/main/frontend/components/TACView.tsx"
click node_optimization_view "https://github.com/vanshmishra26/compiler-design-project/blob/main/frontend/components/OptimizationView.tsx"
click node_tree_layout "https://github.com/vanshmishra26/compiler-design-project/blob/main/frontend/lib/treeLayout.ts"
click node_phase_tabs "https://github.com/vanshmishra26/compiler-design-project/blob/main/frontend/components/PhaseTabs.tsx"
click node_playback "https://github.com/vanshmishra26/compiler-design-project/blob/main/frontend/components/PlaybackControls.tsx"
click node_error_banner "https://github.com/vanshmishra26/compiler-design-project/blob/main/frontend/components/ErrorBanner.tsx"

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_home,node_editor,node_store,node_api_client toneBlue
class node_fastapi,node_compile_router,node_pipeline,node_optimizer_runner toneAmber
class node_lexer,node_parser,node_ast_nodes,node_semantic,node_tac,node_optimizer,node_errors toneMint
class node_tokens,node_parse_view,node_semantic_view,node_tac_view,node_optimization_view,node_tree_layout,node_phase_tabs,node_playback,node_error_banner toneRose
class node_user toneIndigo
```

## Components

### Source and state

- [Visualizer page](https://github.com/vanshmishra26/compiler-design-project/blob/main/frontend/app/page.tsx): `frontend/app/page.tsx`
- [Code editor](https://github.com/vanshmishra26/compiler-design-project/blob/main/frontend/components/CodeEditor.tsx): `frontend/components/CodeEditor.tsx`
- [Pipeline state](https://github.com/vanshmishra26/compiler-design-project/blob/main/frontend/store/pipelineStore.ts): `frontend/store/pipelineStore.ts`
- [Compile client](https://github.com/vanshmishra26/compiler-design-project/blob/main/frontend/lib/api.ts): `frontend/lib/api.ts`

### Compilation service

- [FastAPI app](https://github.com/vanshmishra26/compiler-design-project/blob/main/backend/app/main.py): `backend/app/main.py`
- [Compile routes](https://github.com/vanshmishra26/compiler-design-project/blob/main/backend/app/routers/compile.py): `backend/app/routers/compile.py`
- [Pipeline runner](https://github.com/vanshmishra26/compiler-design-project/blob/main/backend/app/pipeline.py): `backend/app/pipeline.py`
- [Optimize route runner](https://github.com/vanshmishra26/compiler-design-project/blob/main/backend/app/optimizer_runner.py): `backend/app/optimizer_runner.py`

### Compiler phases

- [Lexer](https://github.com/vanshmishra26/compiler-design-project/blob/main/backend/app/engine/lexer.py): `backend/app/engine/lexer.py`
- [Parser and AST](https://github.com/vanshmishra26/compiler-design-project/blob/main/backend/app/engine/parser.py): `backend/app/engine/parser.py`
- [AST nodes](https://github.com/vanshmishra26/compiler-design-project/blob/main/backend/app/engine/ast_nodes.py): `backend/app/engine/ast_nodes.py`
- [Semantic analysis](https://github.com/vanshmishra26/compiler-design-project/blob/main/backend/app/engine/semantic.py): `backend/app/engine/semantic.py`
- [TAC generation](https://github.com/vanshmishra26/compiler-design-project/blob/main/backend/app/engine/tac.py): `backend/app/engine/tac.py`
- [Optimizer](https://github.com/vanshmishra26/compiler-design-project/blob/main/backend/app/engine/optimizer.py): `backend/app/engine/optimizer.py`
- [Compiler errors](https://github.com/vanshmishra26/compiler-design-project/blob/main/backend/app/engine/errors.py): `backend/app/engine/errors.py`

### Pipeline views

- [Token stream](https://github.com/vanshmishra26/compiler-design-project/blob/main/frontend/components/TokenStream.tsx): `frontend/components/TokenStream.tsx`
- [Parse tree](https://github.com/vanshmishra26/compiler-design-project/blob/main/frontend/components/ParseTreeGraph.tsx): `frontend/components/ParseTreeGraph.tsx`
- [Symbol table](https://github.com/vanshmishra26/compiler-design-project/blob/main/frontend/components/SymbolTablePanel.tsx): `frontend/components/SymbolTablePanel.tsx`
- [TAC view](https://github.com/vanshmishra26/compiler-design-project/blob/main/frontend/components/TACView.tsx): `frontend/components/TACView.tsx`
- [Optimization view](https://github.com/vanshmishra26/compiler-design-project/blob/main/frontend/components/OptimizationView.tsx): `frontend/components/OptimizationView.tsx`
- [Graph layout](https://github.com/vanshmishra26/compiler-design-project/blob/main/frontend/lib/treeLayout.ts): `frontend/lib/treeLayout.ts`
- [Phase tabs](https://github.com/vanshmishra26/compiler-design-project/blob/main/frontend/components/PhaseTabs.tsx): `frontend/components/PhaseTabs.tsx`
- [Playback controls](https://github.com/vanshmishra26/compiler-design-project/blob/main/frontend/components/PlaybackControls.tsx): `frontend/components/PlaybackControls.tsx`
- [Error display](https://github.com/vanshmishra26/compiler-design-project/blob/main/frontend/components/ErrorBanner.tsx): `frontend/components/ErrorBanner.tsx`

### Other components

- **Engineer**

## Connections

- Engineer → Visualizer page: edits and compiles
- Visualizer page → Code editor: renders
- Visualizer page → Pipeline state: reads and updates
- Code editor → Pipeline state: updates source
- Visualizer page → Compile client: requests compilation
- Compile client → FastAPI app: POST source
- FastAPI app → Compile routes: dispatches routes
- Compile routes → Pipeline runner: runs full pipeline
- Compile routes → Pipeline runner: runs phase requests
- Compile routes → Optimize route runner: runs optimize request
- Pipeline runner → Lexer: tokenizes source
- Pipeline runner → Parser and AST: parses tokens
- Pipeline runner → Semantic analysis: analyzes AST
- Pipeline runner → TAC generation: generates TAC
- Pipeline runner → Optimizer: optimizes TAC
- Optimize route runner → Optimizer: optimizes source
- Parser and AST → AST nodes: builds AST
- Semantic analysis → AST nodes: annotates AST
- Pipeline runner → Compiler errors: packages phase errors
- Pipeline runner → Compile client: returns phase results
- Visualizer page → Token stream: displays lex result
- Visualizer page → Parse tree: displays parse result
- Visualizer page → Symbol table: displays semantic result
- Visualizer page → TAC view: displays TAC result
- Visualizer page → Optimization view: displays optimization
- Parse tree → Graph layout: lays out AST
- Optimization view → Graph layout: lays out DAG
- Visualizer page → Phase tabs: renders phase selection
- Phase tabs → Pipeline state: changes phase
- Visualizer page → Playback controls: renders step controls
- Playback controls → Pipeline state: changes playback state
- Visualizer page → Error display: displays compiler errors