如何用 Mermaid 画用户旅程图

2026-03-05 · MermZen 教程

用户旅程图用于可视化用户与产品或服务的互动过程，展示用户的行为、情感和痛点，适合用户体验设计、产品优化、服务设计等场景。Mermaid 使用 journey 关键字声明用户旅程图。

声明图表

使用 journey 关键字：

journey
    title 用户旅程图标题

基本旅程定义

创建简单的用户旅程：

journey
    title 基本用户旅程图
    section 发现
      搜索引擎 : 5: 用户
      社交媒体推荐 : 3: 用户
    section 访问
      首页浏览 : 4: 用户
      产品列表页 : 5: 用户
    section 购买
      产品详情页 : 4: 用户
      加入购物车 : 5: 用户
      结账 : 4: 用户
    section 完成
      订单确认 : 5: 用户
      支付成功 : 5: 用户

情感曲线

添加用户的情感评分：

journey
    title 情感曲线旅程图
    section 发现阶段
      搜索引擎搜索 : 5: 用户
      广告点击 : 3: 用户
      产品比较 : 4: 用户
    section 考虑阶段
      产品详情阅读 : 5: 用户
      用户评论查看 : 4: 用户
      价格比较 : 3: 用户
    section 购买阶段
      加入购物车 : 5: 用户
      填写地址 : 3: 用户
      支付 : 4: 用户
    section 后购买阶段
      订单确认 : 5: 用户
      收货 : 4: 用户
      评价 : 3: 用户

完整示例：电商购物流程

journey
    title 电商用户购物旅程
    section 需求识别
      意识到需要 : 4: 用户
      明确需求 : 5: 用户
      研究产品 : 4: 用户
    section 信息收集
      搜索引擎搜索 : 5: 用户
      浏览电商平台 : 4: 用户
      查看产品评价 : 5: 用户
      比较价格 : 3: 用户
    section 购买决策
      产品详情页 : 4: 用户
      用户评价分析 : 5: 用户
      客服咨询 : 3: 用户
    section 购买过程
      加入购物车 : 5: 用户
      购物车结算 : 4: 用户
      填写地址 : 3: 用户
      支付 : 5: 用户
    section 交付体验
      订单确认 : 5: 用户
      发货通知 : 4: 用户
      物流跟踪 : 5: 用户
      收货 : 5: 用户
    section 售后体验
      产品使用 : 4: 用户
      问题反馈 : 3: 用户
      评价分享 : 4: 用户
      再次购买 : 5: 用户

速查表

下一步

掌握用户旅程图后，您可以继续学习其他 Mermaid 图表类型，或查看我们的 Mermaid 图表速查表 获取完整的语法参考。

如果您想在 MermZen 中尝试上述代码，可以点击 在线编辑器，然后将代码粘贴进去。