用户旅程图：Section 与 Task

简介 / Introduction

用户旅程图（Journey diagram）常用于展示一个流程中不同角色（Actor）依次完成的任务（Task），并按阶段（Section）分组。PlantUML 与 Mermaid 都支持此图类型，但语法细节差异较大。本文通过同一示例对比两种引擎的写法。

PlantUML 版

@startuml
skinparam backgroundColor #FEFEFE
skinparam defaultFontSize 13

title 用户下单流程

scope 开始 as "开始"
scope 下单 as "下单"
scope 支付 as "支付"

|角色: 顾客|
:浏览商品; #LightBlue
:添加购物车; #LightBlue
|#下单|
:确认订单; #Gold
:提交订单; #Gold
|#支付|
:选择支付方式; #LightGreen
:完成支付; #LightGreen

|角色: 商家|
|#下单|
:收到新订单通知; #Gold
|#支付|
:确认收款; #LightGreen

|#下单|
note right: 商家侧同步收到订单

@enduml

PlantUML 使用 |<角色名>| 语法声明 Actor，|#阶段| 分组 Task，支持 scope 关键字控制并行区域。Task 内容直接写在 : 与 ; 之间。

Mermaid 版

journey
    title 用户下单流程
    section 下单
        浏览商品: 5: 顾客
        添加购物车: 4: 顾客
        确认订单: 3: 顾客
        提交订单: 2: 顾客
        收到新订单通知: 3: 商家
    section 支付
        选择支付方式: 5: 顾客
        完成支付: 4: 顾客
        确认收款: 5: 商家

Mermaid 的 journey 图使用 section 关键字划分阶段，每行 Task 格式为 任务名: 分值: 角色。分值 1-5 表示该步骤对用户的重要程度。Mermaid 不需要显式声明 Actor，角色名直接写在每行末尾。

对比 / Side-by-side

特性	PlantUML	Mermaid
阶段声明	`\|#阶段名\|`	`section 阶段名`
角色声明	`\|角色: 名称\|`	直接在 Task 行末尾写角色名
任务格式	`:任务描述;`	`任务描述: 分值: 角色`
并行区域	`scope` 关键字	不支持
颜色标记	`#ColorCode`	不直接支持
任务分值	不支持	1-5 分值

小结 / Wrap-up

PlantUML 旅程图适合需要多角色、多阶段并行展示的场景，语法较为冗长但控制力强；Mermaid 旅程图语法简洁，适合轻量文档和博客嵌入。两者的核心差异在于阶段和角色的声明方式，选用时可根据是否需要颜色、并行域等特性决定。