Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

like image 544
izle_r Avatar asked Oct 28 '25 21:10

izle_r


2 Answers

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

like image 136
natbusa Avatar answered Oct 31 '25 11:10

natbusa


As per the documentation, since version 9.4 the renderer can be changed to achieve the result you want:

Code:

---
config:
    flowchart:
        defaultRenderer: elk
---
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?); 

Reuslt: enter image description here

like image 28
learning2code Avatar answered Oct 31 '25 12:10

learning2code



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!