Multiple directions in mermaid flowchart

Question

The code snippet below creates a flowchart with the three boxes Data, Infrastructure & Modeling, ordered from left to right because of this line of mermaid code: flowchart LR. I would like the first two boxes, Data & Infrastructure to behave like that, but the box Modeling should go below Infrastructure. Is it possible in mermaid to allow for multiple directions?

The final flowchart should look roughly like that:

<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
<script>
    mermaid.initialize({ startOnLoad: true });
</script>
<div class="mermaid">
  flowchart LR
  subgraph Data
    direction TB
    da1(Data1) --> api(APis)
    da2(Data2) --> api
    da3(Data3) --> api
  end
  subgraph Infrastructure
    direction TB
    pro(Processing) --> db[(Database)]
    db --> api2(API)
    api2 --> p(Python, R, ...)
    db --> app(Web App)
  end
  subgraph Modeling
    direction TB
    sta(Statistics)
    mal(Machine Learning)
    mem(Mechanistic Models)
  end
  api --> pro
  p --> Modeling
</div>

Is "Python, R, ..." supposed to connect to the modeling box? — ChrisGPT was on strike, Mar 04 '22 at 11:48
Yes, but that's a detail. The most important thing is, that the modeling box goes below the Infrastructure box. Though all in one mermaid flowchart at best. — andschar, Mar 04 '22 at 12:29
It's not just a detail. Mermaid lays things out largely based on the links between nodes. If you wanted to connect APIs to Statistics this may just work out of the box. The link from Python to Modeling is what causes Modeling to be put over to the right. — ChrisGPT was on strike, Mar 04 '22 at 12:36
Does this answer your question? [Can I control the direction of flowcharts in Mermaid?](https://stackoverflow.com/questions/66631182/can-i-control-the-direction-of-flowcharts-in-markdown-drawn-with-mermaid) — ChrisGPT was on strike, Mar 04 '22 at 12:38

Multiple directions in mermaid flowchart

0 Answers0