美人鱼子图布局不一致

Question

我正在使用 Mermaid 创建带有子图的流程图。

这工作正常，除了布局与我预期的不同。

使用 LR 布局，子图自上而下排列，每个子图中的节点也是如此：

<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>

<div class="mermaid">
flowchart LR

subgraph Subgraph One
  A
  -->B
  -->C
end

subgraph Subgraph Two
  D
  -->E
  -->F
end

subgraph Subgraph Three
  X
  -->Y
  -->Z
end
</div>

但是如果我使用 TD 布局，子图是从左到右排列的，但是每个子图中的节点是自上而下的。

<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>

<div class="mermaid">
flowchart TD

subgraph Subgraph One
  A
  -->B
  -->C
end

subgraph Subgraph Two
  D
  -->E
  -->F
end

subgraph Subgraph Three
  X
  -->Y
  -->Z
end
</div>

这让我感到惊讶：我希望子图按照我指定的方向（自上而下或左右）排列。或者至少，我希望它们与布局正交，例如子图从左到右，节点从上到下，反之亦然。

在这两种情况下，子图的显示顺序与我预期的相反，最后一个子图最先显示。

对于更复杂的图表，无论我指定哪种布局，我实际上都会看到自上而下和左右布局的混合。

如何使用 Mermaid 创建一个图，其中的子图按我指定的顺序从左到右排列，但其节点是自上而下的？

Answer 1

This is surprising to me: I'd expect the subgraphs to be laid out in the direction I specified (either top-down or left-right). Or at the very least, I'd expect them to be orthogonal to the layout, e.g. subgraphs being left-right with nodes that are top-down, or vice-versa.

我认为没有指定行为，但是 you can explicitly specify direction in subgraphs:

<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>

<div class="mermaid">
flowchart TD

subgraph Subgraph One
  direction LR  %% <-- here
  A
  -->B
  -->C
end

subgraph Subgraph Two
  direction LR  %% <-- here
  D
  -->E
  -->F
end
</div>

And in both cases, the subgraphs are showing up in the opposite order I'd expect, with the last subgraph showing first.

您可以尝试向后排序子图，但我不相信美人鱼保证它将如何布置它们。这可能会按照您今天的意愿呈现，明天会随着软件的新版本而改变。

归根结底，美人鱼的目标是通过边连接节点。它遵循一些提示，但如果您想完全任意控制布局，您可能希望选择不同的工具。

如果您熟悉 (La)TeX，Mermaid 的操作方式与此类似：它让您通过放弃 fine-grained 对事物呈现方式的精确控制来专注于内容。还有其他工具可以让您完全控制布局，但这也意味着您负有全部责任。

美人鱼子图布局不一致

Mermaid Subgraphs Laid Out Inconsistently

javascript

mermaid