【在Typora中绘制用户旅程图和甘特图】

在 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;
```

解释

  • 阶段:从“开始”到“完成旅程”定义了用户的完整旅程。
  • 情感变化:通过不同颜色表示用户的情绪。例如 happyneutral 等不同样式的节点,标注了用户在各个阶段的情感。
  • 流程图符号:每个方框表示用户的某个行为或目标,不同箭头表示可能的路径。

示例 2:用 Mermaid 的甘特图模拟用户旅程图

甘特图更适合展示用户旅程的时间线,可以表示不同阶段的持续时间。虽然 Mermaid 的甘特图不支持情绪状态,但可以用注释来说明每个阶段的情绪。

2024-11-01 2024-11-02 2024-11-03 2024-11-04 2024-11-05 2024-11-06 2024-11-07 2024-11-08 2024-11-09 2024-11-10 浏览网站 浏览产品信息 比较产品 查看评论 下单 咨询客服 支付 收到产品 使用体验 售后服务 发现阶段 决策阶段 购买阶段 售后阶段 用户旅程图
```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 没有直接支持用户旅程图的功能,我们可以通过流程图或甘特图来间接展示用户的旅程。流程图适合展示用户的情绪和决策路径,而甘特图则适合展示不同阶段的时间线。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/59171.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

如何使用IDEA创建Maven/SSM工程?

鉴于很多学校还在教授SSMJSP,很多同学不会使用IDEA创建Maven工程,这里进行说明 windows下安装jdk并配置环境 添加链接描述Windows下安装Maven并配置环境 首先你要本地安装jdk,Maven并配置基础环境变量,然后对IDEA进行jdk、Mave…

网络安全常见面试题--含答案

本文面试题汇总: 防范常见的 Web 攻击 重要协议分布层 arp协议的工作原理rip协议是什么?rip的工作原理 什么是RARP?工作原理OSPF协议?OSPF的工作原理 TCP与UDP区别总结 什么是三次握手四次挥手? tcp为什么要三次握手&…

C++内存泄漏检查工具——Valgrind(--tool = memcheck)

在写c程序中通常遇到程序崩溃,我们首先想到的是内存问题 如果代码量少看几遍就能看得出来,如果代码量多起来我们就得借助一些工具了比如gdb调试和valgrind中得memcheck来解决内存问题 我用的ubuntu,先安装valgrind sudo apt update sudo a…

原生 JavaScript基本内容和常用特性详解

原生 JavaScript(也称为 Vanilla JS)指的是不依赖于任何框架或库的纯 JavaScript。以下是原生 JavaScript 的一些基本内容和常用特性详解。 目录 1. 数据类型 2. 变量声明 3. 控制结构 4. 函数 5. 对象和数组 6. 事件处理 7. DOM 操作 8. Promi…

库打包工具 rollup

库打包工具 rollup 摘要 **概念:**rollup是一个模块化的打包工具 注:实际应用中,rollup更多是一个库打包工具 与Webpack的区别: 文件处理: rollup 更多专注于 JS 代码,并针对 ES Module 进行打包webpa…

基于promtail+loki+grafana搭建日志系统

文章目录 Promtail安装promtail创建配置文件创建systemd 服务文件启动promtail服务 loki下载loki服务创建config.yml文件创建systemd服务文件启动loki grafana下载grafana 本文基于promtaillokigrafanaprometheus(可选) 搭建一个轻量快速的日志系统&…

微服务容器化部署实践(FontConfiguration.getVersion)

文章目录 前言一、整体步骤简介二、开始实战1.准备好微服务2.将各个微服务打包为镜像第一种第二种3. 将各个打包好的镜像,通过docker-compose容器编排,运行即可总结前言 docker容器化部署微服务: 将微服务容器化部署到 Docker 容器中是一个常见的做法,可以提高应用的可移…

人工智能(AI)和机器学习(ML)技术学习流程

目录 人工智能(AI)和机器学习(ML)技术 自然语言处理(NLP): Word2Vec: Seq2Seq(Sequence-to-Sequence): Transformer: 范式、架构和自注意力: 多头注意力: 预训练、微调、提示工程和模型压缩: 上下文学习、思维链、全量微调、量化、剪枝: 思维树、思维…

Python 操作数据库:读取 Clickhouse 数据存入csv文件

import pandas as pd from clickhouse_driver import Client import timeit import logging import threading from threading import Lock from queue import Queue from typing import List, Dict, Set from contextlib import contextmanager import os import time# 配置参…

SCP收容物211~215

注 :此文接SCP收容物201~210,本文只供开玩笑 ,与steve_gqq_MC合作 --------------------------------------------------------------------------------------------------------------------------------- 目录 scp-211 scp-212 scp-213 scp-214 scp-215 s…

带你读懂什么是AI Agent智能体

一、智能体的定义与特性 定义:智能体是一个使用大语言模型(LLM)来决定应用程序控制流的系统。然而,智能体的定义并不唯一,不同人有不同的看法。Langchain的创始人Harrison Chase从技术角度给出了定义,但更…

docker-compose在阿里云服务器上部署https所踩的各种坑(已成功部署)

前言 购买服务器,申请域名,申请证书,下载nginx证书,这些操作我就不说了,百度一大把,我只说一下部署中碰到的问题 问题 我们是docker-compose上部署的后台前台环境,配置https证书,…

Qt_day3_信号槽

目录 信号槽 1. 概念 2. 函数原型 3. 连接方式 3.1 自带信号 → 自带槽 3.2 自带信号 → 自定义槽 3.3 自定义信号 4. 信号槽传参 5. 对应关系 5.1 一对多 5.2 多对一 信号槽 1. 概念 之前的程序界面只能看,不能交互,信号槽可以让界面进行人机…

lua入门教程:math

在Lua中,math库是一个非常重要的内置库,它提供了许多用于数学计算的函数。这些函数可以处理各种数学运算,包括基本的算术运算、三角函数、对数函数、随机数生成等。结合你之前提到的Lua中的数字遵循IEEE 754双精度浮点标准,我们可…

UI架构解说

UI(用户界面,User Interface) 是指用户与软件或硬件系统进行交互的界面。 它是用户与系统之间的桥梁,允许用户通过视觉元素、交互组件和反馈机制来操作和控制应用程序或设备。 UI 设计的目标是提供直观、易用和愉悦的用户体验&a…

《ElementPlus 与 ElementUI 差异集合》Icon 图标 More 差异说明

参考 《element plus 使用 icon 图标(两种方式)》使用 icon 升级 Vue2 升级 Vue3 项目时,遇到命名时的实心与空心点差异! ElementUI: 实心是 el-icon-more空心是 el-icon-more-outline ElementPlus: 实心是 el-icon-more-fill…

RWKV 通过几万 token 的 CoT 解决几乎 100% 的数独问题(采用 29M 参数的小模型)

RWKV 做 CoT 特别有优势,因为推理速度和显存占用与上下文无关。即使做几百万 token 的 CoT 也不会变慢或额外消耗显存。 RWKV 社区开发者 Jellyfish042 训练了一个用于解决数独谜题的专用 RWKV 模型 Sudoku-RWKV ,项目的训练代码和数据制作脚本均已开源…

上海市计算机学会竞赛平台2024年11月月赛丙组

题目描述 在一个棋盘上,有两颗棋子,一颗棋子在第 aa 行第 bb 列,另一个颗棋子在第 xx 行第 yy 列。 每一步,可以选择一个棋子沿行方向移动一个单位,或沿列方向移动一个单位,或同时沿行方向及列方向各移动…

【异质图学习】异构图神经网络中的自监督学习:基于语义强度和特征相似度的对比学习

【异质图学习】异构图神经网络中的自监督学习:基于语义强度和特征相似度的对比学习 简介:本文探讨了异构图神经网络中自监督学习的应用,特别是基于语义强度和特征相似度的对比学习技术。通过对比学习,模型能够从无标签数据中学习…

postgres+timescaledb--离线安装,centos7.9

操作系统是centos7.9,使用的hper-V,安装的虚拟机环境,安装好操作系统之后,让系统不连外网后直接按下方操作安装。 方式1,使用压缩包,复杂一点。(第一种方式暂时没有安装timescaledb) 装备安装…