Recommended Reading

Step 1: Chart Orientation

If you are using Notion to create this chart, enter the block menu anywhere in a page (“ trigger: /”) and select “Code". Change the code language to Mermaid to get started.

There are four ways to show Mermaid flowcharts. I recommend LR for family tree graphs. Here are the orientations:

1. LR: Left to right

2. RL: Right to left

3. TB: Top to bottom

4. BT: Bottom to top

Root Person in this instance is part of the second generation in the tree. Root and their spouse have children in the first generation that do not show in the graph.

Step 2: Adding Parents

Next, add parents to the root member. Each node labelled G# is a generation. Root member’s parents are connected to G2(Gen 2) … and G2(Gen 2) is connected to Or(Root Person) like this:

Fa(Father) ---> G2(Gen 2)
Mo(Mother) ---- G2
G2 --> Or(Root Person)

Step 3: Adding Siblings

Connect the generation nodes to siblings as well. The orientation of code should have eldest sibling at the top and youngest below like this:

G2 --> S1(First Sibling)
G2 --> Or(Root Person)
G2 --> S3(Third Sibling)
G2 --> S4(Fourth Sibling)

Step 4: Adding Grandparents

Next, give root member’s mother and father a set of parents (grandparents). After which, aunts and uncles can be added in the same way as the siblings in Step 3.

Now, Father is connected both from G3(Gen) and to G2(Gen). You can write this connection via code like this:

G3(Gen 3) --> Fa(Father) --> G2(Gen 2)

Step 5: Adding Color

To color nodes, add a section in the code designated to colors. Add a new classDef prefix to each color configuration like this:

%% Colors %%
classDef blue fill:#66deff,stroke:#000,color:#000
classDef green fill:#6ad98b,stroke:#000,color:#000

You can add a color to any node in the graph by adding the defined color to the end of a node like this:

Fa(Father):::green --- G2(Gen 2):::blue