Rounded connections

[eduo]

Hello.

Have you considered adding the possibility of making the connectors in flowcharts rounded when not exactly vertical or horizontal?

Currently a straight line is drawn, unless it overlaps with another one in which case both are angled. This is a good solution but visually it looks a bit weird. Especially for roundtrips.

Smoothing out those angles into curves (and nothing else) would immediately improve visibility.

I'm not saying improve collision detection or smart paths for complex diagrams. Although this would be nice it's also orders of magnitude more complex.

[liyawang]

Second this. I actually see very sharp angles as attached.

[tylerlong]

I believe there is a feature in D3 called interpolate (in D3 4.x it has been replaced by curve). I've seen some code about it in mermaid but not sure it works.

[tylerlong]

I've added an new option to mermaid:

mermaid.initialize({
  flowchart: { 
    curve: 'basis' 
  }
});

flowchart.curve by default is linear and you think it is not rounded enough. Change it to basis will be much better.

curve === 'linear':

curve === 'basis':

All D3 curves are supported!

Please try different curves to find your favorite!

[Apachez-]

It doesnt seem to work to set this option when testing through https://mermaidjs.github.io/mermaid-live-editor

Edit: Seems to be a syntax thingy for the live-editor, use this if you want curved lines in live-editor:

{
"theme": "default",
"flowchart": {
"curve": "basis"
}
}

[kitsu]

To enable this for a flow chart without access to the Mermaid object (i.e. in a markdown document) use linkStyle default interpolate basis.

graph TD
  %% Set edges to be curved (try monotoneX for a nice alternative)
  linkStyle default interpolate basis
  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

Your Jison grammar is a little hard to read, but it is a good reference!

[legoming]

Can I use the same method to change the curve line of sequenceDiagram -- the loop line point to self?