用例图

• mermaid 12.0 起原生支持用例图, 用 usecase-beta 关键字(语法: usecase):

  • actor ID("显示名") 画小人, 标识符只能用 [A-Za-z0-9_], 中文要写显示名里

  • UC("用例") 是椭圆用例, UC[用例] 是矩形用例

  • systemBoundary 边界ID["标题"] ... end 表示模块(系统边界)

  • 关联用无向的 A -- B; 另有 -->, --|>(泛化), ..> : include / ..> : extend

  • 默认用 ELK 布局(不用 dagre), redux-color 主题 + neo 外观

中心发散型

5 个 actor 放中间一排, 8 个模块分上下两排(上 4 下 4), 每个 actor 关联 3~4 个用例。

ELK 和 dagre 一样按边的方向分层: 谁写在前谁排在上一层。所以上排模块写成 UC -- actor, 下排模块写成 actor -- UC, actor 就落在中间一层, 关联线向四周发散。

布局结果宽高比约 1.9:1, 网页上不会出现过宽压扁的问题。

        usecase-beta
direction TB
%% 上排 4 个业务模块
systemBoundary UserModule["用户管理模块"]
  Login("注册与登录")
end
systemBoundary GoodsModule["商品管理模块"]
  Browse("浏览与搜索商品")
end
systemBoundary OrderModule["订单管理模块"]
  Order("下单与退换货")
end
systemBoundary PayModule["支付管理模块"]
  Pay("发起支付")
end
%% 中间的 5 个 actor
actor User("普通用户")
actor Guest("访客")
actor Admin("管理员")
actor Ops("运营人员")
actor Auditor("审核员")
%% 下排 4 个支撑模块
systemBoundary MsgModule["消息通知模块"]
  Msg("发送与接收消息")
end
systemBoundary StatsModule["数据统计模块"]
  Stats("查看统计报表")
end
systemBoundary PermModule["权限管理模块"]
  Perm("分配角色权限")
end
systemBoundary ConfModule["系统设置模块"]
  Conf("修改系统配置")
end
%% 上排模块: 写在前面的排在上一层
Login -- User
Login -- Admin
Login -- Guest
Browse -- User
Browse -- Ops
Browse -- Guest
Order -- User
Order -- Auditor
Pay -- User
%% 下排模块: actor 写在前面
Admin -- Stats
Admin -- Perm
Admin -- Conf
Auditor -- Msg
Auditor -- Stats
Auditor -- Perm
Ops -- Msg
Ops -- Stats
Ops -- Conf
Guest -- Stats