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
68.7k stars 6.07k forks source link

Feature request: straight lines #2817

Open zejiran opened 2 years ago

zejiran commented 2 years ago

I can't find a fast way to configurate straight lines. As shown in the picture, mermaid curve by default the arrows in diagrams.

Screen Shot 2022-03-12 at 1 06 01 PM

Other diagram editors, such as PlantUML, allow to add a code line like this skinparam linetype ortho for changing the shape of the lines.

Before: VLHFRpir4BtxKomz8YKg7AiAjIHfnQ5GqQAAuyIUfWF-iupjg1NmWNhWW7hZcY-6OwtZhBE_tf9vRz_ClF7CbG_08HejlWelQB3hDP0LmlzEjWS6qnco2mtUFv4ABzstv-T2oFt_xf7GAkZ-55qtwwGpo9ASl-XMrypm9lukl7jsAihW1cRFc7Y9TgCTX1nIw2LJBsdtOHFm49Zi9YDaO8DjJAN_FzXGC_pY8p2vGodCwCRV

After: VLG_R_j63DtlKwWP2zX8EmP1aTHsWWvfWoP5q97MCJRR-wFoxem4RJzGXWv5jj_gB_QZ1PtEafMCudjw91-Fl0eHE2Phr3TnYnQhnW0vfSAVv1fWi9KXX_6rmSfptFeZm99R60ZXYNJSLj-VdojL7xwhHqAdeVfRLTMighr5hic7YsfrpGolwj_CksUlKnrznsmOXIUq6-CXjY6DeMPgQjg_Em4U8fFRj0XPsE0ufkNx9nTB

KSR-Yasuda commented 2 years ago

Relate with #2549.

NielsCodes commented 6 months ago

Yes please! Curved lines are okay for small diagrams, but once they become bigger, they all start looking like your example. Straight lines are a lot more readable.

cristiandeschamps commented 4 months ago

This is badly needed, my class diagram is unreadable without the curve line.. I don't want to switch to something else but I will have almost no choice :(

sh-cau commented 3 months ago

Have you tried %%{ init: { 'flowchart': { 'curve': 'stepBefore' } } }%% or is this only applicable to flowcharts?

zejiran commented 3 months ago

Have you tried %%{ init: { 'flowchart': { 'curve': 'stepBefore' } } }%% or is this only applicable to flowcharts?

Hello @sh-cau,

It looks like the %%{ init: { 'flowchart': { 'curve': 'stepBefore' } } }%% configuration is indeed specific to flowcharts in Mermaid. This means it won't work for other diagram types like class diagrams.

phil-flip commented 1 month ago

Maybe the new Elk renderer that can be used in flowcharts could help here.