前言

康康图在开发中都藏在哪？？？

Web开发中一般会经过如下几个阶段：
    业务：提出需求；
    运营：1.和业务方对接，明确诉求；(往往运营也是需求提出者）
         2.写MRD文档，把需求同步给产品；
    产品：根据MRD写详细的PRD文档；
            // 做什么+涉及业务域和负责的功能+业务流程图（`泳道图`）
    设计：给出设计稿和上线用的视觉稿；
    开发：给出需求的设计文档、开发功能；
            // 怎么实现（`交互图`：明确业务域间的边界+`时序图`：单个功能的详细交互实现
            // +`用例图`：系统中的角色都能做什么+`状态图`：任务、活动状态的流转等）
    测试：功能性测试。

泳道图（业务流程图）

泳道图清晰的展示出，一个工作流程中涉及的部门，和部门负责的任务，是流程图的一种！

简单的泳道图栗子（竞猜瓜分）：

@startuml
|user| 用户
|activity| 活动
|task| 任务
|risk| 风控
|coupon| 优惠

|user|
start
: 进入活动页;
|activity|
: 调用任务;
|task|
: 下发任务列表|
|activity|
: 返回活动、任务数据;
|user|
: 完成任务;
|task|
: 下发任务奖励|
|user|
: 获得竞猜机会次数;
: 进行竞猜;
|activity|
: 调用风控;
|risk|
if (用户是否通过风控) is (拒绝) then
    |activity|
    : 不可竞猜;
    |user|
    : 不符合竞猜资格;
    kill
else (通过)
    |activity|
    : 扣除竞猜机会次数;
    : 运营后台设置竞猜结果;
    : 根据猜中用户总数和奖池\n计算瓜分金额;
    : 调用优惠资产发奖;
    |coupon|
    : 给用户发放津贴;
    |user|
    : 获得津贴;
endif
stop
@enduml

ui.png

交互图（各领域系统交互）

交互图用于划分系统边界，明确各业务域职责！

图中元素介绍：业务域（营销、订单、出价等）、系统（一个业务域会涉及多个系统，比如营销域：promocore、morefun等）、功能（单个系统负责的功能，比如：xx信息管理、xx查询、xx计算等）和系统间交互（比如：A系统向B系统查询xxx）。

简单的交互图栗子（圣诞送礼）：

复杂的交互图栗子（一品多商包邮）：

时序图（核心交互流程）

时序图详细描述了参与对象之间的交互顺序，是交互图的一种！在开发中用来描述单个功能详细实现的交互流程，比较接近代码级别。

Ref：PlantUML-时序图、 UML序列图总结（Loop、Opt、Par和Alt）

时序图的基本画法（天天领券频道商品流）：

@startuml
participant 运营 as op
participant 营销平台 as eos
participant DB as db
participant morefun as mf
participant "用户/h5" as h5

op -> eos: 配置频道数据（分类tab+捞月id）
eos -> db: 写入配置信息
db --> eos: return
eos --> op: return

h5 -> mf: 查询商品流分类tab和对应捞月id
mf -> db: 读出配置信息
db --> mf: return
mf --> h5: return
h5 -> mf: 通过捞月id查询商品流信息
mf -> mf: 1.通过捞月id查询spuIds；\n2.查询spu详情信息；\n3.查询spu的最低价（对应的sku+渠道）；\n4.查询spu可用的代金券列表；\n5.调用优惠算价v2。
mf --> h5: return
@enduml

组合消息的小栗子

组合消息用来解决交互执行的条件及方式，使交互描述得更加准确！

alt/else（抉择）：多个消息序列之间的互斥选择，相当于if..else..；
opt（选择）：一个可能发生的序列；
loop（循环）：多次执行消息序列；
par（并行）：多个消息序列并行执行；
break（中断）：中断循环，且可执行其它消息序列。

Loop循环栗子（导出具有获奖资格的用户）：

@startuml
participant h5 as h5
participant promoadmin as promoadmin
participant promocore as promocore

h5 -> promoadmin: 抽奖资格用户名单导出，param=activityId
promoadmin -> promoadmin: 1.活动有效性校验 \n2.加锁，lock=activityId
loop size != 0
    promoadmin -> promocore: 批量查询具有获奖资格的用户, param=activityId
    promocore --> promoadmin: return
end
promoadmin -> promoadmin: 汇总数据，生成excel
promoadmin --> h5: return
@enduml

Opt选择栗子（圣诞节送礼邀请流程）：

@startuml
actor 送礼人 as sender
actor 收礼人 as receiver
participant h5 as h5
participant 活动 as activity
participant 关系中心 as relation
participant push as push

sender -> h5: 发送邀请链接到站外
receiver -> h5: 站外打开送礼链接
h5 -> activity: 查询收礼人圣诞心愿信息
activity -> activity: 1.查询活动信息，校验
activity -> relation: 2. 绑定送礼人->收礼人的关系，status=init
relation --> activity: 返回绑定状态
activity -> activity: 3.查询收礼人圣诞心愿流水
activity --> h5: return
opt 收礼人没有创建圣诞心愿
    h5 -> activity: 收礼人创建圣诞心愿\n 1.sku信息\n 2.用户地址信息
    activity -> activity: 保存圣诞心愿流水+地址信息
    activity -> push: 给送礼人发送push提醒
    activity --> h5: return ok
end
opt 收礼人婉拒邀请
    h5 -> activity: 收礼人婉拒邀请
    activity -> relation: 更新送礼人->收礼人的关系，status=refuse
    relation --> activity: return ok
    activity --> h5: return ok
end
@enduml

用例图

用例图简单描述了用户与系统的交互，由用户、用例和关系组成！不要过于详细，在进行用例描述时还没有考虑系统的设计方案。

Ref：PlantUML-用例图、搞事情之 UML 的用例图

包含、拓展、泛化三种关系的栗子（春节麻将需求C侧用例图）：

@startuml
left to right direction
actor 用户 as user
'usecase 活动查询 as activity
user --> (活动查询)
user --> (做任务)
user --> (摸牌)
user --> (胡牌)
user --> (领奖)
(做任务) .-> (领任务): <<include>>
(做任务) .-> (完成任务): <<inclue>>
(胡牌) <|-- (指定牌胡牌)
(胡牌) <|-- (百搭牌合成胡牌)
(领奖) <.. (实物奖品登记): <<extends>>
@enduml

状态图（状态机图）

状态图描述了一个对象在生命周期内不同的状态流转！

Ref：PlantUML-状态图

简单的栗子（活动状态图）：

@startuml
state draf: 草稿
state audit: 审核中
state jude <<choice>>
state audit_reject: 审核拒绝
state audit_pass: 审核通过
state online: 上线
state offline: 下线

[*] -> draf
draf -> audit: 提交审核
audit -> jude: 审核
jude -> audit_pass: 审核通过
jude --> audit_reject: 审核拒绝
audit_reject -> draf: 重新编辑
audit_pass -> online: 上线
online -> offline: 下线
offline -> [*]
@enduml

ER图（实体关系图、数据模型图）

ER图展示出系统中涉及到的实体，以及实体间的关系，用于后续的数据库建表！

简单的ER图：

更详细的ER图：

代码员老王要学会画图哇

前言