How to create arrows bending in right angle instead of curved arrows

[vikrantkamble1]

While creating a graph(flowchart) if there are many nodes say 4 or 5 and the nodes are linked with each other then nodes are connected with curved arrows, is it possible to connect nodes with straight line arrows or arrows bending at right angle like "L" shape or "T" shape.

For example graph LR A[Christmas] -->|Get money| B(Go shopping) B --> C(Let me think) C -->|One| D[Laptop] C -->|Two| E[iPhone] C -->|Three| F[Car]

output -

Expected output

Note - Expected output is only for reference, user must only pay attention to arrows flowing from "Let me think --One-->Laptop" and "Let me think--Three-->Car". I am looking for a way to create arrows which bends in right angle

[vikrantkamble1]

Can anyone please help me with this

[SumitLubal]

Facing similar problem, has anyone solved this?

[sahil48]

Does anyone have an update on this issue?

[xpil]

I have the same problem, need a graph with straight lines (client's requirement) - I know I can fall back to GraphViz but I really don't want to.

[elzabeth]

Facing the same issue, does anybody has an update?

[KSR-Yasuda]

How's setting flowchart graph option flowchart.curve ?

%%{ init : { "theme" : "default", "flowchart" : { "curve" : "linear" }}}%%
%%                                ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

flowchart LR

%%==============================================================================

A[Christmas] --> | Get money | B(Go shopping)
B            -->               C(Let me think)
C            --> | One       | D[Laptop]
C            --> | Two       | E[iPhone]
C            --> | Three     | F[Car]
C            -->               G

%%{ init : { "theme" : "default", "flowchart" : { "curve" : "linear" }}}%%
%%                                ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

flowchart LR

%%==============================================================================

A[Christmas] --> | Get money | B(Go shopping)
B            -->               C(Let me think)
C            --> | One       | D[Laptop]
C            --> | Two       | E[iPhone]
C            --> | Three     | F[Car]
C            -->               G

---

Make sure to begin with %%{ init: correctly. Other notations such as below fail.

%% { init : { "theme" : "default", "flowchart" : { "curve" : "linear" }}}%%
%%^
%% Bad: Extra spaces

%%{ "init" : { "theme" : "default", "flowchart" : { "curve" : "linear" }}}%%
%%  ^    ^
%% Bad: Quotation for `init`

%% Note: Setting `{ "theme" : "forest" }` may help to find such syntax errors.

---

The explanations for flowchart.curve say linear is default, but, currently it looks basis (i.e. curvy lines) is selected if no curve style is specified.

Though, other curve settings all look working as linear, even though illegal values (e.g. { "curve" : "foobar" }).

[elzabeth]

@KSR-Yasuda . Thanks for the above reference but is it possible to get exact 90 degrees as mentioned by @vikrantkamble1 in his question. That is the solution I am expecting.

[KSR-Yasuda]

It looks using d3 module to draw graph. So I tried wheter other d3 curves may work,
and found other d3 curve names are available without any Mermaid.js lib modification.

Curves step, stepBefore and stepAfter are close, but no cigar.
It would need more work :(

%%{ init : { "theme" : "forest", "flowchart" : { "curve" : "step" }}}%%

flowchart LR

%%==============================================================================

A[Christmas] --> | Get money| B(Go shopping)
B            -->              C(Let me think)
C            --> | One      | D[Laptop]
C            --> | Two      | E[iPhone]
C            --> | Three    | F[Car]
C            -->              G([curve = step])

%%{ init : { "theme" : "forest", "flowchart" : { "curve" : "stepBefore" }}}%%

flowchart LR

%%==============================================================================

A[Christmas] --> | Get money| B(Go shopping)
B            -->              C(Let me think)
C            --> | One      | D[Laptop]
C            --> | Two      | E[iPhone]
C            --> | Three    | F[Car]
C            -->              G([curve = stepBefore])

%%{ init : { "theme" : "forest", "flowchart" : { "curve" : "stepAfter" }}}%%

flowchart LR

%%==============================================================================

A[Christmas] --> | Get money| B(Go shopping)
B            -->              C(Let me think)
C            --> | One      | D[Laptop]
C            --> | Two      | E[iPhone]
C            --> | Three    | F[Car]
C            -->              G([curve = stepAfter])

[KSR-Yasuda]

Using dummy node.

Probably this would be the closest w/o Mermaid.js lib modification.

%%{ init : { "theme" : "forest", "flowchart" : { "curve" : "stepBefore" }}}%%

flowchart LR

%%==============================================================================

dummy(( ))

A[Christmas] --> | Get money| B(Go shopping)
B            -->              C(Let me think)
C            ---              dummy
dummy        --> | One      | D[Laptop]
dummy        --> | Two      | E[iPhone]
dummy        --> | Three    | F[Car]
dummy        -->              G([curve = stepBefore])

%%{ init : { "theme" : "forest", "flowchart" : { "curve" : "stepBefore" }}}%%

flowchart LR

%%==============================================================================

dummy(( ))

A[Christmas] --> | Get money| B(Go shopping)
B            -->              C(Let me think)
C            ---              dummy
dummy        --> | One      | D[Laptop]
dummy        --> | Two      | E[iPhone]
dummy        --> | Three    | F[Car]
dummy        -->              G([curve = stepBefore])

[elzabeth]

@KSR-Yasuda the solution you have proposed is quite helpful but I am facing another issue while implementing it. As shown in the picture below the arrows are getting hidden behind the nodes and not fully visible. Any ideas suggestion from your side will be really helpful.

[KSR-Yasuda]

@elzabeth Probably it is because arrow begin / end position is not adjusted for "step" allow styles.

I think you need to change the code to determine arrow begin / end coordinate. (I have no idea how to do specifically).

Unfortunately, it would not be a piece of cake...

[woutervanranst]

Could you also add an option of just a straight line? To avoid confusion, a mockup:

[gbanaggia]

This feature would be really helpful!

[anoop0567]

👋 is anyone found any workaround for this?

[ppalka-lingaro]

that solution seems to be working only for flowchart , i need similar for ERD erDiagram any ideas if such is possible ?