2021-03-16 使用 Typora之画图

流程图

• 先输入```mermaid
  graph 关键字就是声明一张流程图

TD 表示从上到下
LR 表示从左到右

graph TD;
    A-->B;
    A-->C;
    B-->D;

graph LR;
		A[方形]-->B(圆角)
		B-->C{条件a}
		C-->|a=1|D结果1
		C-->|a=2|E[结果2]

标准流程图

• 输入```
• flow

st=>start: 开始框
op=>operation: 处理框
cond=>condition: 判断框(是或否?)
sub1=>subroutine: 子流程
io=>inputoutput: 输入输出框
e=>end: 结束框
st->op->cond
cond(yes)->io->e
cond(no)->sub1(right)->op

横向

st=>start: 开始框
op=>operation: 处理框
cond=>condition: 判断框(是或否?)
sub1=>subroutine: 子流程
io=>inputoutput: 输入输出框
e=>end: 结束框
st(right)->op(right)->cond
cond(yes)->io(bottom)->e
cond(no)->sub1(top)->op

时序图

• 先输入```mermaid (或）sequence
• ->> 代表实线箭头，–>> 则代表虚线箭头
• -> 直线，–>虚线
• 使用sequenceDiagram 则不使用``sequence

sequenceDiagram
    Alice->>John: Hello John, how are you?
    John-->>Alice: Great!

sequenceDiagram
		对象A->对象B:对象B你好吗（请求）
		Note right of 对象B:对象B的描述（提示）
		Note left of 对象A:提示
		对象B-->>对象A:我很好（响应）
		对象A->>对象B:你确定？

sequenceDiagram
		title:标题：复杂使用
		对象A->>对象B:对象B你好吗（请求）
		Note right of 对象B:对象B的描述（提示）
		Note left of 对象A:提示
		对象B-->>对象A:我很好（响应）
		对象B->>对象C:你好吗？
		对象C-->>对象A: B找我了
		对象A->>对象B:你确定？
		note over 对象C,对象B:朋友
		participant D
		note right of D:没人陪我

sequenceDiagram
		participant A
		participant B
		participant C
		A->>C:hello
		loop health
			C->>C:no 
		end
		Note right of C:you should eat<br/> doctor
		B-->>A:nice
		C->>B:how are you?
		B-->>C:great

sequenceDiagram
		participant A
		participant B
		participant C
		participant D
		title:"练习时序图"
		A->>B:request
		B->>B:verify sign
		B->>C:123
		C-->>B:321
		B->>C:456
		C->>C:code
		C->>D:789
		D-->>B:987
		alt yes
		Note right of B:yes的结果
		else no
		B-->>D:login
		D-->>B:login success
		end
		B->>B:加密
		B-->>A:return 

sequenceDiagram
		title:时序图例子
		Alice->>Alice:自言自语
		Alice-->>John:hello john,
		%% over 可以用于单独一个角色上，也可以用于相邻的两个角色间：
		note over Alice,John:friend
		
		%% loop 后跟循环体说明文字
		loop healthcheck
			John-->>John:Fight agaist hypochondra
		end
		
		note right of John: Rational
		
		John-->>Alice:Great!
		John->>Bob:How about you?
		
		%% 控制焦点：用来表示时序图中对象执行某个操作的一段时间
		%% activate 角色名：表示激活控制焦点
		activate Bob
		Bob-->>John:Jolly good!
		%% deactivate 角色名 表示控制焦点结束
    deactivate Bob
    
    Alice->>+Bob: Hello Bob, how are you?
    
    rect rgb(175, 255, 212)
    alt is sick
    Bob-->>Alice: Not so good :(
    else is well
    Bob-->>Alice: Feeling fresh like a daisy
    end
    opt Extra response
    Bob-->>Alice: Thanks for asking
    end
    end
    
    loop communicating
        Alice->>+John: asking some questions
        John-->>-Alice: answer 
    end
    
    par Alice to John
      Alice->>John: Bye
    and Alice to Bob
      Alice->>Bob: Bye
    end
		Alice-xJohn: 这是一个异步调用
    Alice--xBob: 这是一个异步调用

参考

使用 Typora 画图（类图、流程图、时序图）https://zhuanlan.zhihu.com/p/172635547

typora画流程图、时序图(顺序图)、甘特图https://jingyan.baidu.com/article/48b558e3035d9a7f38c09aeb.html

用Typora画饼图、时序图、流程图、UML图和状态图https://blog.csdn.net/liuchunming033/article/details/106034799

快速学习时序图：时序图简介、画法及实例
http://www.woshipm.com/ucd/607593.html

UML时序图(Sequence Diagram)学习笔记https://blog.csdn.net/fly_zxy/article/details/80911942

快速入门UML时序图
https://blog.csdn.net/qiao_yihan/article/details/82791492