Format Sitemap Style Memaid JS

user_961612 0
Viewed 83

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.

enter image description here

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?

enter image description here

mermaid sitemap javascript
1 Answers

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
user_152995000
Related