UML那些事儿

[FrankKai]

在写前端组件的过程中，需要一个清晰的可视化的将组件思路写出来的工具。
由于绘画水平不高字也写得不好看，而且经常性的需要修改，所以用工具来做这个事情时很好的。
Webstorm有一个Diagrams->Show Diagram 但是实在是有些鸡肋，仅仅是组件 require，import 的引用关系。
ProcessOn的功能倒是也挺强大，以前也绘制过两个，效果还算可以。
由于对UML也不熟，但是我看大佬们用这个东西画的图逻辑还挺清晰，其中貌似还蕴藏了一些知识点，从软件开发的角度去学习是很值得的。

学习工具：
vscode 插件 PlantUML
在线工具：http://www.plantuml.com/plantuml/uml/SyfFKj2rKt3CoKnELR1Io4ZDoSa70000
学习资料：
http://plantuml.com/zh/index
https://www.uml-diagrams.org/use-case-actor.html

UML中一些重要的对象

• Actor

UML使用问题汇总

不能使用openiconic怎么办？http://plantuml.com/zh/graphviz-dot

[FrankKai]

时序图

基础

• -> --> <- <--串联消息传递参与者
• 参与者声明：actor代表了简画人，participant代表了参与者，entity代表实体，control代表控制，database代表数据库
• 想在箭头线上加字怎么办？foo -> bar : [text] 例如 jack -> rose : I love you
• 可以使用 名称和十六进制HEX值改变背景色，例如actor jack #red，#cccccc #ccc ，RGB和RGBA不支持。可以使用colors 查看支持的颜色。
• 可以使用as重命名。 actor jack as j，类似一个alias或者一个对象的引用。
• 可以使用order 赋予权值控制参与者顺序foo order 30 bar order 20 baz order 10，权值越大越在后。
• 可以在消息类型后面增加note left或者note right增加文字注释。 note left: this is a first note
• 可以为节点participant增加注释。note left of，note right of或note over在节点的某个位置增加注释，需要在尾部添加end note表示结束。

实践

适用于端到端通信，http，https，mqtt等通信协议。

HTTP(S)

基于axios的负责前后端通信的httpclient。

• 跨系统调用
• cookie失效重定向
• 前端静态文件热更新

MQTT

• PC与Server的消息订阅发布
• PC与Server消息回执推送机制

[FrankKai]

架构图

用UML可以绘制架构图。