Markdown 进阶技能：用代码画时序图

这篇文章将为大家介绍如何以写代码的方式画时序图（也叫顺序图），同时也会介绍一些时序图基础知识。

相比于使用画图工具拖拽画图，用代码画图有什么好处？

• 首先，这种方式非常轻便，无需安装复杂的画图应用。Typora 等多种 Markdown 编辑器自带有画图扩展（这也是 Markdown 能画图的原因，因为用到了扩展）
• 其次，拖拽画图时需要考虑图形尺寸和对齐问题，而代码画图不需要考虑这些，一切均自动调整
• 另外，想象下你在写文档时，随手一段代码就插入了一幅时序图，这多么酷炫！

话不多说，先来看看用代码画的时序图的效果。如下图是小程序登陆过程中，小程序、服务器、微信服务器三者交互的时序图：

而画这幅图只用了很少并且很简单的代码：

sequenceDiagram
    小程序 ->> 小程序 : wx.login()获取code
    小程序 ->> + 服务器 : wx.request()发送code
    服务器 ->> + 微信服务器 : code+appid+secret
    微信服务器 -->> - 服务器 : openid
    服务器 ->> 服务器 : 根据openid确定用户并生成token
    服务器 -->> - 小程序 : token

看了这个心动了没有？学起来吧！

工具

君欲善其事，必先利其器。想要用代码画图，就得有支持这种方式的画图工具。这里介绍两款工具：

1. 免费 Markdown 编辑器 Typora，非常好用且美观。其自带 mermaid 画图扩展。

   在用 Typora 编写 Markdown 文本时，插入这样一个代码块：

   ```mermaid
   ……时序图代码……
   ```

   其中时序图的代码便会自动被 mermaid 解析和渲染。