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.

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