Mermaid change position of nodes / options Anyway to fix nodes' position

Question

I'm trying to draw a flow chart in html.

The flow must be configured as below.

I've tried it in Mermaid like this

<script src="https://cdnjs.cloudflare.com/ajax/libs/mermaid/9.0.1/mermaid.min.js"></script>

<div class="mermaid">
  graph LR

  A-->B
  B-->C
  C-->B

  C-->D
  D-->C

  D-->E
  E-->D


  E-->F
  F-->E

  F-->G

  G-->E
  C-->E

  H

  A-->H
  H-->E;
</div>

Please I want to fix the position from A to G horizontality

I've tried to use CSS position, never worked. Also tried to animate it through jquery, never worked.

Please let me know any way to fix these nodes or else great library for it.

Thanks.

Chuvash

Answer 1

I get what you mean, but after having a look to the documentation, I could not manage to get your result, only improve readability by adding linkStyle default interpolate basis at the beginning of the chart.
It is unfortunate not to be able to put the nodes in separate divs, that could do the trick with some align. You are not the only one asking for similar behaviour in the repository of mermaid.
The API doc of the mermaid flowcharts does not provide any setting to achieve your goal.
Although the difficulty seems to come from the fact mermaid-js is based on d3-shape to make the links between nodes as stated here.
My best advice is to change library and since you are coding in javascript, vis.js can get you the result you expect with the networks as you can see here.
I did not dig any further, but it seems you may have to define manually the coordinates of the nodes, as explained in this stackoverflow post : vis.js - Place node manually

Angola

Answer 2

The layout of the diagram is done with the renderer. The default renderer is dagre as @AzogMugen says but starting with Mermaid version 9.4, you can use an alternate renderer named elk. The elk renderer is better for larger and/or more complex diagrams.

I have not seen any custom positioning yet but elk does support this. Examples here:

https://rtsys.informatik.uni-kiel.de/elklive/examples.html?e=user-hints%2Flayered%2FhorizontalOrder

https://rtsys.informatik.uni-kiel.de/elklive/examples.html?e=user-hints%2Flayered%2FverticalOrder

I have created an issue to support positioning here:

https://github.com/mermaid-js/mermaid/issues/5420

However the elk renderer is still an experimental feature for mermaid. You can change the renderer to elk by adding this directive:

%%{init: {"flowchart": {"defaultRenderer": "elk"}} }%%

https://mermaid.js.org/syntax/flowchart.html#configuration

https://mermaid.js.org/config/schema-docs/config.html#defaultrenderer

How it looks with elk rendering now:

flowchart-elk LR

  A-->B
  B-->C
  C-->B

  C-->D
  D-->C

  D-->E
  E-->D


  E-->F
  F-->E

  F-->G

  G-->E
  C-->E

  H

  A-->H
  H-->E;

Valles