流程图：方向与布局

简介 / Introduction

流程图（Flowchart）是最常用的图类型之一。PlantUML 和 Mermaid 都支持用关键字指定图的方向：left to right direction（或 LR）和 top to bottom direction（或 TB）是最常见的两种布局方向。本文用同一个示例展示两种引擎的方向语法，并做简要对比。

PlantUML 版

PlantUML 用 @startuml 开头，后接 left to right direction 或 top to bottom direction 指令来指定全局布局方向。

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 使节点从左向右排列，适合展示线性流程。改为 top to bottom direction 则变为从上到下排列。

Mermaid 版

Mermaid 在图表声明时直接用 flowchart 关键字后跟方向缩写（LR、TB、RL、BT）：

1
2
3
4
5

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

flowchart LR 表示从左到右布局。flowchart TB 为从上到下，flowchart RL 为从右到左，flowchart BT 为从下到上。

对比 / Side-by-side

小结 / Wrap-up

两种引擎的方向语法都非常直观：PlantUML 使用自然语言式的指令，声明更灵活；Mermaid 将方向编码进图表类型关键字，语法更紧凑。实际使用时，水平布局（LR/RL）适合宽屏展示，垂直布局（TB/BT）适合长页面或文档。