# kirastreet/generative-crochet architecture

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

- Interactive diagram: https://gitdiagram.com/kirastreet/generative-crochet
- Repository: https://github.com/kirastreet/generative-crochet

## Overview

This repository is a small, static front-end site for an MFA thesis project about generative crochet. There is no evidence of a backend, database, or build pipeline; the architecture appears to be browser-only HTML/CSS/JavaScript.

1. Entry points  
The site has at least two HTML entry pages: `index.html` and `crochetGenerator.html`. These likely split the public-facing thesis/project presentation from the interactive generator experience.

2. Presentation layer  
`crochetProject.css` and `crochetProject.js` appear to support the main thesis/project page. This layer likely handles layout, copy, visuals, and any page-specific interactions for the project narrative.

3. Generator layer  
`crochetGenerator.css` and `crochet.js` appear to support the crochet pattern generator. This is the most likely “dynamic” part of the site, responsible for creating or updating the generative crochet output in the browser.

4. Shared client-side runtime  
All behavior is likely executed directly in the browser using plain JavaScript, with no framework or compiled assets visible in the repository. That means the site is probably assembled from static files and DOM-based interactions.

5. Visual assets  
There are two image directories: `crochetPics` and `patternPics`. These likely separate documentation imagery or finished crochet photos from pattern/generative reference graphics. The split suggests distinct visual roles in the site’s content model.

6. Content / media flow  
A typical flow is: HTML loads CSS and JS, JS manipulates the DOM or canvas/SVG elements, and imagery from the two asset folders is displayed as supporting content. The generator page likely produces or previews crochet-like patterns while the project page presents examples and thesis context.

7. Functional boundary between pages  
The repository appears organized around two concerns: a static informational thesis site and an interactive generator. That separation is reflected in the duplicated naming of paired JS/CSS files for the project and generator views.

8. Deployment model  
Given the file set, this is likely deployed as a static website, probably on a standard web host. The README’s link to `generativecrochet.com` reinforces that this is a standalone published site rather than an app backed by services.

9. What to show in an architecture diagram  
A clear diagram would show the browser as the runtime, the two HTML entry points as top-level entry nodes, the corresponding CSS/JS files attached per page, and the image folders as static asset dependencies. No server-side components are indicated by the repository contents.

10. Key boundary to preserve  
The main architectural boundary is between static presentation assets and client-side generative logic. If you diagram this repo accurately, it should look like a self-contained front-end experience with page-specific scripts and styles, not a multi-tier application.

Main entry points: [`index.html`](https://github.com/kirastreet/generative-crochet/blob/master/index.html) (Home), [`crochetGenerator.html`](https://github.com/kirastreet/generative-crochet/blob/master/crochetGenerator.html) (Generator), [`crochetProject.js`](https://github.com/kirastreet/generative-crochet/blob/master/crochetProject.js) (Project JS), [`README.md`](https://github.com/kirastreet/generative-crochet/blob/master/README.md) (README)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_runtime["Browser runtime"]
  node_browser(("Browser<br/>runtime"))
end

subgraph group_project["Project page"]
  node_index_html["Home<br/>html entry<br/>[index.html]"]
  node_project_css["Project CSS<br/>styles<br/>[crochetProject.css]"]
  node_project_js["Project JS<br/>client script<br/>[crochetProject.js]"]
  node_readme["README<br/>project notes<br/>[README.md]"]
end

subgraph group_generator["Generator page"]
  node_generator_html["Generator<br/>html entry"]
  node_generator_css["Generator CSS<br/>styles"]
  node_generator_js["Generator JS<br/>generative script<br/>[crochet.js]"]
end

subgraph group_media["Media assets"]
  node_crochet_pics["Crochet pics<br/>image set"]
  node_pattern_pics["Pattern pics<br/>image set"]
end

node_browser -->|"loads"| node_index_html
node_browser -->|"loads"| node_generator_html
node_index_html -->|"uses"| node_project_css
node_index_html -->|"runs"| node_project_js
node_generator_html -->|"uses"| node_generator_css
node_generator_html -->|"runs"| node_generator_js
node_project_js -->|"shows"| node_crochet_pics
node_project_js -->|"shows"| node_pattern_pics
node_generator_js -->|"references"| node_pattern_pics
node_readme -.->|"points to"| node_index_html
node_readme -.->|"points to"| node_generator_html

click node_index_html "https://github.com/kirastreet/generative-crochet/blob/master/index.html"
click node_project_css "https://github.com/kirastreet/generative-crochet/blob/master/crochetProject.css"
click node_project_js "https://github.com/kirastreet/generative-crochet/blob/master/crochetProject.js"
click node_generator_html "https://github.com/kirastreet/generative-crochet/blob/master/crochetGenerator.html"
click node_generator_css "https://github.com/kirastreet/generative-crochet/blob/master/crochetGenerator.css"
click node_generator_js "https://github.com/kirastreet/generative-crochet/blob/master/crochet.js"
click node_crochet_pics "https://github.com/kirastreet/generative-crochet/tree/master/crochetPics"
click node_pattern_pics "https://github.com/kirastreet/generative-crochet/tree/master/patternPics"
click node_readme "https://github.com/kirastreet/generative-crochet/blob/master/README.md"

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_browser toneBlue
class node_index_html,node_project_css,node_project_js,node_readme toneAmber
class node_generator_html,node_generator_css,node_generator_js toneMint
class node_crochet_pics,node_pattern_pics toneRose
```

## Components

### Browser runtime

Client-side execution in the browser with no visible backend.

- **Browser**: runtime · Executes the static site and all client-side interactions.

### Project page

Static thesis/project presentation and its page-specific assets.

- [Home](https://github.com/kirastreet/generative-crochet/blob/master/index.html): html entry · Main thesis/project presentation page. · `index.html`
- [Project CSS](https://github.com/kirastreet/generative-crochet/blob/master/crochetProject.css): styles · Layout and visual styling for the project page. · `crochetProject.css`
- [Project JS](https://github.com/kirastreet/generative-crochet/blob/master/crochetProject.js): client script · Page behavior for the thesis/project presentation. · `crochetProject.js`
- [README](https://github.com/kirastreet/generative-crochet/blob/master/README.md): project notes · Repository overview and published-site reference. · `README.md`

### Generator page

Interactive crochet pattern generation experience and its page-specific assets.

- [Generator](https://github.com/kirastreet/generative-crochet/blob/master/crochetGenerator.html): html entry · Interactive crochet generator page. · `crochetGenerator.html`
- [Generator CSS](https://github.com/kirastreet/generative-crochet/blob/master/crochetGenerator.css): styles · Layout and visual styling for the generator page. · `crochetGenerator.css`
- [Generator JS](https://github.com/kirastreet/generative-crochet/blob/master/crochet.js): generative script · Browser-side logic that produces or updates crochet-like output. · `crochet.js`

### Media assets

Image folders used as supporting visual content.

- [Crochet pics](https://github.com/kirastreet/generative-crochet/tree/master/crochetPics): image set · Supporting photos or visual documentation for the project. · `crochetPics`
- [Pattern pics](https://github.com/kirastreet/generative-crochet/tree/master/patternPics): image set · Reference or output imagery for patterns and generation. · `patternPics`

## Connections

- Browser → Home: loads · The browser opens the main presentation page.
- Browser → Generator: loads · The browser opens the interactive generator page.
- Home → Project CSS: uses · Presentation page styling.
- Home → Project JS: runs · Presentation page behavior.
- Generator → Generator CSS: uses · Generator page styling.
- Generator → Generator JS: runs · Generator page behavior.
- Project JS → Crochet pics: shows · Project page can display supporting crochet imagery.
- Project JS → Pattern pics: shows · Project page can display pattern-related imagery.
- Generator JS → Pattern pics: references · Generator logic may use pattern imagery as visual reference or output support.
- README → Home: points to · Repository notes describe the published site entry point.
- README → Generator: points to · Repository notes describe the interactive generator page.