Genogram and ecomap maker with standard symbols, nothing uploaded

When you need a genogram or an ecomap

• Writing up a first home visit and needing the family structure in the assessment report.
• A case conference where someone unfamiliar with the family has thirty seconds to grasp it.
• Stepfamilies, kinship care and repeat marriages, where three paragraphs of prose still leave it unclear.
• A three-month review, comparing the current household against the version you drew last time.
• Teaching or supervising, where you want a chart you can edit while you explain the notation.
• Showing what support a household actually has and where its pressure comes from, which family structure alone never reveals.

Four steps to a finished genogram

1. Press Add the first person for the first entry. A details card opens beside the symbol with the name already selected, so just type it.
2. Select a symbol and buttons appear around it: parents above, children below, partner to the right, siblings to the left, a pet at the bottom right.
3. To change a name, gender, dates, or to mark the index client, double-click the symbol for its card or press the pencil at the top right.
4. Relationships all live in the four tabs of the left panel: status and year, who belongs to which couple, adoption and twins, emotional bonds and households.
5. When the chart is done, press Save and export in the left panel: saves, PNG, JPG, SVG and JSON all live in that dialog.

To see it working first, press Sample. It loads a three-generation family with a remarriage, an adoption, twins, a dog and a few emotional bonds.

Details on the chart, relationships in the panel

The two are deliberately separated, because you are looking at different things. Changing someone's name or birth year happens with your eyes on that symbol; changing a relationship needs the whole list.

• People are added and edited on the chart itself. The button at the top left adds someone unconnected, the ring around a symbol adds relatives, and name, person or pet, gender, years, deceased, index client and note all live on the card beside the symbol.
• The left panel only holds relationships, in four flat tabs: marriages and partnerships, parents and children, emotional bonds, households. One row is one relationship, with its fields on that row.
• No drilling: to mark a child as adopted you change it on the parents-and-children tab, rather than selecting a person, opening their relationship and finding the child inside it.
• Clicking a line on the chart switches to the matching tab and highlights that row, so both sides always refer to the same thing.
• Double-click a symbol to open that person's card; the delete button is on the card too.
• To remove several people at once, ctrl or ⌘ click each of them and use the bar that appears at the bottom of the canvas.
• By keyboard, Tab steps through the symbols on the chart, Enter selects one, and Enter again opens its card.

What the symbols mean

This is the notation taught in social work and family therapy training, not a house style invented here.

• A square is a man, a circle is a woman, an octagon means gender unknown or not recorded.
• A diamond is a pet. It hangs where a child hangs, because in plenty of families that is exactly what it is.
• A triangle is a child on the way, not yet born.
• The index client gets a square outline around the symbol, the same shape whoever they are. There is only ever one.
• A cross inside the symbol marks a death, appears once you fill in a year of death, and always stays inside the edge of the symbol.
• The number inside the symbol is age, worked out from the birth year and stopping at the year of death.
• Only the name and the note sit under the symbol. Years feed the age and are not printed, which keeps a large family readable.

The octagon is the one place this departs from the textbook, which uses a diamond for unknown gender. The diamond went to pets here, and two meanings cannot share one shape on the same chart.

Telling the relationship lines apart

• Marriage is a solid line and can carry the year it began.
• Cohabitation is dashed. In practice it is not the same thing as marriage, so do not use one for the other.
• Separation is one slash across the line and divorce is two. This pair is the most commonly drawn wrong.
• Children drop from the middle of the relationship line, ordered left to right by birth.
• With only one child, that drop is a single straight line rather than three segments: the layout moves the child directly below the couple first.
• When two relationships have overlapping sets of children, their sibling lines are placed at different heights so they never read as one line.
• The line to a biological child is solid; adopted and fostered children get a dashed line.
• With only one parent recorded, the line drops straight from that person's symbol.
• Twins and higher multiples do not each drop their own line. They branch from one point on the sibling line, one straight line per child, and the sibling line stops at that point instead of running on above them. Identical twins get a bar across those lines.

To mark a multiple birth, click the parents' relationship line and put those children in the same birth in the left panel, then choose identical or fraternal. Triplets and up work the same way, with as many children in one birth as you need.

What emotional bonds add

Blood and marriage lines say who these people are to each other. An emotional bond says how they are doing. A father and son are structurally a father and son forever, but whether that line is three lines or a jagged one points to a completely different plan, and that layer is what an assessment is reading.

• Two lines is close.
• Three lines is very close.
• A dashed line is distant.
• A jagged line is conflict.
• A solid line with three short bars across the middle is a deteriorating tie.
• A solid line cut twice in the middle is cutoff.
• Two lines under a jagged one is close and conflicted.

Pick two people under Emotional bonds in the left panel and choose a kind; a pair only ever carries one bond. Bonds sit above the blood lines and below the symbols, and clicking one on the chart reopens it.

What the automatic layout follows

Positions come entirely from the relationships between members, with nothing random in it: the same data opens the same way every time. Once placed, the lines are checked against each other and positions are adjusted, rather than bending a line around the obstacle.

• Partners sit on the same row and next to each other, children one row below, siblings left to right by birth.
• The left-to-right order of a row is settled by the rows above and below together — parents first, then children, back and forth, and finally adjacent groups are swapped wherever that removes a crossing.
• With a single child, the child is moved directly below the couple; if the child cannot move, the couple does; if neither can, whoever is in the way is pushed aside. That line is always straight.
• Spacing is derived from how wide the names actually are, not a fixed number, so long names never collide.
• When two relationships have overlapping sets of children, their sibling lines are placed at different heights.

Measured over thirty three-generation and thirty four-generation families, all laid out from relationships alone: bent single-child lines 0%, overlapping lines 0%, structural lines crossing each other 0% to 0.5%. What crossings remain come from the emotional bonds, one or two per chart, for the reason in the next section.

Why emotional bonds are curved

Structural lines follow the grid: marriage runs horizontally, descent runs vertically, each in its own reserved band. An emotional bond joins any two people, and routing those on the same grid puts them on the same horizontal line as a marriage, or ends one line exactly on top of another — at which point a reader cannot tell which segment belongs to which line. That is what tangling actually is. So bonds are drawn as curves, under three rules.

• They leave from a corner of the symbol. Structural lines attach to the four edges, so the two kinds never sprout from the same point.
• Between two people on the same row, the curve runs entirely above that row and clears every symbol in between.
• Across generations it travels the empty corridor between rows, slipping through the gap between people whenever it has to cross a row.

A bond therefore never runs over anyone's symbol and is never collinear with a structural line. Crossing one at an angle is fine: one line is curved and the other is straight, so the crossing reads as two lines passing, not as a junction.

A bond joins any two people, and that layer cannot be made crossing-free — it is a property of the drawing, not a shortcoming of the tool. Between a couple and their child stand the marriage line, the descent line, the sibling line and the other children's lines; reaching the middle child means passing through that group somewhere, or going around its outer end and back. The tool costs all three routes and takes the one that crosses fewest lines, so what remains is the geometric floor.

On a large family the two layers still compete. The button at the top right of the canvas hides the emotional layer so you can read the structure alone, and an export made while it is hidden leaves that layer out — an assessment often wants both pictures, one structural and one emotional.

Why the household boundary matters

A genogram that does not show who lives with whom is missing half the assessment. Which parent a child lives with after a separation, whether grandparents share the home, whether another adult is under the same roof — each points to a different plan, and none of it is visible from the blood relationships alone.

• You draw the boundary yourself. Press the lasso button at the top right of the canvas and place one corner at a time around whoever lives together, clicking the first corner again to close it, in whatever shape fits.
• A misplaced corner can be undone, and the button on the bar closes the outline without hunting for the first corner. Whoever ends up inside becomes a member, and the checklist in the left panel adjusts it afterwards.
• What you get is a solid loop that can carry a label such as Current household.
• Anyone can sit outside every loop, an adult child who has moved out for example.
• Draw more than one when you need to compare, such as the household now against the household then.
• If the shape comes out wrong, press draw again on that household and redraw it.

The boundary is deliberately not computed. In a three-generation family where the grandparents live with one branch and the other branch is next door, an automatic rectangle will always enclose someone extra — and one extra person inside the boundary is a wrong conclusion in the assessment.

What an ecomap answers that a genogram does not

A genogram answers who is in the family and how they are related. An ecomap answers how that household deals with the world outside it. They are different questions, and an assessment report usually needs both.

• Switching to the ecomap reuses the people already on the genogram, so a family is never entered twice.
• The centre holds everyone by default, and once a household exists you can put just that household in the centre.
• Each oval around the centre is a system: school, work, health care, faith, kin, neighbours, services and leisure.
• Saving, import, export and image export are all one set, so a single JSON file carries both diagrams.

Three steps to a finished ecomap

1. Build the family on the genogram first, then switch to the ecomap and the centre is already populated.
2. Add ovals from the common systems row, or press Add system and name your own.
3. Select a system, then set row by row who it connects to, how close the tie is, and which way support flows.

To see it working first, press Sample. The household it loads has both diagrams, and the ecomap uses all three kinds of tie.

What the lines on an ecomap mean

The shape of the line carries the meaning, the same way the genogram symbols do.

• A thick solid line is a close tie, where the system genuinely supports the household.
• A thin dashed line is a tenuous tie, connected but barely.
• A hatched line marks stress or conflict, and those are often the most important lines on the map.
• An arrow towards the family means support flowing in, and an arrow towards the system means the household giving out.
• No arrow is the default and means the direction has not been judged yet, not that nothing flows.

A link can attach to one member or to the whole household. Services whose client is the household rather than one person read more clearly attached to the household than repeated for everyone in it.

Use coded export for the copy that leaves your desk

A genogram usually ends up in an assessment report, and reports go to supervisors, multi-agency meetings and sometimes to court. The assessment needs the structure, not the names.

• Press the mask button at the top right of the canvas and names become codes such as M1 and F2.
• Notes are hidden too, leaving only the age inside the symbol. Years are never printed on the chart anyway; they only feed the age.
• The structure survives intact, so generations, relationship status and households all still read.
• The chart on screen updates at once, so what you check before sending is what the recipient sees.

Kinship terms such as grandfather or cousin are deliberately not generated. Deriving them from the structure is easy to get wrong, and a genogram with the wrong kinship labels is worse than one with none.

Choosing between PNG, JPG and SVG

• PNG suits reports and slides, and supports a transparent background.
• JPG has no transparency, so a transparent export lands on a white background instead.
• SVG is a vector file that stays sharp at any size, so use it for print or for a designer.
• Export width applies to PNG and JPG only. 1600 to 2048 pixels is usually plenty inside a report.
• The export is always the whole chart, even when you have zoomed into one branch on screen.

A save and a JSON file are not the same thing

Both live in the Save and export dialog. The difference is one thing only: a save stays on this computer, a JSON file is yours to carry.

• Saves are written to this browser on this computer, so another machine or browser sees nothing. Use them to put a half-finished chart down.
• On a shared agency computer, use "delete every save" when you have finished.
• To keep a chart long-term, continue it on another computer, or hand it to a colleague, export the JSON file and store it on your own encrypted drive.
• The same dialog imports that file back, ready to edit at the next review.

What this version does not do yet

Worth stating plainly, so nothing looks broken.

• The shaded markings for substance use and mental illness are not implemented.
• Miscarriage and stillbirth symbols are not implemented. A child on the way can be drawn, as a triangle.
• Exported images carry no key. The ecomap line key sits in the left panel only, so add a line of explanation in the report itself.

This version covers family structure and the systems around it, the backbone of both diagrams. The rest follows in later versions.

Does case data leave the browser

No. Every entry, the layout and the drawing all happen in your browser, no request carries the content anywhere, and both the image and the JSON file are assembled on your own machine. Real family details are safe to enter. To confirm it, open the network tab in developer tools, run through the tool, and look for a request carrying your content. See the privacy policy for the details.

Follow your agency's data policy regardless. The tool can keep the chart off the network; it cannot decide for you who should see it or which computer it belongs on.

Frequently asked questions

Where do the names and dates I type end up?

Not on any server. The chart is drawn inside your browser tab and the exported file is assembled on your own machine. Pressing save writes the chart into this browser on this computer, where another device cannot see it and where "delete every save" clears it in one action. Even so, follow your agency policy and prefer a code over a real name.

Which set of symbols does this use?

The McGoldrick and Gerson notation taught in social work and family therapy training. Squares are men, circles are women, diamonds are pets, a triangle is a child on the way, a square outline marks the index client, a cross inside the symbol marks a death, divorce is two slashes and separation is one, and the line to an adopted or fostered child is dashed. Unknown gender is an octagon, which is the one departure: the diamond went to pets, and two meanings cannot share one shape on the same chart.

Can it draw conflict, distance and cutoff lines?

Yes. Pick two people under Emotional bonds in the left panel and a line joins them, in seven kinds: two lines for close, three for very close, dashed for distant, jagged for conflict, three short bars for a deteriorating tie, a cut line for cutoff and two lines under a jagged one for close and conflicted. They are drawn as curves leaving the corner of each symbol, running above the row when both people share one and through the gaps between generations otherwise, so they never cross a symbol or lie on top of a marriage or descent line. When there are a lot of them, the canvas can hide the whole layer so you read the structure alone. The shaded markings for substance use and mental illness and the pregnancy loss symbols are still to come, so the note field carries those for now.

Can I produce a copy without names on it?

Yes. Tick "export with codes" and names become codes such as M1 and F2, notes are hidden, only the age inside the symbol remains, and the structure is untouched. Years are never printed under a symbol anyway; they only feed the age. The chart on screen changes at the same time, so what you review before sending is exactly what the recipient sees.

The automatic layout is not quite right. Can I adjust it?

Drag any symbol and the relationship lines follow. The automatic layout only supplies a starting position with generations and birth order sorted out. If you drag things into a mess, "re-layout" in the top right of the canvas discards your manual positions and returns to the automatic result.