0
233
ViewsMultiple directions in mermaid flowchart
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>
·
Juan Pablo Isaza
Answer question