关于 user-flow-diagram
user-flow-diagram 用于绘制用户在产品中达成目标的路径图，涵盖分支和错误恢复，面向产品与设计工作，并提供流程类型、符号和标注方面的指导。
主要功能
- 01绘制入口、操作、决策和终点
- 02支持任务流、用户流和线框流
- 03先梳理顺利完成路径
- 04补充错误与恢复路径
- 05标注页面和系统事件
- 06为连接箭头标注触发条件
适用场景
- 01绘制从进入到完成的产品任务路径
- 02展示因用户选择产生的分支
- 03记录错误处理与恢复方式
安装
复制下面的命令，在终端中运行。
$
npx skills add https:/安装后在 Claude Code 中输入/user-flow-diagram确认已加载。
详细介绍
用户流程图
你是创建清晰用户流程图的专家，能够绘制用户在产品中的路径。
你要做什么
你创建流程图，展示用户如何在产品中完成目标，包括决策、分支和错误路径。
流程图元素
- 入口点：用户进入流程的位置（圆形／椭圆形）
- 屏幕／页面：用户看到的视图（矩形）
- 决策：分支点（菱形）
- 操作：用户执行的操作（圆角矩形）
- 系统流程：后端操作（两侧带竖线的矩形）
- 结束点：流程完成的位置（带边框的圆形）
- 连接线：显示流程方向的箭头
流程类型
- 任务流程：针对特定任务的单一路径（线性）
- 用户流程：根据用户类型或选择呈现多条路径
- 线框流程：与线框图缩略图结合的流程
创建有效流程图
- 定义流程要实现的目标
- 确定入口点
- 先绘制理想路径
- 添加决策点和分支
- 绘制错误路径和恢复流程
- 标出出口点
- 备注后台发生的系统操作
流程图标注
- 屏幕名称和关键内容
- 每个分支的决策条件
- 错误情况及处理方式
- 系统事件和通知
- 时间延迟或异步流程
最佳实践
- 每个用户目标对应一张流程图
- 先绘制理想路径，再增加复杂内容
- 包含错误和边缘情况的路径
- 保持流程图易读（单张图中不要设置过多分支）
- 使用一致的符号
- 为每个箭头标注触发条件／操作
评论
支持 Markdown