# kumasura/florist architecture

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

- Interactive diagram: https://gitdiagram.com/kumasura/florist
- Repository: https://github.com/kumasura/florist

## Overview

Florist is a browser-based visualization studio starter. A visitor opens the home page, launches the studio, and adjusts chart type, segment, and intensity controls; the studio filters and scales sample data and renders an interactive SVG with hover insights. The graph separates the app shell, studio workflow, and sample data. The chart behavior is implemented within the studio component; no separate persistence or external service is shown.

Main entry points: [`components/VisualizationStudio.tsx`](https://github.com/kumasura/florist/blob/main/components/VisualizationStudio.tsx) (Studio controls), [`app/layout.tsx`](https://github.com/kumasura/florist/blob/main/app/layout.tsx) (Root layout), [`app/page.tsx`](https://github.com/kumasura/florist/blob/main/app/page.tsx) (Home page), [`lib/sampleData.ts`](https://github.com/kumasura/florist/blob/main/lib/sampleData.ts) (Sample dataset)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["App shell"]
  node_root_layout["Root layout<br/>[layout.tsx]"]
  node_home_page["Home page<br/>[page.tsx]"]
end

subgraph group_studio["Visualization studio"]
  node_studio_controls["Studio controls"]
  node_svg_visualization["SVG visualization"]
end

subgraph group_data["Sample data"]
  node_sample_data["Sample dataset<br/>[sampleData.ts]"]
end

node_visitor(("Visitor"))

node_visitor -->|"opens app"| node_root_layout
node_root_layout -->|"renders page"| node_home_page
node_home_page -->|"renders studio"| node_studio_controls
node_studio_controls -->|"filters and scales"| node_sample_data
node_studio_controls -->|"drives rendering"| node_svg_visualization

click node_root_layout "https://github.com/kumasura/florist/blob/main/app/layout.tsx"
click node_home_page "https://github.com/kumasura/florist/blob/main/app/page.tsx"
click node_studio_controls "https://github.com/kumasura/florist/blob/main/components/VisualizationStudio.tsx"
click node_svg_visualization "https://github.com/kumasura/florist/blob/main/components/VisualizationStudio.tsx"
click node_sample_data "https://github.com/kumasura/florist/blob/main/lib/sampleData.ts"

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_root_layout,node_home_page toneBlue
class node_studio_controls,node_svg_visualization toneAmber
class node_sample_data toneMint
class node_visitor toneIndigo
```

## Components

### App shell

- [Root layout](https://github.com/kumasura/florist/blob/main/app/layout.tsx): `app/layout.tsx`
- [Home page](https://github.com/kumasura/florist/blob/main/app/page.tsx): `app/page.tsx`

### Visualization studio

- [Studio controls](https://github.com/kumasura/florist/blob/main/components/VisualizationStudio.tsx): `components/VisualizationStudio.tsx`
- [SVG visualization](https://github.com/kumasura/florist/blob/main/components/VisualizationStudio.tsx): `components/VisualizationStudio.tsx`

### Sample data

- [Sample dataset](https://github.com/kumasura/florist/blob/main/lib/sampleData.ts): `lib/sampleData.ts`

### Other components

- **Visitor**

## Connections

- Visitor → Root layout: opens app (evidence: `README.md`)
- Root layout → Home page: renders page (evidence: `app/layout.tsx`)
- Home page → Studio controls: renders studio (evidence: `app/page.tsx`)
- Studio controls → Sample dataset: filters and scales (evidence: `components/VisualizationStudio.tsx`)
- Studio controls → SVG visualization: drives rendering (evidence: `components/VisualizationStudio.tsx`)