I want to change the subgraph placement from top to bottom to left in the flow chart RL of Mermaid.

I have designated the flow chart as RL in Mermaid, but as shown in the figure below,
Would it be possible to arrange the Before and Rebase subgraphs on the left and right sides instead of the top and bottom?
The editor uses Typora.

graph RL
subgraph4_[Rebase]
    1_ [commit1]
    2_ [commit 2]
    3_ [commit3]
    2_-->1_
    3_-->2_

    subgraph master -
    2_
    end
    subgraph feature -
    3_
    end
end
style4_fill:#fdc
subgraph4 [Before]
    1 [commit1]
    2 [commit 2]
    3 [commit3]
    2-->1
    3-->1
    subgraph master
    2
    end
    subgraph feature
    3
    end
end
style4fill:#fdc
classDefred fill: #F77
class3_,3red

Thank you very much for your understanding.

mermaid

2022-09-30 10:19

1 Answers

graph RL does not keep the graphic placed on the left or right side.
If you're just going to put it on the left and right sides, you can change the RL of the graph to TB as follows:

graph TB

The results of the Vscode Markdown Preview Mermaid Support are as follows:

I guess the graph of mermaid corresponds to rankdir of graphviz.

rankdir

TB: top to bottom.
BT: bottom to top.
LR—left to right.
RL—right to left.

It's a bad road, but there's a way to draw an invisible link.
Add the following two lines to display Rebase and Before side by side.

1_--- 2
linkStyle4stroke-width:0px

2022-09-30 10:19

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656