如何为Mermaid ER图设置自上而下（TD）布局？

先看这段基础的Mermaid ER图代码：

erDiagram
  CLIENT {}
  ACCOUNT {}
  PRODUCT {}
  ADDRESS {}
  INVESTMENT {}
  REPORT {}

  
  CLIENT ||--o{ ACCOUNT : account_fkey
  CLIENT ||--o{ PRODUCT : product_fkey
  CLIENT ||--o{ ADDRESS : address_fkey
  CLIENT ||--o{ INVESTMENT : investment_fkey
  CLIENT ||--o{ REPORT : report_fkey

它默认会生成左右布局的图表，这种布局在网页或长文档里很快会变得难以阅读。

我们知道Mermaid的其他图表（比如流程图）可以通过在图表类型后添加TD来设置自上而下布局，但直接套用在ER图上会失效：

erDiagram TD 
  CLIENT {}
  ACCOUNT {}
  PRODUCT {}
  ADDRESS {}
  INVESTMENT {}
  REPORT {}

  
  CLIENT ||--o{ ACCOUNT : account_fkey
  CLIENT ||--o{ PRODUCT : product_fkey
  CLIENT ||--o{ ADDRESS : address_fkey
  CLIENT ||--o{ INVESTMENT : investment_fkey
  CLIENT ||--o{ REPORT : report_fkey

此时Mermaid会把TD识别成一个额外的实体，达不到调整布局的目的。

可行的解决方案 #

Mermaid ER图不支持直接通过TD/LR这类后缀指定布局，但可以通过以下方式调整：

1. 使用初始化配置指定布局方向
   在代码开头添加初始化配置，明确设置ER图的布局方向：

%%{ init: { 'erDiagram': { 'layoutDirection': 'TB' } } }%%
erDiagram
  CLIENT {}
  ACCOUNT {}
  PRODUCT {}
  ADDRESS {}
  INVESTMENT {}
  REPORT {}

  
  CLIENT ||--o{ ACCOUNT : account_fkey
  CLIENT ||--o{ PRODUCT : product_fkey
  CLIENT ||--o{ ADDRESS : address_fkey
  CLIENT ||--o{ INVESTMENT : investment_fkey
  CLIENT ||--o{ REPORT : report_fkey

其中'TB'代表自上而下（Top to Bottom），如果需要自下而上可以用'BT'，左右布局用'LR'/'RL'。

2. 手动调整实体与关系的顺序
   通过调整实体定义的先后顺序，或者微调关系的写法，也能在一定程度上优化布局，但这种方式的可控性较弱，适合简单图表。

3. 升级到最新版Mermaid
   部分旧版本的Mermaid不支持ER图的布局配置，升级到最新版本可以获得更完善的布局控制能力。

内容的提问来源于stack exchange，提问作者Luís de Sousa