Flowcharts: LR / TB / RL / BT directions

简介 / Introduction

Flowcharts are one of the most commonly used diagram types. Both PlantUML and Mermaid let you specify the layout direction with a simple directive: left to right direction (or LR) and top to bottom direction (or TB) are the two most common orientations. This article uses the same example to show both engines’ direction syntax side by side.

PlantUML 版

PlantUML uses @startuml with a separate direction directive (left to right direction or top to bottom direction) placed on its own line after the start tag.

1
2
3
4
5
6
7
8
9
10
11

@startuml
left to right direction
actor 用户 as u
participant "前端" as f
database "数据库" as db

u --> f : 发起请求
f --> db : 查询数据
db --> f : 返回结果
f --> u : 展示页面
@enduml

left to right direction arranges nodes from left to right. Change it to top to bottom direction to switch to a vertical top-to-bottom layout.

Mermaid 版

Mermaid encodes the direction directly into the flowchart declaration using a two-letter abbreviation (LR, TB, RL, BT):

1
2
3
4
5

flowchart LR
    A[用户] --> B[前端]
    B --> C[数据库]
    C --> B
    B --> A

flowchart LR means left-to-right. Use flowchart TB for top-to-bottom, flowchart RL for right-to-left, and flowchart BT for bottom-to-top.

对比 / Side-by-side

小结 / Wrap-up

Both engines make direction intuitive: PlantUML uses a more verbose natural-language directive, while Mermaid encodes the orientation into the diagram type keyword for a more compact syntax. In practice, horizontal layouts (LR/RL) work well on wide screens, while vertical layouts (TB/BT) suit long pages and documents.