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

# 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](https://jointjs.com/demos/genogram).

## Available Versions

- [TypeScript](./ts/)

## Screenshot

![screenshot](./screenshot.png)