格式站点地图样式 Memaid JS

Question

我正在使用以下 Mermaid MD 创建站点地图。

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

呈现如下图。见 Codepen.

我希望它尊重列顺序并使其更像老式站点地图。

有人知道这是否可行吗？

Answer 1

您可以使用 built-in subgraph 功能来完成此操作。以下内容似乎可以满足您的要求：

      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

格式站点地图样式 Memaid JS

Format Sitemap Style Memaid JS

javascript

sitemap

mermaid