How to make node go to bottom with Mermaid FlowChart

Question

I'm drawing a flowchart with Mermaid but it isn't working the way I want.

Here is my code:

flowchart TD
    a0[["xml_parsing"]]
    a1{{"result = []"}}
    a2{"any elements in  collection?"}
    a3{{"container = next element"}}
    a4{{"name = text of SHORT-NAME tag of container"}}
    a5{"is name end with '_PIM'?"}
    a6{{"size = text of NvMNvBlockLength tag of container"}}
    a7{{"append [container, name, size] to result"}}
    ed([return result])

    a0-->a1-->a2-->|YES|a3-->a4-->a5-->|NO|a2
    a5-->|YES|a6-->a7-->a2-->|NO|ed

and this is result:

I want to make the return result node go to the bottom.

score 3 · Accepted Answer · answered Mar 15 '22 at 12:01

You can tell Mermaid that a particular link should have a certain minimum length:

Each node in the flowchart is ultimately assigned to a rank in the rendered graph, i.e. to a vertical or horizontal level (depending on the flowchart orientation), based on the nodes to which it is linked. By default, links can span any number of ranks, but you can ask for any link to be longer than the others by adding extra dashes in the link definition.

Here, I've added four extra -s in the link from a2 to ed so the ed node is aligned with the a7 node. If you want it to be even lower, just add another -.

<script src="https://cdnjs.cloudflare.com/ajax/libs/mermaid/8.14.0/mermaid.min.js"></script>

<div class="mermaid">
flowchart TD
    a0[["xml_parsing"]]
    a1{{"result = []"}}
    a2{"any elements in  collection?"}
    a3{{"container = next element"}}
    a4{{"name = text of SHORT-NAME tag of container"}}
    a5{"is name end with '_PIM'?"}
    a6{{"size = text of NvMNvBlockLength tag of container"}}
    a7{{"append [container, name, size] to result"}}
    ed([return result])

    a0-->a1-->a2-->|YES|a3-->a4-->a5-->|NO|a2
    a5-->|YES|a6-->a7-->a2------>|NO|ed
    %%                    ^^^^^^
</div>

How to make node go to bottom with Mermaid FlowChart

1 Answers1