Pedigree Draw

A professional pedigree (family tree) drawing tool for genetic counselors and bioinformatics professionals.

Features

• Import/Export GATK PED files
• Interactive web-based editor
• Support for standard pedigree symbols (NSGC standards)
• Export to SVG, PNG, or PED format
• Full pedigree features: affected/unaffected/carrier status, twins, consanguinity, adoption markers, etc.

---

Quick Start

Prerequisites

You need Node.js (version 18 or higher) installed on your computer.

Check if you have it:

node --version

If not installed, download from: https://nodejs.org/ (choose LTS version)

---

Step 1: Start the Server

Open your terminal and navigate to the project folder:

cd /home/gbanyan/projects/pedigree-draw

Run the start script:

./start.sh

You should see output like:

==========================================
  Pedigree Draw Server Started!
==========================================

  Local:   http://localhost:5173/pedigree-draw/
  Network: http://192.168.x.x:5173/pedigree-draw/

  To stop the server, run: ./stop.sh
==========================================

---

Step 2: Open in Browser

Open your web browser and go to:

• On this computer: http://localhost:5173/pedigree-draw/
• From another device on the same network: Use the Network URL shown above

---

Step 3: Stop the Server

When you're done, stop the server:

./stop.sh

---

How to Use the Application

Creating a New Pedigree

1. Click "New Pedigree" in the left panel
2. Enter a Family ID (e.g., "FAM001")

Adding Persons

Use the toolbar at the top:

Button	Description
Square	Add Male
Circle	Add Female
Diamond	Add Unknown Sex

Selecting a Person

• Click on a person to select them
• A blue dashed border will appear around the selected person
• The right panel will show editable properties

Adding Relationships

First select a person, then use these toolbar buttons:

Button	Description
Add Spouse	Creates a spouse next to selected person with connection line
Add Child	Creates a child below the selected person
Add Parents	Creates both parents above the selected person

Editing Properties

When a person is selected, use the right panel to edit:

• Label: Display name
• Sex: Male / Female / Unknown
• Phenotype: Unaffected / Affected / Carrier / Unknown
• Status: Deceased, Proband, Adopted, Miscarriage, Stillbirth

Canvas Controls

Button	Description
+	Zoom in
-	Zoom out
Reset	Reset to 100% zoom, centered
Fit	Fit all content to screen

You can also:

• Drag persons to reposition them
• Pan the canvas by dragging the background
• Scroll to zoom in/out

Importing a PED File

1. Click "Import PED" in the left panel, OR
2. Drag and drop a .ped file onto the drop zone

Exporting

Button	Description
Export SVG	Vector image (for editing in Illustrator, etc.)
Export PNG	Raster image (for documents, presentations)
Export PED	GATK PED format file

Undo/Redo

Use the Undo/Redo buttons in the toolbar, or:

• Ctrl+Z to Undo
• Ctrl+Y to Redo

---

PED File Format

The tool supports standard GATK PED format (6 columns, whitespace-separated):

FamilyID  IndividualID  PaternalID  MaternalID  Sex  Phenotype
FAM001    father        0           0           1    1
FAM001    mother        0           0           2    1
FAM001    child1        father      mother      1    2

• Sex: 1 = Male, 2 = Female, 0 = Unknown
• Phenotype: 1 = Unaffected, 2 = Affected, 0 = Unknown
• PaternalID/MaternalID: Use "0" for unknown/founder

---

Troubleshooting

"Permission denied" when running ./start.sh

Make sure the scripts are executable:

chmod +x start.sh stop.sh

Server won't start

1. Check if port 5173 is already in use:

   lsof -i :5173
   

2. Kill any existing process and try again:

   ./stop.sh
   ./start.sh
   

Page won't load

• Make sure you're using the correct URL with /pedigree-draw/ at the end
• Try clearing your browser cache and refreshing

Can't access from another device

• Make sure both devices are on the same network
• Check your firewall settings allow port 5173
• Use the Network URL (not localhost)

---

Development

Build for Production

npm run build

Output will be in the dist/ folder.

Deploy to GitHub Pages

npm run build
# Then upload the dist/ folder contents to your GitHub Pages

---

License

MIT