New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Rounded connections #580

Closed
eduo opened this Issue Sep 28, 2017 · 4 comments

Comments

Projects
None yet
4 participants
@eduo

eduo commented Sep 28, 2017

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

This comment has been minimized.

liyawang commented Nov 11, 2017

Second this. I actually see very sharp angles as attached.
screen shot 2017-11-10 at 8 44 40 pm

@tylerlong

This comment has been minimized.

Collaborator

tylerlong commented Mar 17, 2018

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

This comment has been minimized.

Collaborator

tylerlong commented Mar 17, 2018

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':

image

curve === 'basis':

image

All D3 curves are supported!

Please try different curves to find your favorite!

@Apachez-

This comment has been minimized.

Apachez- commented Apr 22, 2018

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"
}
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment