In flowcharts, how to get the graph lines to come out of vertices of the decision box

[rishavs]

Using the example in mermaid.live for flowcharts, I can create a nice flowchart - but the decision box ("is true?") has the graph arrows to the next steps coming out of its body.
Here is what I get today

Instead, I would want the lines to come out of the vertices of the decision box - something like this;

Is there a way to define my charts to push the graphing lines from the vertices today? If not, can I make this Feature Request?
The flowcharts just feel far more organized and pleasing that way.

[flywire]

Maybe by setting curve, see https://stackoverflow.com/questions/72538993/mermaid-flowchart-line-style.

Include your code so others can test.

[rishavs]

Hi @flywire . The code I used is the sample chart code in mermaid live editor for flowcharts.

graph TD
    A[Christmas] -->|Get money| B(Go shopping)
    B --> C{Let me think}
    C -->|One| D[Laptop]
    C -->|Two| E[iPhone]
    C -->|Three| F[fa:fa-car Car]

while renders to

graph TD
    A[Christmas] -->|Get money| B(Go shopping)
    B --> C{Let me think}
    C -->|One| D[Laptop]
    C -->|Two| E[iPhone]
    C -->|Three| F[fa:fa-car Car]

Loading

I tried the curve options including stepBefore, but none of them cause the arrows to come out of the vertices.

[flywire]

No, but %%{init: {'flowchart' : {'curve' : 'stepAfter'}}}%% is pretty close:

Click image to open in mermaid.live

Using %%{init: {'flowchart' : {'curve' : 'stepBefore'}}}%%:

Click image to open in mermaid.live

The bug seems to be the lines don't originate from the centre of the node.

In a normal flowchart there should be a single path from the node before they diverge. A decision node is different.

[rishavs]

The bug seems to be the lines don't originate from the centre of the node.

That might be it. I think just having that as a config might be good too.

[flywire]

Linear Curve is better:

[sidharthv96]

flowchart-elk will do the job.

flowchart-elk TD
    A[Christmas] -->|Get money| B(Go shopping)
    B --> C{Let me think}
    C -->|One| D[Laptop]
    C -->|Two| E[iPhone]
    C -->|Three| F[fa:fa-car Car]

Loading

[flywire]

flowchart-elk will do the job.

No, does not work for an even number of nodes and badly screws the order.

Original:

link

-elk:

link

[sidharthv96]

With even number of nodes. I think tweaking the elk rendering logic should fix this.