我可以控制 Mermaid 中流程图的方向吗？

Question

graph LR
A-->B-->C-->D-->E-->F;

graph TD
A-->B-->C-->D-->E-->F;

我喜欢用美人鱼画简单的图表。但流程图似乎只能是top-to-bottomor left-to-right。我可以对方向进行更微妙的控制，使流程图看起来更紧凑（如下图）吗？

Answer 1

您可以获得的最接近的是使用subgraphs

flowchart TD

subgraph Z[" "]
direction LR
  A --> B
  B --> C
end

subgraph ZA[" "]
direction RL
    D-->E
    E-->F
end

Z --> ZA

这是一个 hack，正如您所看到的，C 没有直接连接到 D。

美人鱼的特点是图表是自动生成的。C 到 D 是流动，连接 C 到 D 的箭头是水平还是垂直都没有关系；意思没有改变。

要连接 C 到 D，需要指定绝对像素坐标，这违背了自动生成图表的目的。

所以现在，绘制这样一个静态图美人鱼并不适合您的用例。

Answer 2

Mermaid 的图表仅了解垂直或水平布局。如果您不想绘制所需的紧凑布局，您可以尝试其他文本->图表工具，例如http://blockdiag.com/en/blockdiag/examples.html#edge-folding

如果您不想进行任何设置，https://kroki.io/支持大多数文本->图表工具，包括 BlockDiag。这是 BlockDiag 的“折叠”示例，作为 Kroki 生成的图表：

https://kroki.io/blockdiag/svg/eNotjEEKwkAMRfdzir_UhfQAA4JaT1FcTE2mDAYiNK0U6d1NwM17iwdvFH2-qJUJ3wRccDrjGrgF-sA9Jy9dh6pCYJoYxbybej_0-DQRjAwpmy7GFNX0DeGVJbuqYW7ER7_ 8r0OsmB457T_JhySR