flowchartmermaid

How to make the flow lines in mermaid flowchart to exact 90 degrees?


I'm using Mermaid to create a simple flow diagram as shown below. I'd like to make the connecting lines to exact 90 degree but couldn't able to find documentation anywhere .

Is it possible to make it exact 90 degrees ?

flowchart TD 
    B["fa:fa-twitter for peace"] 
    B-->C[fa:fa-ban forbidden] 
    B-->D(fa:fa-spinner); 
    B-->E(A fa:fa-camera-retro perhaps?); 

Actual Flow :

Actual

Expected Flow :

expected


Solution

  • Prepend with the following init pragma. More options are available here: https://mermaid-js.github.io/mermaid/#/flowchart?id=styling-line-curves

    %%{ init: { 'flowchart': { 'curve': 'stepAfter' } } }%%

    See example below. Feel free to tweak it to your liking.

    %%{ init: { 'flowchart': { 'curve': 'stepAfter' } } }%%
    flowchart TD
        A["A"] --- T1( )
        T1---B[B] 
        T1---C[C]
        T1---D[D]
    

    mermaid flowchart with 90deg elbows