Documentation

Getting Started

WebGeno runs directly in your browser with no installation required. Simply access the application and begin creating professional genograms immediately.

System Requirements

Modern web browser (Chrome, Firefox, Safari, Edge)
JavaScript enabled
Recommended: 1920x1080 screen resolution or higher
Internet connection for initial loading

First Launch

Navigate to the web application
The application loads with a blank canvas
The legend panel appears by default
Start by adding your first family member

Auto-Save: The application automatically saves your last opened genogram and restores it on your next visit.

Interface Overview

Main Components

Interactive Canvas: Central workspace supporting zoom, pan, and drag operations
File Menu: Top-left menu for save, load, export, and undo/redo operations
Legend Panel: Dynamic, draggable panel showing active symbols
Context Menus: Right-click menus for creating people and relationships
Edit Dialogs: Double-click on people to edit properties and health conditions

Navigation Controls

Mouse Wheel: Zoom in and out of the canvas
Click + Drag: Pan across large genograms
Selection: Click on elements to select and edit
Multi-Selection: Ctrl/Cmd + Click for bulk operations

Health Conditions System

The application includes 42 predefined health conditions organized into professional medical categories with visual differentiation.

Medical Quadrants (Main Categories)

Cardiovascular (Top-Left, Red)

Heart Disease
Hypertension
Stroke
Arrhythmia
High Cholesterol
Cardiomyopathy

Mental/Neurological (Bottom-Left, Blue/Purple)

Depression
Anxiety
Bipolar Disorder
Schizophrenia
Autism Spectrum
ADHD
Alzheimer's Disease
Dementia
Parkinson's Disease

Cancer (Top-Right, Purple)

Breast Cancer
Colorectal Cancer
Prostate Cancer
Lung Cancer
Ovarian Cancer
Skin Cancer/Melanoma
Pancreatic Cancer
Leukemia

Metabolic/Endocrine (Bottom-Right, Green)

Type 1 Diabetes
Type 2 Diabetes
Thyroid Disease
Obesity
Kidney Disease
Osteoporosis

Outer Ring Categories (Secondary)

Respiratory (Orange)

Asthma, COPD, Pulmonary Fibrosis

Autoimmune (Yellow)

Lupus, Rheumatoid Arthritis, Multiple Sclerosis, Celiac Disease

Musculoskeletal (Brown)

Arthritis, Joint disorders

Adding Health Conditions

Double-click on a person to open the edit dialog
Navigate to the "Health Conditions" tab
Select conditions from the categorized list
Conditions appear immediately on the genogram with proper positioning

Health conditions selection interface with category organization

Dynamic Legend System

The legend panel automatically generates visual references for all active elements in your genogram.

Legend Features

Automatic Generation: Shows only relationships and conditions present in your genogram
Visual Accuracy: Legend symbols exactly match genogram rendering
Interactive Positioning: Drag the legend to any location on the canvas
Resizable: Adjust legend size using corner handles
Persistent: Position and size saved with your genogram file

Legend Sections

Couple Relationships: Marriage, divorce, separation symbols
Emotional Relationships: Love, conflict, cutoff, and other dynamics
Health Conditions: All active medical conditions with patterns

Managing the Legend

The legend is visible by default when you have elements in your genogram
Drag the legend panel by its header to reposition anywhere on the canvas
Resize the legend using the corner handles
Legend updates automatically as you add/remove elements

Legend panel showing relationship types and health condition patterns

Creating Family Members

Adding a Person

There are two ways to add a person to your genogram:

Method 1: Left-Click (Quick)

Left-click on an empty area of the canvas
A new person appears at the clicked location with default name and properties
Double-click the person to edit details and properties

Method 2: Right-Click Context Menu

Right-click on an empty area of the canvas
Select "Add Person" from the context menu
A new person appears at the clicked location with default name and properties
Double-click the person to edit details and properties

Person Properties

Basic Information

Name: Full name of the person
Age: Current age or age at death
Gender: Male (square) or Female (circle)
Deceased: Adds X marking through symbol
Notes: Additional information and context

Display Options

Color: Customize symbol color
Name Display: Position of name label
Age Display: Position of age label
Label Visibility: Show/hide different labels

Label Positioning

Labels can be positioned at four locations around each person:

Top-Left
Top-Right
Bottom-Left
Bottom-Right
Hidden

Pro Tip: For complex genograms, consider hiding some labels to reduce visual clutter while maintaining essential information.

Advanced Relationship System

Couple Relationships

Basic Types

Marriage: Solid line connection
Engagement: Dashed line
Love Affair: Dotted line
Common-Law: Special notation

Modifiers

Separation: Single slash through line
Divorce: Double slash through line
Widowed: Special marking
Cohabitation: Dotted connection

Emotional Relationships

Comprehensive emotional dynamics between family members:

Positive Relationships (Green)

Harmony
Love
In Love
Close Friendship
Best Friend

Negative Relationships (Red)

Discord/Conflict
Hate
Cutoff
Hostile
Violence
Abuse (Physical/Emotional)

Special Dynamics

Focused On (Orange)
Fan/Admire (Orange)
Distrust (Purple)
Manipulative (Brown)
Controlling (Brown)

Twin Relationships

Special notation for twin relationships:

Identical Twins: Connected with specific line notation
Fraternal Twins: Different connection style
Multiple Births: Supports triplets and higher orders

Creating Relationships

Select two people by clicking on them (they will appear highlighted)
Right-click to open the context menu
Choose the relationship type from the "Couple Relationships" or "Emotional Relationships" submenu
The relationship line appears automatically between the selected people
Double-click on relationship lines to edit their properties

Examples of different relationship types and their visual representations

Canvas Navigation

Zoom Operations

Mouse Wheel Up: Zoom in for detailed editing
Mouse Wheel Down: Zoom out for overview
Zoom Levels: From 25% to 400% magnification
Fit to Screen: Automatically centers and scales genogram

Pan and Navigation

Click + Drag: Pan across large genograms
Smooth Movement: Responsive canvas operations
Edge Detection: Automatic scrolling at canvas edges

Element Manipulation

Drag People: Click and drag to reposition family members
Auto-Adjustment: Relationships automatically adjust
Grid Alignment: Optional snap-to-grid for precise positioning
Visual Feedback: Real-time feedback during operations

Selection Tools

Single Selection: Click on any element
Multi-Selection: Ctrl/Cmd + Click for multiple elements
Area Selection: Drag to select multiple elements
Selection Indicators: Clear visual indication of selected items

Navigation Tip: Use zoom to work on specific areas, then zoom out to see the overall family structure.

Bulk Editing Features

Efficiently edit multiple family members simultaneously with advanced change tracking.

Change Tracking System

Visual Indicators: Modified fields are highlighted
Selective Application: Only changed fields affect selected people
Data Preservation: Existing data remains unchanged unless explicitly modified
Undo Support: Bulk operations can be undone

Bulk Operations

Multi-Selection

Ctrl/Cmd + Click to select multiple people
Visual indicators show selected family members
Works across different generations

Batch Property Updates

Change colors for multiple people
Update display settings simultaneously
Apply common health conditions

Using Bulk Edit

Select multiple people using Ctrl/Cmd + Click (they will appear highlighted)
Right-click and choose "Bulk Edit" from the context menu
The bulk edit dialog opens showing all selected people
Modify desired fields (only modified fields will be applied to all selected people)
Click "Apply" to execute bulk changes

Important: The change tracking system prevents accidental data loss by only applying fields you actively modify.

File Management

Saving Genograms

File Menu: Click "File" in the top-left corner to access save options
Save Options: Save, Save As, or use keyboard shortcuts (Ctrl/Cmd+S)
File Format: .genogram files with complete metadata and legend settings
Auto-Restore: Your last opened genogram is automatically restored on next visit

Loading and Importing

File Menu: Click "File" → "Open" to load a .genogram file
GenoPro Import: Click "File" → "Import GenoPro" to load .gno files
File Validation: Comprehensive error checking with detailed messages
Health Condition Merging: Preserves all default conditions while adding custom ones
Keyboard Shortcut: Ctrl/Cmd+O to open files quickly

Export Options Pro

File Menu: Click "File" → "Export" to access export options
PDF Export: Publication-quality PDF for clinical reports
PNG Export: High-resolution images for presentations and documentation
SVG Export: Scalable vector graphics for professional publications
Include Legend: Option to include the legend panel in exported images

File Organization

Descriptive Names: Use meaningful file names
Folder Structure: Organize by family or client
Backup Strategy: Regular exports for backup
Version Control: Save incremental versions for complex cases

Best Practice: Export important genograms as PNG or PDF for long-term archival and sharing.