QUESTION
I am trying to use mermaid.js flowchart, to place two top-to-buttom subgraphs side-by-side, but also make inner links, like below
But what i get is FLOW subgraph turns into LR.
How to overcome this?
REFERANCES
.html
CODE
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Multiple Sheets</title>
<link rel="stylesheet" href=".0.0/normalize.min.css">
<link rel="stylesheet" href=".4.1/paper.css">
<!-- Set page size here: A5, A4 or A3 -->
<!-- Set also "landscape" if you need -->
<style>@page { size: A4 }</style>
<script type="module">
import mermaid from '/[email protected]/+esm'
</script>
</head>
<body class="A4">
<a href=".html"> cheet sheet</a>
<!-- bu sayfa 1 örneği -->
<section class="sheet padding-10mm">
<div class="mermaid">
flowchart TB
subgraph PAGE
direction LR
subgraph DETAIL
direction TB
DETAIL_A(DA)
DETAIL_B(DB)
end
subgraph FLOW
direction TB
FLOW_A(SA) ==> FLOW_B(FB) ==> FLOW_C(FC)
end
end
FLOW_A -.-> DETAIL_A
FLOW_B -.-> DETAIL_B
click FLOW_B callback "Tooltip for B"
</div>
</section>
</body>
</html>