Ecomap
Family systems embedded in institutional, social, and cultural support networks. Radial layout with weighted connection strengths and directional energy flow arrows. Based on Hartman (1978).
ecomap·§ Hartman 1978
↘ preview
100%
UTF-8 · LF · 11 lines · 499 chars✓ parsed·4.4 ms·8.5 KB SVG
Hartman (1978) ecomap model + extensions from clinical social work practice. Visualizes relationships between individuals/families and their external environmental systems.
References:
- Hartman, A. (1978). Diagrammatic assessment of family relationships. Social Casework, 59(8), 465-476.
- Ray, R.A. & Street, A.F. (2005). Ecomapping: An innovative research tool for nurses. J of Advanced Nursing, 50(5), 545-552.
- Rempel, G.R. et al. (2007). Technological advances in research with families. J of Family Nursing, 13(4), 413-436.
1. Structure
An ecomap consists of three layers:
- Center — the individual or family unit (embedded genogram or simplified circle/square)
- External Systems — interpersonal relationships, organizations, institutions, community resources
- Connections — lines representing relationship quality, strength, and direction of energy flow
Clinical use: assessing an individual's or family's social support network, identifying resources and stressors, and planning intervention strategies.
2. Center Element
2.1 Simple Center (Individual)
| Element | Shape | SVG |
|---|---|---|
| Central person | Large circle (r=50) or square (50×50) | <circle> / <rect> with class="schematex-center" |
| Name label | Text inside shape | <text> centered |
| Optional details | Age, sex symbol | Smaller text below name |
2.2 Family Center (Embedded Genogram)
In clinical practice, the center of an ecomap is typically a mini genogram containing core family members:
┌─────────────────────────┐
│ ○ ─── □ │ ← embedded mini genogram
│ │ │
│ ○ □ ○ │
│ (family unit) │
└─────────────────────────┘Implementation approach:
- The center area is enclosed by a large dashed circle or rectangle
- A simplified genogram is rendered inside (symbols + couple/child lines only, no labels/conditions)
- Class:
schematex-center-family - Connection lines originate from the center boundary (not from individual members inside)
2.3 DSL for Center
# Simple center
center: maria [female, age: 34]
# Family center
center: family [label: "The Johnsons"]
john [male, 1960]
mary [female, 1962]
john -- mary
kid1 [male, 1990]
kid2 [female, 1993]3. External System Types
3.1 Standard System Categories
Standard external system categories in clinical social work practice, each with recommended icon/color:
| Category | Icon/Label | Default Color | Examples |
|---|---|---|---|
| Family (extended) | House icon | #8D6E63 (brown) | Grandparents, in-laws, cousins |
| Friends/Peers | People icon | #42A5F5 (blue) | Friends, neighbors, coworkers |
| Work/Employment | Briefcase | #66BB6A (green) | Employer, colleague relationships |
| Education | Book icon | #FFA726 (orange) | School, university, training |
| Health/Medical | Cross icon | #EF5350 (red) | Doctor, hospital, therapist |
| Mental Health | Brain icon | #AB47BC (purple) | Counselor, psychiatrist |
| Religion/Spiritual | Symbol | #FFEE58 (yellow) | Church, temple, spiritual community |
| Recreation/Leisure | Play icon | #26C6DA (cyan) | Sports, hobbies, clubs |
| Legal/Justice | Scale icon | #78909C (gray-blue) | Lawyer, court, probation officer |
| Government/Social Services | Building | #8D6E63 (brown) | Social welfare, housing assistance |
| Financial | Dollar icon | #66BB6A (green) | Bank, financial aid |
| Community | Globe icon | #29B6F6 (light blue) | Community organizations, support groups |
| Cultural/Ethnic | Flag icon | #FFA726 (orange) | Cultural organizations, ethnic community |
| Substance (positive) | Pill icon | #66BB6A (green) | Recovery programs, AA/NA |
| Substance (negative) | Pill icon | #EF5350 (red) | Bars, drug sources |
| Technology/Online | Screen icon | #42A5F5 (blue) | Social media, online community |
| Pet/Animal | Paw icon | #8D6E63 (brown) | Pets, service animals |
3.2 System Sizing
The size of a system circle can reflect its importance in an individual's life:
| Importance | Circle Radius | Meaning |
|---|---|---|
| Major | 35-40px | Systems of greatest importance in life |
| Moderate | 25-30px (default) | Moderate importance |
| Minor | 15-20px | Present but less influential |
DSL: work [label: "Tech Corp", size: large] or work [label: "Tech Corp", importance: major]
4. Connection Line Types (Expanded)
4.1 Relationship Quality Lines
| Type | Line Style | DSL Syntax | SVG | Meaning |
|---|---|---|---|---|
| Strong/positive | 3 parallel solid lines | === | 3 parallel <line>, stroke-width: 2, gap: 3px | Very close, strong relationship |
| Moderate positive | 2 parallel solid lines | == | 2 parallel <line>, stroke-width: 2 | Positive, moderate relationship |
| Normal | Single solid line | --- | <line> stroke-width: 2 | Neutral/average relationship |
| Weak/tenuous | Single dashed thin line | - - | stroke-dasharray="4,4", stroke-width: 1 | Weak relationship |
| Stressful | Zigzag/wavy line | ~~~ | <path> sine wave | Stressful relationship |
| Stressful + strong | Zigzag + thick | ~=~ | thick wavy path | Close but stressful |
| Conflictual | Crossed lines (hash marks) | ~x~ | zigzag + hash marks | Conflictual relationship |
| Broken/cutoff | Line with gap | -/- | dashed with visible gap | Broken/severed relationship |
4.2 Energy Flow Arrows
| Direction | DSL Syntax | Meaning |
|---|---|---|
| One-way (center → system) | --> | Energy/resources flowing out from center |
| One-way (system → center) | <-- | Energy/resources flowing in from system |
| Mutual/reciprocal | <-> | Bidirectional energy flow |
| Draining (from center) | ==> | Large energy outflow (depleting) |
| Nourishing (to center) | <== | Large energy inflow (nurturing) |
4.3 Combined Line Types
Line type and arrow direction can be combined:
maria === mother # strong relationship, no direction specified
maria ===> work # strong + energy flows from maria to work
therapist <-- maria # energy flows from maria to therapist (maria gives)
maria ~~~ ex # stressful relationship
school <-> maria # normal reciprocal
maria - - doctor # weak relationship4.4 Connection Labels
Connection lines can have text labels describing the specific nature of the relationship:
maria === mother [label: "daily calls"]
maria ~~~ ex [label: "custody disputes"]
maria --- therapist [label: "weekly sessions"]4.5 SVG Implementation
Line rendering:
- Lines run from center edge to system edge (not center-to-center)
- Calculation: take the line between two circle centers, subtract each respective radius, to get the edge-to-edge segment
- Strong (3 lines): main line + two parallel lines offset by ±3px
- Wavy: SVG
<path>with quadratic bezier curves simulating a sine wave - Arrow markers:
<marker>in<defs>
<defs>
<marker id="arrow-end" viewBox="0 0 10 10" refX="9" refY="5"
markerWidth="8" markerHeight="8" orient="auto">
<path d="M 0 0 L 10 5 L 0 10 z" fill="#333"/>
</marker>
<marker id="arrow-start" viewBox="0 0 10 10" refX="1" refY="5"
markerWidth="8" markerHeight="8" orient="auto-start-reverse">
<path d="M 10 0 L 0 5 L 10 10 z" fill="#333"/>
</marker>
</defs>5. Layout Rules
5.1 Radial Layout Algorithm
- Center positioning: Center element is placed at the canvas center
(width/2, height/2) - Ring assignment: External systems are assigned to 1-3 concentric rings
- Inner ring (r=140px): closest/most important systems
- Middle ring (r=220px): moderately important
- Outer ring (r=300px): more distant/weaker systems
- Angle distribution: Systems on the same ring are evenly distributed
- Optional: arrange by category sector (see 5.2)
- Overlap avoidance: If too many systems are on the same ring, automatically increase ring radius or split into two rings
5.2 Category-Based Sector Layout (Optional)
Divides the ecomap into quadrants/sectors by category:
| Sector (angle range) | Category |
|---|---|
| Top (315°-45°) | Work / Education / Professional |
| Right (45°-135°) | Friends / Recreation / Community |
| Bottom (135°-225°) | Family (extended) / Cultural |
| Left (225°-315°) | Health / Legal / Government services |
This is a recommended layout, not a hard rule. DSL can specify [sector: top] to override.
5.3 Spacing Rules
| Parameter | Default | Meaning |
|---|---|---|
| Center radius | 50px (individual) / 80px (family) | Center element size |
| System radius | 30px (default) | External system circle size |
| Inner ring radius | 140px | Closest systems ring |
| Middle ring radius | 220px | Moderate systems ring |
| Outer ring radius | 300px | Distant systems ring |
| Min system-to-system gap | 40px | Avoid overlapping system circles |
| Label font size | 11px | System label text |
| Canvas padding | 40px | Edge padding |
5.4 Responsive Sizing
- Systems count ≤ 6: single ring,
r=180px - Systems count 7-12: dual ring
- Systems count 13+: three rings or auto-expand canvas
- When connections are dense, increase ring radius appropriately to avoid crowding
6. DSL Grammar (Ecomap — Expanded)
document = header center_def system_def* connection_def*
header = "ecomap" quoted_string? NEWLINE
center_def = "center:" (simple_center | family_center)
simple_center = ID properties? NEWLINE
family_center = ID properties? NEWLINE INDENT genogram_content DEDENT
genogram_content = (individual_def | couple_def)+
system_def = ID properties? NEWLINE
properties = "[" property ("," property)* "]"
property = "label:" quoted_string
| "category:" CATEGORY
| "size:" SIZE
| "importance:" IMPORTANCE
| "sector:" SECTOR
| kv_prop
CATEGORY = "family" | "friends" | "work" | "education" | "health"
| "mental-health" | "religion" | "recreation" | "legal"
| "government" | "financial" | "community" | "cultural"
| "substance" | "technology" | "pet" | "other"
SIZE = "small" | "medium" | "large"
IMPORTANCE = "major" | "moderate" | "minor"
SECTOR = "top" | "right" | "bottom" | "left"
connection_def = ID connection_op ID connection_label? NEWLINE
connection_op = "===" | "==" | "---" | "- -" | "~~~" | "~=~" | "~x~" | "-/-"
| "===>" | "<===" | "<=>" | "==>" | "<=="
| "-->" | "<--" | "<->"
connection_label = "[" "label:" quoted_string "]"
ID = /[a-zA-Z][a-zA-Z0-9_-]*/
quoted_string = '"' /[^"]*/ '"'
kv_prop = IDENTIFIER ":" VALUE7. Test Cases
Case 1: Basic Individual Ecomap
ecomap "Maria's Support Network"
center: maria [female, age: 34]
work [label: "Tech Company", category: work]
church [label: "St. Mary's", category: religion]
mother [label: "Mom", category: family]
bestfriend [label: "Lisa", category: friends]
maria === mother
maria --- church
maria === work
maria == bestfriendCase 2: With Energy Flow + Stress
ecomap "The Johnsons"
center: family [label: "The Johnsons"]
school [label: "Oak Elementary", category: education]
therapist [label: "Dr. Smith", category: mental-health]
ex [label: "Ex-spouse", category: family]
church [label: "Community Church", category: religion]
legal [label: "Family Court", category: legal]
family === school
therapist --> family
family ~~~ ex
family <-> church
family ~~~ legalCase 3: Family Center with Embedded Genogram
ecomap "Family Assessment"
center: family [label: "Rivera Family"]
juan [male, 1975]
maria [female, 1978]
juan -- maria
sofia [female, 2005]
diego [male, 2008]
school [label: "Lincoln High", category: education]
hospital [label: "County General", category: health]
grandma [label: "Abuela Rosa", category: family, importance: major]
gang [label: "Neighborhood Gang", category: community]
family === grandma
family == school
family --- hospital
family ~~~ gangCase 4: Complex Clinical Ecomap
ecomap "Substance Abuse Recovery"
center: client [male, age: 28, label: "James"]
aa [label: "AA Group", category: substance, importance: major]
sponsor [label: "Bill (Sponsor)", category: substance]
employer [label: "Warehouse Job", category: work]
mother [label: "Mom", category: family]
exwife [label: "Ex-wife", category: family]
kids [label: "Children (2)", category: family]
dealer [label: "Old Friends", category: substance]
probation [label: "P.O. Johnson", category: legal]
therapist [label: "CBT Therapist", category: mental-health]
client === aa
sponsor --> client
client --- employer [label: "new, probationary"]
client == mother [label: "supportive"]
client ~~~ exwife [label: "custody conflict"]
client - - kids [label: "supervised visits"]
client -/- dealer [label: "trying to cut off"]
probation --> client
therapist <-> client [label: "weekly"]Verify: dealer connection is a broken/cutoff line, kids is weak/tenuous, aa is strong, exwife is stressful, probation and therapist have directional arrows.
Case 5: Large System Count (Stress Test)
ecomap "Comprehensive Assessment"
center: patient [female, age: 45]
s1 [label: "Husband"]
s2 [label: "Son (12)"]
s3 [label: "Daughter (15)"]
s4 [label: "Mother-in-law"]
s5 [label: "Sister"]
s6 [label: "Best Friend"]
s7 [label: "Book Club"]
s8 [label: "Employer"]
s9 [label: "Coworkers"]
s10 [label: "GP Doctor"]
s11 [label: "Oncologist"]
s12 [label: "Church"]
s13 [label: "Yoga Class"]
s14 [label: "School (PTA)"]
s15 [label: "Neighbor"]
patient === s1
patient === s2
patient === s3
patient ~~~ s4
patient == s5
patient == s6
patient --- s7
patient --- s8
patient - - s9
patient == s10
patient === s11
patient --- s12
patient --- s13
patient - - s14
patient - - s15Verify: 15 systems → automatically distributed across 2-3 rings, no overlaps, all connection lines are readable.
8. Implementation Priority
| Priority | Feature | Complexity |
|---|---|---|
| P0 (Phase 2) | Basic radial layout + 6 line types + simple center | Medium |
| P1 | Category-based coloring + system sizing | Low |
| P1 | Energy flow arrows (directional lines) | Medium |
| P2 | Family center with embedded mini genogram | High |
| P2 | Connection labels | Low |
| P2 | Category sector layout | Medium |
| P3 | Responsive multi-ring layout for 13+ systems | Medium |
| P3 | Interactive hover/click (future, post-SVG) | High |
Genogram
Multi-generation family trees following the McGoldrick standard. Gender-specific shapes, medical condition fills, emotional relationship lines, index-person markers. Used in family therapy, social work, and clinical medicine.
Pedigree
Multi-generation genetic inheritance charts for clinical genetics. Affected/carrier/presymptomatic status fills, proband arrow markers, consanguinity. Standardized human pedigree nomenclature.