0
160
ViewsFormat Sitemap Style Memaid JS
I am using the following Mermaid MD to create a sitemap.
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js">
</script>
<script>mermaid.initialize({startOnLoad:true});</script>
</head>
<body>
<h1>Example</h1>
<div class="mermaid">
flowchart TD
A(Home)-->B(Col 1 - Level 1)
A-->C(Col 2 - Level 1)
C-->F(Col 2 - Level 2)
A-->G(Col 3 - Level 1)
G-->H(Col 3 - Level 2)
H-->I(Col 3 - Level 3)
A-->J(Col 4 - Level 1)
J-->K(Col 4 - Level 2)
A-->L(Col 5 - Level 1)
B-->E(End)
F-->E
I-->E
K-->E
</div>
</body>
</html>
Which renders like the image below. See the Codepen.
I would like it to respect the column order and align it more like an old school sitemap.
Does anybody know if this is possible?
·
Juan Pablo Isaza
1 answers
Answer question0
You can accomplish this using the built-in subgraph functionality. The following appears to do what you want:
flowchart TD
subgraph one
A(Home)-->B(Col 1 - Level 1)
A-->C(Col 2 - Level 1)
A-->G(Col 3 - Level 1)
A-->J(Col 4 - Level 1)
A-->L(Col 5 - Level 1)
end
subgraph two
C-->F(Col 2 - Level 2)
J-->K(Col 4 - Level 2)
G-->H(Col 3 - Level 2)
end
H-->I(Col 3 - Level 3)
B-->E(End)
F-->E
I-->E
K-->E
·
Juan Pablo Isaza
Report
Answer question