流程图：边样式与箭头

简介 / Introduction

流程图的「边」即节点之间的连接线，既可以是无方向的实线，也可以是有方向的箭头；边的样式也可以用虚线或加粗来表达不同语义。PlantUML 与 Mermaid 都支持这些写法，但语法细节不同。本文用同一个简单流程演示两种引擎的等效写法。

PlantUML 版

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

@startuml
skinparam defaultArrowColor gray
skinparam defaultTextAlignment center

:打开首页;
if (已登录?) then (是)
  :显示仪表盘;
else (否)
  :显示登录页;
  :登录成功后显示仪表盘;
endif

:进入用户管理;
:列出用户列表;

note right: 仅管理员可见

stop
@enduml

关键语法说明：

• if (...) then (是) — 分支判断，then 后为条件为真时的标签
• else (否) — 对应条件为假时的分支
• endif — 关闭分支
• note right: — 在边或节点右侧附加备注

PlantUML 默认箭头即为有向边，:Actor: 语法表示圆角矩形（开始/结束节点）。

Mermaid 版

1
2
3
4
5
6
7
8
9
10
11

flowchart TD
    A([打开首页]) --> B{已登录?}
    B -- 是 --> C[显示仪表盘]
    B -- 否 --> D[显示登录页]
    D --> E[登录成功后显示仪表盘]
    E --> C
    C --> F[进入用户管理]
    F --> G[/列出用户列表/]
    G -.-> |仅管理员可见| H((仅管理员))

    style H fill:#f9f,stroke:#333,stroke-width:2px

关键语法说明：

• flowchart TD — TD（Top-Down）流向；可改为 LR（Left-Right）
• -- 是 --> — 实线箭头，--文字--> 在边上加标签
• -.-> — 虚线箭头
• {|文字|} — 菱形判断框
• [文字] — 圆角矩形；(/文字/) 为平行四边形；((圆)) 为圆形

对比 / Side-by-side

小结 / Wrap-up

PlantUML 的流程图语法偏向自然语言（if then else endif），适合写复杂决策逻辑；Mermaid 使用符号化标记（{}、[ ]、(( ))），语法更紧凑、阅读体验接近手绘流程图。两者均可通过样式指令或节点形状区分语义，根据团队习惯和工具链选用即可。