Mermaid display adaption

Posted on In

Pre

Mermaid语法简单，使用方便，但是对具体布局的调整比较难以把控，在一些专业画图软件里的布局在mermaid里也难以实习。只能遵循一些规则尽量让布局符合我们的预期。

关于mermaid布局

  1. 尽量使用TB而不是TD，TD不一定能按照top/bottom排列
  2. flowchart 支持嵌套/ graph 不支持嵌套subgraph
  3. 代码顺序不影响拓扑关系，但是有可能会影响布局。
  4. flowchart TB 支持 subgpaph direction BT，而graph TB不支持
  5. mermaid 中只要是相邻元素的连线方向会尽量保持与主方向。虽然拓扑不受影响，但是布局会受影响的，必须时刻注意，否则被强行调整元素位置可能会生成非期望的布局；未与外界直接相连的subgraph内的元素，可以通过direction控制方向。
  6. 注意元素之间在没有连线的情况下，默认与主轴交错防抢排列，并且默认顺序与添加语句顺序是颠倒的，最后添加的排在最前面；
  7. mermaid连线时可能会强行调整元素位置，目前发现以下一些原则：
  • 会将流程靠前的元素放到主轴方向的开端
  • 位置靠前的元素以及其内部元素更不容易被调整位置
  • 会尽量调整元素布局以使得连线最短

Example

1
2
3
4
5
6
7
8
9
10
11
12
13
```mermaid
flowchart　TB
subgraph a[Right]
  direction TB
  A' --> B' --> C' --> D' --> A'
end
subgraph b[Left]
  direction TB
  A --> B --> C --> D
end
A' --> D
A --> D'
```
flowchart　TB
subgraph a[Right]
  direction TB
  A' --> B' --> C' --> D' --> A'
end
subgraph b[Left]
  direction TB
  A --> B --> C --> D
end
A' --> D
A --> D'

分析

  • 由于a的布局位置考后，更容易被调整位置，并且其内部是首尾相接的结构，允许其调整元素顺序而拓扑结构不变，为了使A –> D’ 连线尽量短，会把D’调整位置到顶端，所以看起来元素顺序有点不符合预期。
  • subgraph a 和 subgraph b 如果交换代码位置，subgraph a 由于代码位置靠后，所以布局靠前，更不易被调整位置，所以abcd按照主轴方向依次向下排列，这样看起来顺眼多了。
1
2
3
4
5
6
7
8
9
10
11
12
13
```mermaid
flowchart　TB
subgraph b[Left]
  direction TB
  A --> B --> C --> D
end
subgraph a[Right]
  direction TB
  A' --> B' --> C' --> D' --> A'
end
A' --> D
A --> D'
```
flowchart　TB
subgraph b[Left]
  direction TB
  A --> B --> C --> D
end
subgraph a[Right]
  direction TB
  A' --> B' --> C' --> D' --> A'
end
A' --> D
A --> D'