MarkDown时序图

电玩女神 2023-01-13 14:58 170阅读 0赞

### 文章目录 ###

*   *   *  一、概述
         *  二、语法
         *  三、案例

### 一、概述 ###

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

[mermaid-js][]

[mermaid-js - 时序图][mermaid-js -]

### 二、语法 ###

*  **标题(title)**
    
        title: 标题
 *  **角色(participant)**
    
        participant client
 *  **交互**
    
    <table> 
     <thead> 
      <tr> 
       <th>类型</th> 
       <th>描述</th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr> 
       <td>-&gt;</td> 
       <td>实线</td> 
      </tr> 
      <tr> 
       <td>–&gt;</td> 
       <td>虚线</td> 
      </tr> 
      <tr> 
       <td>-&gt;&gt;</td> 
       <td>实线 + 箭头（同步请求）</td> 
      </tr> 
      <tr> 
       <td>–&gt;&gt;</td> 
       <td>虚线 + 箭头（同步返回）</td> 
      </tr> 
      <tr> 
       <td>-x</td> 
       <td>实线 + 开放箭头（异步请求）</td> 
      </tr> 
      <tr> 
       <td>–x</td> 
       <td>虚线 + 开放箭头（异步返回）</td> 
      </tr> 
      <tr> 
       <td>+</td> 
       <td>激活角色</td> 
      </tr> 
      <tr> 
       <td>-</td> 
       <td>灭活角色</td> 
      </tr> 
     </tbody> 
    </table>
 *  注释(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

clientResource OwnerAuthorization serverResource ServerThird-party app(A) Authorization Request(B) Authorization Grant(C) Authorization Grant(D) Access Token(E) Access Token(F) Protected ResourceclientResource OwnerAuthorization serverResource ServerOAuth2.0

[mermaid-js]: https://github.com/mermaid-js/mermaid
[mermaid-js -]: http://mermaid-js.github.io/mermaid/#/sequenceDiagram