时序图绘制

最近写文章时，需要绘制时序图。
这以往都是用visio绘制，麻烦且容易出错。经过调研，发现可以利用类似markdown语法的mermaid语言，进行语义化绘制，非常方便。

上面这个时序图，如果用visio绘制可能得需要一个多小时，但用mermaid，也就是5分钟的工作量，代码如下：

sequenceDiagram
    autonumber
    participant D as DNS服务器  
    participant B as 浏览器  
    participant S as Web服务器
    
    B->D: DNS查询
    note over B,D: 获取IP地址  
    
    B->S: TCP握手
    Note left of B: 建立TCP/IP连接
    
    B->S: TLS协商
    Note left of B: 建立安全连接
    
    loop 交互  
        B->S: HTTP请求与响应
        Note left of B: 获取HTML/JavaScript/CSS等数据
        B->B: 浏览器渲染
        Note left of B: 完成页面绘制    
    end
 

更加难得的是，Obsidian原生就支持mermaid，用起来格外方便，可惜目前简书还不支持。