markdown画图之二：时序图（mermaid）

欢迎关注公众号，常用工具和技术知识分享

markdown时序图基本语法结构：

```mermaid
	    sequenceDiagram
	    participant 别名 as 对象显示名（全部直接用显示名时可以不写）
	    顺序增加图表中消息
	    （可以加入标签提示）
	```

连接方式

【对象1】【箭头类型】【对象2】 : 消息内容

一共6种箭头类型的样式：

• 实线：->
• 虚线：- ->
• 带箭头的实线：->>
• 带箭头的虚线：- ->>
• 带x的实线：-x
• 带x的虚线：- -x

常用语法

激活：

第一种是显示通过语法实现，语法如下，会在指定对象的消息中增加；第二种直接在对象前面增加加减号（开始时用加号“+”，结束时用减号“-”），则在加号对应的对象上开始，减号对应的时间结束

#直接激活
开始：activate 【对象】
结束：deactivate 【对象】

#符号激活
+对象
-对象

1）注释   

Note 【位置】 【对象】

注释显示的位置有三个，以被标记的对象中心为参考系，基于横跨多个时，可以都逗号分隔，如示例：

• right of
• left of
• over

2）循环

loop 循环说明 

【消息流】

end

3）条件

alt 条件说明
【消息流】
else
【消息流】
end


opt 条件说明
【消息流】
end

示例说明

```mermaid
	    sequenceDiagram
	    participant 登录 as 前端登录
	    participant Nginx as Nginx服务器
	    participant 后端服务 as  后端服务器   
	    登录 ->> +Nginx: 登录，有权限不?
	    Nginx-->> 后端服务: 验证通过吗？
	    activate Nginx
	    
	    Note over Nginx,后端服务: 可以访问吗<br/>能放行不？.
	    deactivate Nginx
	    loop 多试几次吧
	    Nginx-->>后端服务: 再验证一遍
	    后端服务-->>Nginx: 通过吧
	    end
	    登录-->>Nginx: ok
	    Nginx->>后端服务: 通行
```

 

实际效果图