用户旅程图描述了用户在您的应用程序中实现特定目标所采取的步骤。与以系统为中心的流程图或序列图不同，用户旅程专注于人类行为、工作流程阶段以及随时间推移的用户满意度追踪。
基本语法结构
每个用户旅程都以journey声明开始，接着是标题和按顺序排列的章节，这些章节将用户体验分解开来。
Mermaid
Edit Mermaid in VPasCode
journey
title 样本用户旅程
section 阶段名称
任务名称：评分：参与者1，参与者2
语法参考
下表分解了在 Mermaid.js 中构建用户旅程图所使用的主元素。
| 组件 | 描述 | 语法示例 |
|---|---|---|
| 声明 | 初始化用户旅程图渲染器。 | journey |
| 标题 | 定义地图顶部的主要标题或用户目标。 | title 登录工作流 |
| 章节 | 代表用户旅程中的一个高层次阶段或阶段。 | section 发现阶段 |
| 任务 | 用户在某一章节内执行的特定操作。 | 浏览文档 |
| 满意度评分 | 一个从 1 到 5 的整数，用于映射用户的愉悦感或困扰程度。 | : 4 : (5分中的4分) |
| 角色 | 用逗号分隔的角色列表，这些角色参与完成任务。 | 用户，系统 |
现实世界蓝图：电子商务结账体验
此蓝图展示了完整的用户旅程，追踪客户在线购买商品的体验，记录情感痛点（低分）和愉悦时刻（高分）。
Mermaid
Edit Mermaid in VPasCode
journey
title 在线购买旅程
section 产品发现
搜索商品：4：用户
比较价格：3：用户
查看产品图片：5：用户
section 结账流程
添加商品到购物车：4：用户
创建账户：2：用户，系统
输入配送信息：3：用户
处理信用卡：1：用户，支付网关
section 购买后
接收电子邮件确认：5：系统
跟踪包裹配送：4：用户，物流
语法提示：满意度评分由渲染器自动着色。1分或2分表示操作摩擦（红色/橙色），3分为中性（黄色），4分或5分代表顺畅、成功的交互（绿色）。
高级概念：多角色旅程
在复杂的流程中，任务很少由单一个人完成。Mermaid允许你通过用逗号分隔名字，将多个角色分配给单一任务。这有助于展示客户互动需要后端支持或系统自动化的情况。
Mermaid
Edit Mermaid in VPasCode
journey
title 多角色支持示例
section 客户支持案例
提交问题工单：3：客户
将工单分配给客服人员：4：系统，支持管理员
调查技术问题：2：开发人员，质量测试员
解决问题并通知：5：支持管理员
常见语法陷阱
在编写用户旅程图时，微小的格式错误可能导致渲染引擎报错。请牢记以下三条格式规则，以确保你的图表能正确生成：
- 双冒号规则：每条任务行必须严格遵循以下结构：
任务描述：评分：角色。在角色列表前忘记第二个冒号，是导致旅程图无法加载的最常见原因。 - 评分范围限制：满意度评分必须是1到5之间的整数。传递0分或高于5的数值将导致布局参数失效。
- 缩进：尽管Mermaid对空格较为灵活，但将任务保持在其所属部分下的缩进格式，会使你的原始文本文件在产品功能扩展时更易于阅读和维护。