Typora绘制-用户旅程图

**注意**用户旅程图的高亮新旧版本会正常显示。用户旅程图mermaid官方网站文档教程链接(英文)社区维护的中文文档站1、新版本语法journey如下仅是基础的常用功能语法如需更全面内容可参考官网教程文档任务行格式兼容旧版任务: 评分: 角色新增任务: 角色评分可选简化版打开App: 用户 兼容版打开App: 4: 用户评分支付订单: 2: 用户 / 支付订单: 用户兼容 1-5 整数省略时无情绪曲线多角色分隔下单: 4: 用户, 系统 / 下单: 4: 用户 系统兼容英文逗号新增空格分隔更易读section 命名section ⚠️ 支付阶段痛点支持 Emoji⚠️/、标点、特殊符号空行 / 换行section 间加空行代码更清晰支持空行分隔阶段不影响渲染注释规则单行注释%% 注释内容必须以%%开头可放在行首 / 行尾多行注释无原生支持需每行加%%特殊规则避坑重点核心差异旧版强制要求评分新版评分可选、支持更多样式且 Typora 版本决定兼容性实用建议优先用新版语法新版功能更新 Typora避坑点section 名称加 Emoji 仅新版支持旧版会显示乱码建议写在任务名中。2、代码示例示例1journey title 用户核心旅程 section 发现阶段 看到广告/推荐: 5: 用户 了解产品价值: 4: 用户 section 决策阶段 对比竞品/看评价: 3: 用户 注册/下载: 5: 用户 section 使用阶段 首次体验功能: 4: 用户 完成核心任务: 5: 用户 遇到问题: 2: 用户 section 留存阶段 再次使用: 4: 用户 分享/推荐: 3: 用户 续费/复购: 4: 用户示例2journey title 电商App用户全旅程含多角色情绪评分 section 1. 发现与引流 刷短视频看到广告: 4: 用户, 推荐系统 点击广告进入商品页: 3: 用户, 前端 浏览商品详情: 4: 用户, 商品系统 加入购物车: 5: 用户, 购物车系统 section 2. 注册与登录⚠️ 痛点验证码慢 点击登录/注册: 2: 用户, 账号系统 手机号验证码登录: 1: 用户, 短信服务 完善个人信息: 3: 用户, 账号系统 section 3. 下单与支付 进入结算页: 4: 用户, 订单系统 选择地址/支付方式: 3: 用户, 地址/支付系统 提交订单并支付: 2: 用户, 支付网关, 财务系统 支付成功: 5: 用户, 订单系统 section 4. 履约与售后 机会物流实时提醒 查看订单物流: 4: 用户, 物流系统 收到商品验货: 3: 用户, 快递员 申请售后/评价: 4: 用户, 客服, 评价系统3、效果示例示例1用户发现阶段发现阶段用户看到广告/推荐看到广告/推荐用户了解产品价值了解产品价值决策阶段决策阶段用户对比竞品/看评价对比竞品/看评价用户注册/下载注册/下载使用阶段使用阶段用户首次体验功能首次体验功能用户完成核心任务完成核心任务用户遇到问题遇到问题留存阶段留存阶段用户再次使用再次使用用户分享/推荐分享/推荐用户续费/复购续费/复购用户核心旅程示例2前端商品系统地址/支付系统客服快递员推荐系统支付网关物流系统用户短信服务订单系统评价系统财务系统账号系统购物车系统1. 发现与引流1. 发现与引流用户推荐系统刷短视频看到广告刷短视频看到广告用户前端点击广告进入商品页点击广告进入商品页用户商品系统浏览商品详情浏览商品详情用户购物车系统加入购物车加入购物车2. 注册与登录⚠️ 痛点验证码慢2. 注册与登录⚠️ 痛点验证码慢用户账号系统点击登录/注册点击登录/注册用户短信服务手机号验证码登录手机号验证码登录用户账号系统完善个人信息完善个人信息3. 下单与支付3. 下单与支付用户订单系统进入结算页进入结算页用户地址/支付系统选择地址/支付方式选择地址/支付方式用户支付网关财务系统提交订单并支付提交订单并支付用户订单系统支付成功支付成功4. 履约与售后 机会物流实时提醒4. 履约与售后 机会物流实时提醒用户物流系统查看订单物流查看订单物流用户快递员收到商品验货收到商品验货用户客服评价系统申请售后/评价申请售后/评价电商App用户全旅程含多角色情绪评分4、老版本语法journey新版本功能可以支持更丰富的内容旧版写法差异明显头部声明没有变化不推荐使用就不介绍太多了。journey title 电商用户下单简易旅程旧版语法 section 浏览商品 打开电商App: 4: 用户 搜索目标商品: 3: 用户 查看商品详情: 4: 用户 section 下单支付 加入购物车: 5: 用户 提交订单: 3: 用户 完成支付: 2: 用户 section 收货评价 等待物流: 3: 用户 确认收货: 4: 用户 发布商品评价: 5: 用户用户浏览商品浏览商品用户打开电商App打开电商App用户搜索目标商品搜索目标商品用户查看商品详情查看商品详情下单支付下单支付用户加入购物车加入购物车用户提交订单提交订单用户完成支付完成支付收货评价收货评价用户等待物流等待物流用户确认收货确认收货用户发布商品评价发布商品评价电商用户下单简易旅程旧版语法5、新旧版本差异新旧版本差异比较大如下对比语法规则旧版Mermaid v8.x新版Mermaid v9.x典型示例报错 / 兼容说明任务行基础格式必须包含「任务评分角色」三者缺一不可1. 兼容旧版完整格式2. 支持简化格式「任务角色」评分可选旧版登录: 3: 用户新版登录: 用户旧版写登录: 用户会直接报错新版两种写法均生效评分值要求仅支持 1-5 的整数无其他取值兼容 1-5 整数无评分时不显示情绪曲线旧版支付: 6: 用户报错新版支付: 用户无评分旧版评分超 1-5 范围报错新版无评分仅展示流程多角色分隔符仅支持英文逗号,无其他分隔方式兼容英文逗号支持空格分隔更易读旧版下单: 4: 用户, 系统新版下单: 4: 用户 系统旧版用空格分隔角色会识别为单个角色新版两种方式均正确Section 命名格式仅支持纯文本字母 / 数字 / 中文不支持特殊字符支持 Emoji⚠️/、标点、特殊符号旧版section 注册流程新版section ⚠️ 注册流程痛点旧版 section 加 Emoji 会显示乱码新版完全兼容注释语法仅支持行尾注释任务: 3: 用户 %% 注释支持行尾注释、单独注释行%% 单独注释旧版%% 单独注释无效新版%% 单独注释生效旧版单独注释行会被识别为任务导致报错新版支持任意位置注释空行 / 换行不支持空行换行过多会导致渲染错乱支持空行分隔阶段换行不影响渲染旧版section 间加空行渲染错位新版section 间加空行更清晰旧版复杂图加空行易乱新版可通过空行优化代码排版基础场景语法规则差异明显高级场景journey新增专属功能6、版本兼容性Typora 版本 1.0旧版 Typora 用新版语法无评分会渲染失败旧版 section 加 Emoji 会显示乱码 / 报错低版本 Typora 无法使用新版特性新版渲染更美观旧版仅能靠评分体现情绪Typora 版本 ≥ 1.0复杂多角色旅程图新版可读性更高新版可定制化程度更高适配复杂图的视觉区分复杂分支旅程图新版能更清晰展示逻辑绘制超 10 个 section 的复杂图时新版体验更好如何查版本Typora → 帮助 → 关于 Typora可看到 Typora 版本。