MarkDown时序图

一、概述

在typora中，实现时序图是基于mermaid-js。

mermaid-js

mermaid-js - 时序图

二、语法

• 标题(title)

  title: 标题
  

• 角色(participant)

  participant client
  

• 交互

  类型	描述
  ->	实线
  –>	虚线
  ->>	实线 + 箭头（同步请求）
  –>>	虚线 + 箭头（同步返回）
  -x	实线 + 开放箭头（异步请求）
  –x	虚线 + 开放箭头（异步返回）
  +	激活角色
  -	灭活角色

• 注释(Notes)**

  right of : 角色右侧

  Left of : 角色左侧

  over : 跨多个角色

  participant client
  Note left of client: third-party app
  

• 高亮背景

  rect rgb(0, 255, 0)
  ... content ...
  end
  

三、案例

sequenceDiagram
  title: OAuth2.0
  participant client
	participant Resource Owner
	participant Authorization server
	participant Resource Server
	
	Note left of client: Third-party app
	
	rect rgb(0, 0, 255, .1)
	 client->>+Resource Owner:(A) Authorization Request
	 Resource Owner-->>-client:(B) Authorization Grant
	end
	 
	rect rgb(0, 0, 255, .1)
	 client->>+Authorization server:(C) Authorization Grant
	 Authorization server-->>-client:(D) Access Token
	end
	 
	rect rgb(0, 0, 255, .1)
	 client-->>+Resource Server:(E) Access Token
	 Resource Server-->>-client:(F) Protected Resource
  end