search

mermaid-js / mermaid

Generation of diagrams like flowcharts or sequence diagrams from text in a similar manner as markdown
https://mermaid.js.org
MIT License
71.69k stars 6.5k forks source link

The arch of the arrow should always go through the arrow label #2744

Open zhouhana opened 2 years ago

zhouhana commented 2 years ago

When there's a complex flowchart with many routes, the arch of the arrow doesn't properly go through the arrow label.

In the attached image, the label "Pappa" should be on the first arrow, "Mamma" on the second one, etc.

Screenshot 2022-02-17 at 12 53 38

The solution would be to change the shape of the arch, to something like this (although it would look prettier if the line goes straight up, then there's a smaller curve, and then straight left – couldn't do that using the tool at hand):

Screenshot 2022-02-17 at 12 53 38 copy

knsv commented 2 years ago

You can solve this by changing the curve rendering for the edges. You can try different curve settings. %%{init: {'flowchart' : {'curve' : 'curveLinear'}}}%%

More varieties: http://using-d3js.com/05_04_curves.html