# 1munzevi0/soy_agaci architecture

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

- Interactive diagram: https://gitdiagram.com/1munzevi0/soy_agaci
- Repository: https://github.com/1munzevi0/soy_agaci

## Overview

Soy Ağacı is a browser-based family-tree prototype. A visitor explores a pan-and-zoom tree, selects a person to view a profile, can make that person the new center, and can reset to the default focus. The primary App builds a generated family model into a viewport-aware graph and renders it; a separate FamilyTree component uses a fixed sample dataset. The sampled code supports these two branches, but does not establish that the fixed-data view is mounted by the app entry point.

Main entry points: [`src/App.tsx`](https://github.com/1munzevi0/soy_agaci/blob/main/src/App.tsx) (Tree canvas), [`src/components/FamilyTree.tsx`](https://github.com/1munzevi0/soy_agaci/blob/main/src/components/FamilyTree.tsx) (Fixed tree view), [`src/lib/layout.ts`](https://github.com/1munzevi0/soy_agaci/blob/main/src/lib/layout.ts) (Graph layout), [`src/main.tsx`](https://github.com/1munzevi0/soy_agaci/blob/main/src/main.tsx) (React entry)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["App and interaction"]
  node_entry["React entry<br/>[main.tsx]"]
  node_app["Tree canvas<br/>[App.tsx]"]
end

subgraph group_model["Family data"]
  node_generated[("Generated family<br/>[family.ts]")]
  node_sample[("Sample family<br/>[familyData.ts]")]
end

subgraph group_graph["Graph construction"]
  node_layout["Graph layout<br/>[layout.ts]"]
end

subgraph group_views["Tree rendering"]
  node_fixedview["Fixed tree view<br/>[FamilyTree.tsx]"]
  node_person["Person cards<br/>[PersonNode.tsx]"]
  node_dots["Distant nodes<br/>[DotNode.tsx]"]
  node_junction["Junction nodes<br/>[JunctionNode.tsx]"]
  node_region["Region nodes<br/>[RegionNode.tsx]"]
  node_edge["Family edges<br/>[FamilyEdge.tsx]"]
  node_header["Header and reset<br/>[Header.tsx]"]
  node_hint["Usage hints<br/>[HintBar.tsx]"]
  node_card["Sample person cards<br/>[PersonCardNode.tsx]"]
  node_distant["Sample distant nodes<br/>[DistantNode.tsx]"]
  node_sampleedge["Sample tree edges<br/>[FamilyEdge.tsx]"]
  node_dashed["Dashed edge<br/>[DashedEdge.tsx]"]
end

node_visitor(("Visitor"))

node_visitor -->|"opens app"| node_entry
node_entry -->|"renders"| node_app
node_app -->|"reads family"| node_generated
node_app -->|"builds and decorates"| node_layout
node_layout -->|"queries relations"| node_generated
node_app -->|"registers node"| node_person
node_app -->|"registers node"| node_dots
node_app -->|"registers node"| node_junction
node_app -->|"registers node"| node_region
node_app -->|"registers edge"| node_edge
node_app -->|"renders"| node_header
node_app -->|"renders"| node_hint
node_dots -->|"uses layout types"| node_layout
node_fixedview -->|"reads records"| node_sample
node_fixedview -->|"registers node"| node_card
node_fixedview -->|"registers node"| node_distant
node_fixedview -->|"registers edge"| node_sampleedge

click node_entry "https://github.com/1munzevi0/soy_agaci/blob/main/src/main.tsx"
click node_app "https://github.com/1munzevi0/soy_agaci/blob/main/src/App.tsx"
click node_generated "https://github.com/1munzevi0/soy_agaci/blob/main/src/lib/family.ts"
click node_sample "https://github.com/1munzevi0/soy_agaci/blob/main/src/data/familyData.ts"
click node_layout "https://github.com/1munzevi0/soy_agaci/blob/main/src/lib/layout.ts"
click node_fixedview "https://github.com/1munzevi0/soy_agaci/blob/main/src/components/FamilyTree.tsx"
click node_person "https://github.com/1munzevi0/soy_agaci/blob/main/src/components/PersonNode.tsx"
click node_dots "https://github.com/1munzevi0/soy_agaci/blob/main/src/components/DotNode.tsx"
click node_junction "https://github.com/1munzevi0/soy_agaci/blob/main/src/components/JunctionNode.tsx"
click node_region "https://github.com/1munzevi0/soy_agaci/blob/main/src/components/RegionNode.tsx"
click node_edge "https://github.com/1munzevi0/soy_agaci/blob/main/src/components/FamilyEdge.tsx"
click node_header "https://github.com/1munzevi0/soy_agaci/blob/main/src/components/Header.tsx"
click node_hint "https://github.com/1munzevi0/soy_agaci/blob/main/src/components/HintBar.tsx"
click node_card "https://github.com/1munzevi0/soy_agaci/blob/main/src/components/nodes/PersonCardNode.tsx"
click node_distant "https://github.com/1munzevi0/soy_agaci/blob/main/src/components/nodes/DistantNode.tsx"
click node_sampleedge "https://github.com/1munzevi0/soy_agaci/blob/main/src/components/edges/FamilyEdge.tsx"
click node_dashed "https://github.com/1munzevi0/soy_agaci/blob/main/src/components/edges/DashedEdge.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_entry,node_app toneBlue
class node_generated,node_sample toneAmber
class node_layout toneMint
class node_fixedview,node_person,node_dots,node_junction,node_region,node_edge,node_header,node_hint,node_card,node_distant,node_sampleedge,node_dashed toneRose
class node_visitor toneIndigo
```

## Components

### App and interaction

- [React entry](https://github.com/1munzevi0/soy_agaci/blob/main/src/main.tsx): `src/main.tsx`
- [Tree canvas](https://github.com/1munzevi0/soy_agaci/blob/main/src/App.tsx): `src/App.tsx`

### Family data

- [Generated family](https://github.com/1munzevi0/soy_agaci/blob/main/src/lib/family.ts): `src/lib/family.ts`
- [Sample family](https://github.com/1munzevi0/soy_agaci/blob/main/src/data/familyData.ts): `src/data/familyData.ts`

### Graph construction

- [Graph layout](https://github.com/1munzevi0/soy_agaci/blob/main/src/lib/layout.ts): `src/lib/layout.ts`

### Tree rendering

- [Fixed tree view](https://github.com/1munzevi0/soy_agaci/blob/main/src/components/FamilyTree.tsx): `src/components/FamilyTree.tsx`
- [Person cards](https://github.com/1munzevi0/soy_agaci/blob/main/src/components/PersonNode.tsx): `src/components/PersonNode.tsx`
- [Distant nodes](https://github.com/1munzevi0/soy_agaci/blob/main/src/components/DotNode.tsx): `src/components/DotNode.tsx`
- [Junction nodes](https://github.com/1munzevi0/soy_agaci/blob/main/src/components/JunctionNode.tsx): `src/components/JunctionNode.tsx`
- [Region nodes](https://github.com/1munzevi0/soy_agaci/blob/main/src/components/RegionNode.tsx): `src/components/RegionNode.tsx`
- [Family edges](https://github.com/1munzevi0/soy_agaci/blob/main/src/components/FamilyEdge.tsx): `src/components/FamilyEdge.tsx`
- [Header and reset](https://github.com/1munzevi0/soy_agaci/blob/main/src/components/Header.tsx): `src/components/Header.tsx`
- [Usage hints](https://github.com/1munzevi0/soy_agaci/blob/main/src/components/HintBar.tsx): `src/components/HintBar.tsx`
- [Sample person cards](https://github.com/1munzevi0/soy_agaci/blob/main/src/components/nodes/PersonCardNode.tsx): `src/components/nodes/PersonCardNode.tsx`
- [Sample distant nodes](https://github.com/1munzevi0/soy_agaci/blob/main/src/components/nodes/DistantNode.tsx): `src/components/nodes/DistantNode.tsx`
- [Sample tree edges](https://github.com/1munzevi0/soy_agaci/blob/main/src/components/edges/FamilyEdge.tsx): `src/components/edges/FamilyEdge.tsx`
- [Dashed edge](https://github.com/1munzevi0/soy_agaci/blob/main/src/components/edges/DashedEdge.tsx): `src/components/edges/DashedEdge.tsx`

### Other components

- **Visitor**

## Connections

- Visitor → React entry: opens app (evidence: `src/main.tsx`)
- React entry → Tree canvas: renders (evidence: `src/main.tsx`)
- Tree canvas → Generated family: reads family (evidence: `src/App.tsx`)
- Tree canvas → Graph layout: builds and decorates (evidence: `src/App.tsx`)
- Graph layout → Generated family: queries relations (evidence: `src/lib/layout.ts`)
- Tree canvas → Person cards: registers node (evidence: `src/App.tsx`)
- Tree canvas → Distant nodes: registers node (evidence: `src/App.tsx`)
- Tree canvas → Junction nodes: registers node (evidence: `src/App.tsx`)
- Tree canvas → Region nodes: registers node (evidence: `src/App.tsx`)
- Tree canvas → Family edges: registers edge (evidence: `src/App.tsx`)
- Tree canvas → Header and reset: renders (evidence: `src/App.tsx`)
- Tree canvas → Usage hints: renders (evidence: `src/App.tsx`)
- Distant nodes → Graph layout: uses layout types (evidence: `src/components/DotNode.tsx`)
- Fixed tree view → Sample family: reads records (evidence: `src/components/FamilyTree.tsx`)
- Fixed tree view → Sample person cards: registers node (evidence: `src/components/FamilyTree.tsx`)
- Fixed tree view → Sample distant nodes: registers node (evidence: `src/components/FamilyTree.tsx`)
- Fixed tree view → Sample tree edges: registers edge (evidence: `src/components/FamilyTree.tsx`)