# nicolodemus/familienbaum architecture

> Architecture diagram of the GitHub repository nicolodemus/familienbaum, 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/nicolodemus/familienbaum
- Repository: https://github.com/nicolodemus/familienbaum

## Overview

Familienbaum is a browser-based family-history visualizer and editor. Users supply member records and family links, choose a starting node, then browse a laid-out tree by opening or collapsing relationships; the editor can add or remove relatives, update details, and copy data or anniversary listings. The main runtime path runs from the tree controller through DAG construction and layout to D3/SVG rendering. The excerpts show key calls and editing behavior; some README-documented capabilities are retained, but unsampled page wiring and stylesheet behavior are not asserted.

Main entry points: [`js/familienbaum.js`](https://github.com/nicolodemus/familienbaum/blob/master/js/familienbaum.js) (Tree controller), [`js/editor.js`](https://github.com/nicolodemus/familienbaum/blob/master/js/editor.js) (Tree editor), [`input.js`](https://github.com/nicolodemus/familienbaum/blob/master/input.js) (Member and link data), [`js/dag_with_relations.js`](https://github.com/nicolodemus/familienbaum/blob/master/js/dag_with_relations.js) (Relationship queries)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_data["Family data"]
  node_familydata["Member and link data<br/>[input.js]"]
end

subgraph group_graph["DAG model"]
  node_dagcore["DAG construction<br/>[dag.js]"]
  node_relations["Relationship queries"]
  node_familydag["Family data DAG"]
  node_layout["Generation layout<br/>[dag_layout.js]"]
  node_relax["Position relaxation<br/>[dag_relaxation.js]"]
end

subgraph group_view["Tree browsing"]
  node_controller["Tree controller<br/>[familienbaum.js]"]
  node_renderer["SVG tree renderer<br/>[familienbaum.js]"]
end

subgraph group_editing["Editing and output"]
  node_editor["Tree editor<br/>[editor.js]"]
  node_anniversaries["Anniversary output<br/>[editor.js]"]
end

node_user(("Family historian"))
node_d3["D3 library"]

node_user -->|"provides records"| node_familydata
node_familydata -->|"starts visualization"| node_controller
node_controller -->|"builds filtered DAG"| node_familydag
node_familydag -->|"creates relations"| node_relations
node_relations -->|"constructs DAG"| node_dagcore
node_controller -->|"calculates layout"| node_layout
node_layout -->|"relaxes positions"| node_relax
node_controller -->|"draws tree"| node_renderer
node_renderer -->|"renders with"| node_d3
node_user -->|"browses relationships"| node_controller
node_renderer -->|"opens editor"| node_editor
node_editor -->|"updates records"| node_familydata
node_editor -->|"rebuilds and redraws"| node_controller
node_editor -->|"generates listings"| node_anniversaries
node_user -->|"edits relatives"| node_editor

click node_familydata "https://github.com/nicolodemus/familienbaum/blob/master/input.js"
click node_controller "https://github.com/nicolodemus/familienbaum/blob/master/js/familienbaum.js"
click node_dagcore "https://github.com/nicolodemus/familienbaum/blob/master/js/dag.js"
click node_relations "https://github.com/nicolodemus/familienbaum/blob/master/js/dag_with_relations.js"
click node_familydag "https://github.com/nicolodemus/familienbaum/blob/master/js/dag_with_family_data.js"
click node_layout "https://github.com/nicolodemus/familienbaum/blob/master/js/dag_layout.js"
click node_relax "https://github.com/nicolodemus/familienbaum/blob/master/js/dag_relaxation.js"
click node_renderer "https://github.com/nicolodemus/familienbaum/blob/master/js/familienbaum.js"
click node_editor "https://github.com/nicolodemus/familienbaum/blob/master/js/editor.js"
click node_anniversaries "https://github.com/nicolodemus/familienbaum/blob/master/js/editor.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_familydata toneBlue
class node_dagcore,node_relations,node_familydag,node_layout,node_relax toneAmber
class node_controller,node_renderer toneMint
class node_editor,node_anniversaries toneRose
class node_user,node_d3 toneIndigo
```

## Components

### Family data

- [Member and link data](https://github.com/nicolodemus/familienbaum/blob/master/input.js): `input.js`

### DAG model

- [DAG construction](https://github.com/nicolodemus/familienbaum/blob/master/js/dag.js): `js/dag.js`
- [Relationship queries](https://github.com/nicolodemus/familienbaum/blob/master/js/dag_with_relations.js): `js/dag_with_relations.js`
- [Family data DAG](https://github.com/nicolodemus/familienbaum/blob/master/js/dag_with_family_data.js): `js/dag_with_family_data.js`
- [Generation layout](https://github.com/nicolodemus/familienbaum/blob/master/js/dag_layout.js): `js/dag_layout.js`
- [Position relaxation](https://github.com/nicolodemus/familienbaum/blob/master/js/dag_relaxation.js): `js/dag_relaxation.js`

### Tree browsing

- [Tree controller](https://github.com/nicolodemus/familienbaum/blob/master/js/familienbaum.js): `js/familienbaum.js`
- [SVG tree renderer](https://github.com/nicolodemus/familienbaum/blob/master/js/familienbaum.js): `js/familienbaum.js`

### Editing and output

- [Tree editor](https://github.com/nicolodemus/familienbaum/blob/master/js/editor.js): `js/editor.js`
- [Anniversary output](https://github.com/nicolodemus/familienbaum/blob/master/js/editor.js): `js/editor.js`

### Other components

- **Family historian**
- **D3 library**

## Connections

- Family historian → Member and link data: provides records (evidence: `README.md`)
- Member and link data → Tree controller: starts visualization (evidence: `README.md`)
- Tree controller → Family data DAG: builds filtered DAG (evidence: `js/familienbaum.js`)
- Family data DAG → Relationship queries: creates relations (evidence: `js/dag_with_family_data.js`)
- Relationship queries → DAG construction: constructs DAG (evidence: `js/dag_with_relations.js`)
- Tree controller → Generation layout: calculates layout (evidence: `js/familienbaum.js`)
- Generation layout → Position relaxation: relaxes positions (evidence: `js/dag_layout.js`)
- Tree controller → SVG tree renderer: draws tree (evidence: `js/familienbaum.js`)
- SVG tree renderer → D3 library: renders with (evidence: `js/familienbaum.js`)
- Family historian → Tree controller: browses relationships (evidence: `README.md`)
- SVG tree renderer → Tree editor: opens editor (evidence: `js/familienbaum.js`)
- Tree editor → Member and link data: updates records (evidence: `js/editor.js`)
- Tree editor → Tree controller: rebuilds and redraws (evidence: `js/editor.js`)
- Tree editor → Anniversary output: generates listings (evidence: `js/editor.js`)
- Family historian → Tree editor: edits relatives (evidence: `README.md`)