在 Typora 中可以使用 Mermaid 绘制用户旅程图（User Journey Map），但由于 Mermaid 并不直接支持用户旅程图，我们可以通过一些图表的变通方式（比如流程图或甘特图）来表示用户旅程图的结构。用户旅程图通常展示用户在不同阶段的行为、情感和目标，这里我们用 Mermaid 来模拟这些内容。
示例 1：用 Mermaid 的流程图绘制用户旅程图
流程图可以简单展示用户在不同阶段的行为和情绪变化，适合展示每个步骤的目标、操作和情感。
```mermaid
flowchart TDStart([开始])Start --> A[发现产品]A --> B[考虑购买]B --> C{情绪: 犹豫不决}C -->|正面反馈| D[决定购买]C -->|负面反馈| E[放弃购买]D --> F[支付]F --> G[确认订单]G --> End([完成旅程])%% 情感注释A:::happyB:::neutralC:::uncertainD:::positiveE:::negativeG:::happy%% 定义情感的样式classDef happy fill:#a3e4d7,stroke:#333,stroke-width:2px;classDef neutral fill:#f7dc6f,stroke:#333,stroke-width:2px;classDef uncertain fill:#f1948a,stroke:#333,stroke-width:2px;classDef positive fill:#82e0aa,stroke:#333,stroke-width:2px;classDef negative fill:#e74c3c,stroke:#333,stroke-width:2px;
```
解释
- 阶段：从“开始”到“完成旅程”定义了用户的完整旅程。
- 情感变化：通过不同颜色表示用户的情绪。例如
happy、neutral等不同样式的节点，标注了用户在各个阶段的情感。 - 流程图符号：每个方框表示用户的某个行为或目标，不同箭头表示可能的路径。
示例 2：用 Mermaid 的甘特图模拟用户旅程图
甘特图更适合展示用户旅程的时间线，可以表示不同阶段的持续时间。虽然 Mermaid 的甘特图不支持情绪状态，但可以用注释来说明每个阶段的情绪。
```mermaid
gantttitle 用户旅程图dateFormat YYYY-MM-DDsection 发现阶段浏览网站 :a1, 2024-11-01, 1d浏览产品信息 :a2, after a1, 1dsection 决策阶段比较产品 :b1, 2024-11-02, 2d查看评论 :b2, after b1, 1d咨询客服 :b3, after b2, 1dsection 购买阶段下单 :c1, 2024-11-04, 1d支付 :c2, after c1, 1dsection 售后阶段收到产品 :d1, 2024-11-05, 1d使用体验 :d2, after d1, 3d售后服务 :d3, after d2, 1d
```
解释
- 阶段：甘特图中的每个
section表示用户旅程的一个阶段，如“发现阶段”、“决策阶段”、“购买阶段”等。 - 步骤：每个
section中的条目表示用户在该阶段的具体操作。 - 持续时间：每个操作有对应的持续时间，有助于了解每个阶段所需的时间。
小结
虽然 Mermaid 没有直接支持用户旅程图的功能，我们可以通过流程图或甘特图来间接展示用户的旅程。流程图适合展示用户的情绪和决策路径，而甘特图则适合展示不同阶段的时间线。
