我可以控制美人鱼中流程图的方向吗？

Question

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

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

我喜欢用美人鱼画简单的图表。但流程图好像只能是

top-to-bottom

或者

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

Answer 3

您可以使用框图来实现它：

block-beta
   columns 5
   A space B space C
   space space space space space
   F space E space D

   A --> B
   B --> C
   C --> D
   D --> E
   E --> F

结果：

https://mermaid.js.org/syntax/block.html