Skip to content
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

Flowchart Line/Path Kinks #522

Closed
JohnLBevan opened this issue Apr 20, 2017 · 5 comments
Closed

Flowchart Line/Path Kinks #522

JohnLBevan opened this issue Apr 20, 2017 · 5 comments
Labels
Type: New Shape Request for new shape

Comments

@JohnLBevan
Copy link

JohnLBevan commented Apr 20, 2017

Request
As you can see from the attached screenshot, one of the paths goes off to the right for no reason, then swings back on itself to the left to connect to the node beneath it.
Is there any way to improve the intelligence of the path layout, or if that's too complex, to simply force all paths to be straight-lines?

cmdb

Thanks & Background Info
Thanks for producing such an amazing & simple to use solution; really like it & very impressed.
I've used it to automate my documentation, by having discovery scripts build a detailed, low level CMDB, then using the dependency data from that to generate graphs in Mermaid.

I added the following CSS to allow me to hover over a path & have it display more clearly; i.e. so I can see at a glance which nodes are connected. Hopefully that makes the issue reported above stand out more:

path:hover {
	stroke-width:4px;
}
/* more complex option to color edger red too:
.edgePath:hover * {
	stroke:red;
	stroke-width:4px;
	fill: red;
}
*/

@tylerlong
Copy link
Collaborator

Could you please reproduce the issue in https://mermaidjs.github.io/mermaid-live-editor/ and post back a link here?

The layout is powered by https://github.com/dagrejs/dagre-d3 and it could be an upstream issue too.

@JohnLBevan
Copy link
Author

No worries, I've anonymised the original data; thankfully the issue still shows: Example

There are a few examples of the issue; one is the link between Shared Business Logic Server:Service 2 and Shared Business Logic Server:Service 1 (i.e. leftmost items in the second and third "rows" of the graph).

Thank-you for picking this up / looking into it.

@tylerlong
Copy link
Collaborator

tylerlong commented Mar 18, 2018

@JohnLBevan Last night I did a change which might mitigate the issue: #580 (comment)

The Online Mermaid Editor doesn't support changing of mermaid config (at the moment) so I am unable to post a link. Here is a screenshot:

image

@JohnLBevan
Copy link
Author

Nice one @tylerlong ; agree that this does look better.
The kink does still exist (i.e. the example line between "Shared Business Logic Server:Service 2" and "...1" still goes right first then left / crosses over the link from "...2" to "Shared Business Logic Server" unnecessarily; but it's definitely an improvement. Thank-you.

@stale
Copy link

stale bot commented Jun 29, 2019

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

@stale stale bot added the Type: New Shape Request for new shape label Jun 29, 2019
mgenereu pushed a commit to mgenereu/mermaid that referenced this issue Jun 25, 2022
…yarn/develop/eslint-plugin-mocha-10.0.1

chore(deps-dev): bump eslint-plugin-mocha from 9.0.0 to 10.0.1
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Type: New Shape Request for new shape
Projects
None yet
Development

No branches or pull requests

2 participants