可信网站验证 费用,个人网站赚钱,营销型网站建设推来客网络,网页游戏代码在 Typora 中可以使用 Mermaid 绘制用户旅程图#xff08;User Journey Map#xff09;#xff0c;但由于 Mermaid 并不直接支持用户旅程图#xff0c;我们可以通过一些图表的变通方式#xff08;比如流程图或甘特图#xff09;来表示用户旅程图的结构。用户旅程图通常展…在 Typora 中可以使用 Mermaid 绘制用户旅程图User Journey Map但由于 Mermaid 并不直接支持用户旅程图我们可以通过一些图表的变通方式比如流程图或甘特图来表示用户旅程图的结构。用户旅程图通常展示用户在不同阶段的行为、情感和目标这里我们用 Mermaid 来模拟这些内容。
示例 1用 Mermaid 的流程图绘制用户旅程图
流程图可以简单展示用户在不同阶段的行为和情绪变化适合展示每个步骤的目标、操作和情感。 #mermaid-svg-MEstqPOrcImg8ptD {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-MEstqPOrcImg8ptD .error-icon{fill:#552222;}#mermaid-svg-MEstqPOrcImg8ptD .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-MEstqPOrcImg8ptD .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-MEstqPOrcImg8ptD .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-MEstqPOrcImg8ptD .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-MEstqPOrcImg8ptD .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-MEstqPOrcImg8ptD .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-MEstqPOrcImg8ptD .marker{fill:#333333;stroke:#333333;}#mermaid-svg-MEstqPOrcImg8ptD .marker.cross{stroke:#333333;}#mermaid-svg-MEstqPOrcImg8ptD svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-MEstqPOrcImg8ptD .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-MEstqPOrcImg8ptD .cluster-label text{fill:#333;}#mermaid-svg-MEstqPOrcImg8ptD .cluster-label span{color:#333;}#mermaid-svg-MEstqPOrcImg8ptD .label text,#mermaid-svg-MEstqPOrcImg8ptD span{fill:#333;color:#333;}#mermaid-svg-MEstqPOrcImg8ptD .node rect,#mermaid-svg-MEstqPOrcImg8ptD .node circle,#mermaid-svg-MEstqPOrcImg8ptD .node ellipse,#mermaid-svg-MEstqPOrcImg8ptD .node polygon,#mermaid-svg-MEstqPOrcImg8ptD .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-MEstqPOrcImg8ptD .node .label{text-align:center;}#mermaid-svg-MEstqPOrcImg8ptD .node.clickable{cursor:pointer;}#mermaid-svg-MEstqPOrcImg8ptD .arrowheadPath{fill:#333333;}#mermaid-svg-MEstqPOrcImg8ptD .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-MEstqPOrcImg8ptD .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-MEstqPOrcImg8ptD .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-MEstqPOrcImg8ptD .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-MEstqPOrcImg8ptD .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-MEstqPOrcImg8ptD .cluster text{fill:#333;}#mermaid-svg-MEstqPOrcImg8ptD .cluster span{color:#333;}#mermaid-svg-MEstqPOrcImg8ptD div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-MEstqPOrcImg8ptD :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}#mermaid-svg-MEstqPOrcImg8ptD .happy*{fill:#a3e4d7!important;stroke:#333!important;stroke-width:2px!important;}#mermaid-svg-MEstqPOrcImg8ptD .happy span{fill:#a3e4d7!important;stroke:#333!important;stroke-width:2px!important;}#mermaid-svg-MEstqPOrcImg8ptD .neutral*{fill:#f7dc6f!important;stroke:#333!important;stroke-width:2px!important;}#mermaid-svg-MEstqPOrcImg8ptD .neutral span{fill:#f7dc6f!important;stroke:#333!important;stroke-width:2px!important;}#mermaid-svg-MEstqPOrcImg8ptD .uncertain*{fill:#f1948a!important;stroke:#333!important;stroke-width:2px!important;}#mermaid-svg-MEstqPOrcImg8ptD .uncertain span{fill:#f1948a!important;stroke:#333!important;stroke-width:2px!important;}#mermaid-svg-MEstqPOrcImg8ptD .positive*{fill:#82e0aa!important;stroke:#333!important;stroke-width:2px!important;}#mermaid-svg-MEstqPOrcImg8ptD .positive span{fill:#82e0aa!important;stroke:#333!important;stroke-width:2px!important;}#mermaid-svg-MEstqPOrcImg8ptD .negative*{fill:#e74c3c!important;stroke:#333!important;stroke-width:2px!important;}#mermaid-svg-MEstqPOrcImg8ptD .negative span{fill:#e74c3c!important;stroke:#333!important;stroke-width:2px!important;} 正面反馈 负面反馈 开始 发现产品 考虑购买 情绪: 犹豫不决 决定购买 放弃购买 支付 确认订单 完成旅程 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-svg-SnJpDJSFmf03QZze {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-SnJpDJSFmf03QZze .error-icon{fill:#552222;}#mermaid-svg-SnJpDJSFmf03QZze .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-SnJpDJSFmf03QZze .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-SnJpDJSFmf03QZze .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-SnJpDJSFmf03QZze .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-SnJpDJSFmf03QZze .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-SnJpDJSFmf03QZze .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-SnJpDJSFmf03QZze .marker{fill:#333333;stroke:#333333;}#mermaid-svg-SnJpDJSFmf03QZze .marker.cross{stroke:#333333;}#mermaid-svg-SnJpDJSFmf03QZze svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-SnJpDJSFmf03QZze .mermaid-main-font{font-family:"trebuchet ms",verdana,arial,sans-serif;font-family:var(--mermaid-font-family);}#mermaid-svg-SnJpDJSFmf03QZze .exclude-range{fill:#eeeeee;}#mermaid-svg-SnJpDJSFmf03QZze .section{stroke:none;opacity:0.2;}#mermaid-svg-SnJpDJSFmf03QZze .section0{fill:rgba(102, 102, 255, 0.49);}#mermaid-svg-SnJpDJSFmf03QZze .section2{fill:#fff400;}#mermaid-svg-SnJpDJSFmf03QZze .section1,#mermaid-svg-SnJpDJSFmf03QZze .section3{fill:white;opacity:0.2;}#mermaid-svg-SnJpDJSFmf03QZze .sectionTitle0{fill:#333;}#mermaid-svg-SnJpDJSFmf03QZze .sectionTitle1{fill:#333;}#mermaid-svg-SnJpDJSFmf03QZze .sectionTitle2{fill:#333;}#mermaid-svg-SnJpDJSFmf03QZze .sectionTitle3{fill:#333;}#mermaid-svg-SnJpDJSFmf03QZze .sectionTitle{text-anchor:start;font-family:'trebuchet ms',verdana,arial,sans-serif;font-family:var(--mermaid-font-family);}#mermaid-svg-SnJpDJSFmf03QZze .grid .tick{stroke:lightgrey;opacity:0.8;shape-rendering:crispEdges;}#mermaid-svg-SnJpDJSFmf03QZze .grid .tick text{font-family:"trebuchet ms",verdana,arial,sans-serif;fill:#333;}#mermaid-svg-SnJpDJSFmf03QZze .grid path{stroke-width:0;}#mermaid-svg-SnJpDJSFmf03QZze .today{fill:none;stroke:red;stroke-width:2px;}#mermaid-svg-SnJpDJSFmf03QZze .task{stroke-width:2;}#mermaid-svg-SnJpDJSFmf03QZze .taskText{text-anchor:middle;font-family:'trebuchet ms',verdana,arial,sans-serif;font-family:var(--mermaid-font-family);}#mermaid-svg-SnJpDJSFmf03QZze .taskTextOutsideRight{fill:black;text-anchor:start;font-family:'trebuchet ms',verdana,arial,sans-serif;font-family:var(--mermaid-font-family);}#mermaid-svg-SnJpDJSFmf03QZze .taskTextOutsideLeft{fill:black;text-anchor:end;}#mermaid-svg-SnJpDJSFmf03QZze .task.clickable{cursor:pointer;}#mermaid-svg-SnJpDJSFmf03QZze .taskText.clickable{cursor:pointer;fill:#003163!important;font-weight:bold;}#mermaid-svg-SnJpDJSFmf03QZze .taskTextOutsideLeft.clickable{cursor:pointer;fill:#003163!important;font-weight:bold;}#mermaid-svg-SnJpDJSFmf03QZze .taskTextOutsideRight.clickable{cursor:pointer;fill:#003163!important;font-weight:bold;}#mermaid-svg-SnJpDJSFmf03QZze .taskText0,#mermaid-svg-SnJpDJSFmf03QZze .taskText1,#mermaid-svg-SnJpDJSFmf03QZze .taskText2,#mermaid-svg-SnJpDJSFmf03QZze .taskText3{fill:white;}#mermaid-svg-SnJpDJSFmf03QZze .task0,#mermaid-svg-SnJpDJSFmf03QZze .task1,#mermaid-svg-SnJpDJSFmf03QZze .task2,#mermaid-svg-SnJpDJSFmf03QZze .task3{fill:#8a90dd;stroke:#534fbc;}#mermaid-svg-SnJpDJSFmf03QZze .taskTextOutside0,#mermaid-svg-SnJpDJSFmf03QZze .taskTextOutside2{fill:black;}#mermaid-svg-SnJpDJSFmf03QZze .taskTextOutside1,#mermaid-svg-SnJpDJSFmf03QZze .taskTextOutside3{fill:black;}#mermaid-svg-SnJpDJSFmf03QZze .active0,#mermaid-svg-SnJpDJSFmf03QZze .active1,#mermaid-svg-SnJpDJSFmf03QZze .active2,#mermaid-svg-SnJpDJSFmf03QZze .active3{fill:#bfc7ff;stroke:#534fbc;}#mermaid-svg-SnJpDJSFmf03QZze .activeText0,#mermaid-svg-SnJpDJSFmf03QZze .activeText1,#mermaid-svg-SnJpDJSFmf03QZze .activeText2,#mermaid-svg-SnJpDJSFmf03QZze .activeText3{fill:black!important;}#mermaid-svg-SnJpDJSFmf03QZze .done0,#mermaid-svg-SnJpDJSFmf03QZze .done1,#mermaid-svg-SnJpDJSFmf03QZze .done2,#mermaid-svg-SnJpDJSFmf03QZze .done3{stroke:grey;fill:lightgrey;stroke-width:2;}#mermaid-svg-SnJpDJSFmf03QZze .doneText0,#mermaid-svg-SnJpDJSFmf03QZze .doneText1,#mermaid-svg-SnJpDJSFmf03QZze .doneText2,#mermaid-svg-SnJpDJSFmf03QZze .doneText3{fill:black!important;}#mermaid-svg-SnJpDJSFmf03QZze .crit0,#mermaid-svg-SnJpDJSFmf03QZze .crit1,#mermaid-svg-SnJpDJSFmf03QZze .crit2,#mermaid-svg-SnJpDJSFmf03QZze .crit3{stroke:#ff8888;fill:red;stroke-width:2;}#mermaid-svg-SnJpDJSFmf03QZze .activeCrit0,#mermaid-svg-SnJpDJSFmf03QZze .activeCrit1,#mermaid-svg-SnJpDJSFmf03QZze .activeCrit2,#mermaid-svg-SnJpDJSFmf03QZze .activeCrit3{stroke:#ff8888;fill:#bfc7ff;stroke-width:2;}#mermaid-svg-SnJpDJSFmf03QZze .doneCrit0,#mermaid-svg-SnJpDJSFmf03QZze .doneCrit1,#mermaid-svg-SnJpDJSFmf03QZze .doneCrit2,#mermaid-svg-SnJpDJSFmf03QZze .doneCrit3{stroke:#ff8888;fill:lightgrey;stroke-width:2;cursor:pointer;shape-rendering:crispEdges;}#mermaid-svg-SnJpDJSFmf03QZze .milestone{transform:rotate(45deg) scale(0.8,0.8);}#mermaid-svg-SnJpDJSFmf03QZze .milestoneText{font-style:italic;}#mermaid-svg-SnJpDJSFmf03QZze .doneCritText0,#mermaid-svg-SnJpDJSFmf03QZze .doneCritText1,#mermaid-svg-SnJpDJSFmf03QZze .doneCritText2,#mermaid-svg-SnJpDJSFmf03QZze .doneCritText3{fill:black!important;}#mermaid-svg-SnJpDJSFmf03QZze .activeCritText0,#mermaid-svg-SnJpDJSFmf03QZze .activeCritText1,#mermaid-svg-SnJpDJSFmf03QZze .activeCritText2,#mermaid-svg-SnJpDJSFmf03QZze .activeCritText3{fill:black!important;}#mermaid-svg-SnJpDJSFmf03QZze .titleText{text-anchor:middle;font-size:18px;fill:#333;font-family:'trebuchet ms',verdana,arial,sans-serif;font-family:var(--mermaid-font-family);}#mermaid-svg-SnJpDJSFmf03QZze :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} 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 没有直接支持用户旅程图的功能我们可以通过流程图或甘特图来间接展示用户的旅程。流程图适合展示用户的情绪和决策路径而甘特图则适合展示不同阶段的时间线。
