← всі звіти · family-tree-libs-research-2026-05-02.md

Family Tree Visualization Libraries — Research 2026-05-02

Контекст: Lunar Hubble (особистий проект Сергія, рід Верещаків) — 91 person + 144 relationships. Поточний рендер самописний (HTML divs + SVG ліній з топ-сортуванням по поколіннях) — лінії заплутані, читабельність низька. Стек: FastAPI + чистий HTML/JS, без npm/Webpack pipeline. Шукаємо OSS бібліотеку з CDN-інтеграцією та підтримкою couple/parent_child зв'язків.

TL;DR

Для нашого MVP найбільше підходить donatso/family-chart (720⭐, MIT, D3 під капотом, єдина в топі canonical family-tree бібліотека з нативною моделлю couples + parents + children та CDN-доступом). Як бекапи для конкурсу side-by-side: bumbeishvili/d3-org-chart (1183⭐, найкращий «полірований» рендер з search/mini-map/HTML-template для нод — потребує адаптації couples як псевдо-нод) і CCGE-BOADICEA/pedigreejs (74⭐, GPL-3.0 — медичний pedigree, тому ліцензія обмежує, але рендер найбільш «правильний» генеалогічно). Якщо хочеться графовий підхід замість дерева — cytoscape.js (10957⭐) з custom layout.

ТОП-кандидати (sorted by relevance + stars)

1. donatso/family-chart — 720 ⭐

2. bumbeishvili/d3-org-chart — 1183 ⭐

3. CCGE-BOADICEA/pedigreejs — 74 ⭐

4. ErikGartner/dTree — 555 ⭐

5. cytoscape/cytoscape.js — 10957 ⭐

6. xyflow/xyflow (React Flow) — 36402 ⭐

7. BALKANGraph/FamilyTreeJS — 87 ⭐

8. SanichKotikov/react-family-tree — 69 ⭐

9. BenPortner/js_family_tree — 81 ⭐

Порівняльна таблиця

Lib Stars License Family-spec CDN Bundle Edit Color Last activity
donatso/family-chart 720 MIT ✅ native ✅ ~104 KB ✅ ✅ 2026-04
bumbeishvili/d3-org-chart 1183 MIT ⚠️ adapt ✅ ~42 KB ⚠️ ✅ 2025-04
CCGE-BOADICEA/pedigreejs 74 GPL-3.0 ✅ canonical ⚠️ self-host ~? ✅ ✅ 2026-03
ErikGartner/dTree 555 MIT ✅ multi-parent ✅ ~19 KB ❌ ✅ 2024-05
cytoscape/cytoscape.js 10957 MIT ⚠️ adapt ✅ ~424 KB ✅ ext ✅ powerful 2026-04
xyflow/xyflow 36402 MIT ❌ generic npm only React ~225 KB ✅ ✅ 2026-04
BALKANGraph/FamilyTreeJS 87 proprietary ✅ ✅ ? ✅ ✅ 2025-11
visjs/vis-network 3560 Apache-2.0 ❌ generic ✅ ~644 KB ⚠️ ✅ 2026-05
bkrem/react-d3-tree 1195 MIT ❌ tree only npm React ~? ❌ ✅ 2025-02

Рекомендація для конкурсу

Запропонувати агентам side-by-side порівняння на наших 91 person + 144 rels:

  1. donatso/family-chart — як baseline і найбільш family-native. Перевіряємо чи рендер автоматично дає чисті couple-bars + sibling-rows без додаткових танців.
  2. bumbeishvili/d3-org-chart — як «UX-полірований» варіант. Перевіряємо чи можемо адаптувати couples через invisible marriage-nodes і чи виходить читабельніше за самописне з search + mini-map.
  3. cytoscape.js + dagre layout — як «graph mode» альтернатива. Перевіряємо чи дозволяє тримати mode toggle: «дерево» (dagre layout) vs «мережа» (cose-bilkent), що додасть value над просто рендером.

Опційний 4-й: pedigreejs — якщо хочеться «найбільш академічно-правильний» рендер pedigree-стилю, але GPL-3.0 змушує бути обережними.

Виключити: xyflow (React-only — у нас vanilla), BALKAN (closed-source), dTree (D3 v4 застарів, read-only), SanichKotikov (2019 archive).

Готовий бриф для конкурсних агентів

Завдання

Зробити drop-in tree.html для проекту Lunar Hubble, який рендерить родинне дерево Верещаків з реальних даних /srv/projects/family-tree-mvp/data/persons.json + relationships.json (91 особа, 144 зв'язки) — використовуючи призначену OSS-бібліотеку.

Дані

persons.json — масив об'єктів:

{
  "id": "uuid",
  "first_name": "Іван",
  "last_name": "Верещак",
  "maiden_name": null,
  "gender": "Male|Female|Unknown",
  "life_status": "Living|Deceased",
  "is_living": true,
  "notes": "{\"generation\": 0, \"x_pos\": ..., \"y_pos\": ..., \"generation_color\": \"#0ca789\", \"miro_id\": \"...\"}"
}

relationships.json — масив об'єктів:

{
  "id": "uuid",
  "person_1_id": "uuid|null",
  "person_2_id": "uuid|null",
  "relationship_type": "parent_child|spouse|sibling"
}

Важливо: для parent_child person_1 = parent, person_2 = child. Для spouse порядок не важить. Дані містять "сміттєвий" relationship (type: "123" з null person_id) — фільтрувати на завантаженні.

Обов'язкові вимоги (acceptance criteria)

  1. Couples render horizontally: чоловік+дружина — поряд, з'єднані горизонтальною лінією (couple-bar).
  2. Parent-child vertically: діти спускаються вертикально нижче від couple-bar.
  3. Sibling row: всі діти однієї пари вирівняні по горизонталі, з'єднані зверху одною лінією (sibling-bar).
  4. Color by last_name: палітра автоматично присвоюється унікальним прізвищам (наприклад: Верещак=#0ca789, Клименко=#f59e0b, ...). Maiden_name не змінює колір ноди.
  5. Node card показує: фото (якщо є в /data/photos/<id>.jpg), first_name + last_name (maiden_name у дужках для жінок), роки життя.
  6. Deceased — пунктирний бордер або сірий тон.
  7. Performance: 91 нода + 144 ребра — рендер < 500ms, smooth zoom/pan на ноутбуці.
  8. Інтеграція: один tree.html файл + CDN-link на бібліотеку, без npm/Webpack. Якщо бібліотека потребує build — додати pre-built JS в frontend/dist/.
  9. MIT/Apache-2.0/BSD ліцензія обов'язково (виключити GPL/proprietary).

Бажано (nice-to-have)

Deliverables

  1. frontend/tree-<libname>.html — самодостатня сторінка з рендером.
  2. frontend/data-adapter-<libname>.js — функція transform(persons, rels) → libFormat.
  3. Скріншот результату на full dataset.
  4. Короткий README: чому ця бібліотека, відомі обмеження, як додавати персон.

Бібліотеки для side-by-side агентів

Критерії перемоги

  1. Чи couple/sibling-bars видно з першого погляду (читабельність — головне).
  2. Чи легко додати нову персону (1-2 рядки в JSON → з'являється у дереві без ручного позиціювання).
  3. Чи search/mini-map працюють.
  4. Bundle + час до first paint на повних даних.
  5. Чи код майнтейнабельний (data-adapter простий, не 200 рядків костилів).

Sources