I made a Mermaid Flowchart in Notion, and I would like them to be aligned.
I want the previous tier to get wider as the bottom tier adds up.
More room between nodes would make my flowchart more legible.

And this is the code:

graph TD
    %%{ init: { 'theme': 'base' , 'flowchart': { 'curve': 'stepAfter' } } }%%

    classDef empty width:0px,height:0px;
    classDef left-align text-align:left

    Snack --- empty1[ ]:::empty
    empty1 --- Drink
    empty1 --- Candy
    empty1 --- Chips

    Drink --- empty2[ ]:::empty
    Candy --- empty4[ ]:::empty

    empty2 --- SoftDrink
    empty2 --- FruitJuice

    SoftDrink --- empty3[ ]:::empty
    empty3 --- CocaCola
    empty3 --- Sprite
    empty3 --- MountainDew

    empty4 --- Chocolate
    empty4 --- Jelly
    empty4 --- HardCandy

I am using an empty node just for legibility, no other reason.
I couldn’t find a link setting that looks like that.

Plus, is there any way to align the center link to the previous node?

I’ve read the mermaid docs and it did not help with my problem.

I don’t want to add extra nodes or whatever. I hope there is some code it works for alignment?
Is there any option or CSS properties (I have no idea what I need) that I can use?