---
source: https://www.jointjs.com/demos/genogram
github: https://raw.githubusercontent.com/clientIO/joint-demos/main/genogram/README.md
generated: 2026-04-21
format: plaintext
---

JointJS: Genogram

A genogram is an extended family tree diagram used in medicine, psychology, and social work. Beyond basic lineage, genograms encode additional information through standardized symbols — males as rectangles, females as ellipses, deceased persons marked with an X, and adopted persons shown with brackets. This demo uses JointJS with the @joint/layout-directed-graph package to automatically lay out multi-generational family data.

This demo is also available online at jointjs.com.

Available Versions

TypeScript

Screenshot

!screenshot