Support organic / force-directed / spring graph layout(s) or renderer(s)

bmitc commented 11 months ago

Proposal

Graphs currently can only be laid out in a hierarchical manner that primarily relies, in an often tough to reason about manner, on the order that the relationships were entered in the Mermaid Markdown. It would be great if graphs could be automatically laid out according to a "blow-out" algorithm that can be referred to as organic, force-directed, spring, etc. since there are different algorithms to accomplish this.

It is unclear whether this belongs as a new diagram or new syntax proposal as it's really neither, but these are the only two relevant choices.

This has also been proposed before but was automatically closed, at least twice, in https://github.com/mermaid-js/mermaid/issues/806 and https://github.com/mermaid-js/mermaid/issues/867.

Use Cases

Automated scenarios. For example, tooling that displays package or module dependencies in a codebase.
Displaying large graphs where it's untenable to keep track of the order in which relationships are entered
Viewing graphs that have no explicit hierarchical structure
Being more competitive with Graphviz and its layout engines: https://graphviz.org/docs/layouts/

For these reasons, I'm currently going to have to use Graphviz instead of Mermaid. This is unfortunate since GitHub and several static website tools, like Jekyll, support rendering Mermaid diagrams.

Screenshots

To my knowledge, something like this is not currently possible with Mermaid:

Syntax

Maybe something like:

graph FD
...
end

for force-directed? Any other keyword would be fine. I don't think this is much of a syntactical problem as it is an engine problem.

Implementation

None

e-pet commented 10 months ago

This would be amazing to have in mermaid.

Kochise commented 9 months ago

https://www.github.com/generic-github-user/Tree/

Alexandre-SCHOEPP commented 3 months ago

I think that potentially having link directionality would be great, as it would allow for optionally orientated graphs.

Maybe this could be done via a new renderer for the flowcharts, however ? I feel like these two diagram types share do share a lot of use cases, and the structured feel of the flowchart is mainly due to the way it is rendered, especially if you do not use subgraphs... which I think are not incompatible with your proposal (they could be a circle with this new renderer).

mermaid-js / mermaid