Alexander Bocken
cee285162a
Replace the "View profile" link with icon action buttons in the bio card top-right corner. On touch devices, single tap shows the bio card (with focus + profile buttons), double tap speed-focuses in the diagram. On desktop, click navigates the diagram and hover shows the bio card. Clicking the root/focused person now navigates to their profile page. Tapping the SVG background or the same card again dismisses the tooltip.
Full Diagram — webtrees Chart Module
A MyHeritage "Family View" style visualization for webtrees, showing direct ancestors and descendants as well as siblings and their spouses in a single interactive diagram.
Features
- Combined ancestor and descendant tree in one view
- Siblings and their spouses displayed alongside the main lineage
- Interactive SVG diagram with pan and zoom (D3.js + ELK layout)
- Configurable generation limits for ancestors and descendants
- Available as both a standalone chart and an individual-page tab
- Hover cards with summary information
How the Layout Works
The diagram is laid out using ELK (Eclipse Layout Kernel) and its layered (Sugiyama) algorithm. The family tree is modelled as a directed graph where each person is a node and couples are connected through small invisible "union" nodes. ELK's layered algorithm assigns each node to a horizontal layer (one per generation), minimises edge crossings between layers, and positions nodes to keep connecting edges short.
Spouses are fed into ELK as adjacent nodes with model-order constraints so they stay next to each other. After ELK computes X positions, Y coordinates are snapped to a strict generation grid and orthogonal bus-line connectors (couple bars, vertical drops, horizontal child rails) are drawn manually rather than relying on ELK's edge routing.
Requirements
- webtrees 2.2+
- PHP 8.2+
Installation
- Download the latest release.
- Extract it into the
modules_v4/directory of your webtrees installation so the structure ismodules_v4/webtrees-full-diagram/module.php. - Go to Control panel > Modules > Charts and enable "Full Diagram".
Development
# Start the local dev environment (webtrees + MariaDB)
cd docker && docker compose up -d
# Install JS dependencies
npm install
# Build the JS bundle (watches for changes)
npm run watch
# One-off production build
npm run build
License
This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.