Mermaid Live Editor https://mermaid-js.github.io/ https://www.yuque.com/yuque/help/mermaid Markdown 进阶技能：用代码画流程图（编程零基础也适用） Markdown 高级玩法：用代码画时序图

Mermaid支持下面的方式：

  • 实线箭头：A–>B
  • 实线无箭头：A–B
  • 无箭头实线上带文本：A–text–B
  • 实线箭头带文本：A–>|text|B 或者 A–text–>B
  • 虚线箭头：A-.->B
  • 虚线箭头带文本：A-.text.->B
  • 粗线箭头：A==>B

  • 粗线箭头带箭头：A==text==>B

    1. graph TD
    2.   light[LightZhan]
    3.   url[lightzhan.xyz]
    4.   QdownUrl[访问LightZhan博客Qdown页面]
    5.   Qdown((Qdown))
    6.   function[功能]
    7.   Qdown-->|作者|light 
    8.   light--个人主页-->url
    9.   Qdown-->function
    10.   Qdown-->QdownUrl
    11.   function1[极速下载]
    12.   function2[磁链/BT下载]
    13.   function3[迅雷下载]
    14.   function5[下载体验]
    15.   function4[Http/Https/FTP/SFTP]
    16.   function-.功能1.->function1
    17.   function-.功能2.->function2
    18.   function-.功能3.->function3
    19.   function-.功能4.->function4
    20.   function-.更多功能.->function5
    21.   annocement[本文首发于lightzhan.xyz,允许规范转载]

    Mermaid 绘制流程图和时序图 - 图1

    Mermaid支持下面类型的箭头和线段：

  • 实线并且没有箭头：A->B:text

  • 虚线没有箭头：A–>B:text
  • 实线带箭头：A->>B:text
  • 虚线带箭头：A–>>B:text
  • 实线并且在终点带一个x：A-xB:text
  • 虚线并且在终点带一个x：A–xB:text
    1. sequenceDiagram
    2. A->>B:Qdown是啥？
    3. B-->>A:Qdown是全功能的下载软件！
    4. A->>B:哪里可以下载呀？
    5. B-->>A:http://lightzhan.xyz/index.php/qdown/
    Mermaid 绘制流程图和时序图 - 图2

    流程图

    常用符号及含义

    流程图的符号有很多，但常用的也就几个。
  1. 圆角矩形：表示开始和结束
    1. graph TB
    2.  A(开始)
    Mermaid 绘制流程图和时序图 - 图3
  2. 矩形：表示过程，也就是整个流程中的一个环节
    1. graph TB
    2.  B[打开冰箱门]
    Mermaid 绘制流程图和时序图 - 图4
  3. 单向箭头线段：表示流程进行方向
    1. graph TB
    2.  A(开始)-->B[打开冰箱门]
    Mermaid 绘制流程图和时序图 - 图5
  4. 菱形：表示判断、决策
    1. graph TB
    2.  A[把大象放进去] --> B{"冰箱小不小？"}
    3.  B -->|不小| C[把冰箱门关上]
    4.  B -->|小| D[换个大冰箱]
    Mermaid 绘制流程图和时序图 - 图6
  5. 圆形：表示连接。为避免流程过长或有线段交叉，可将流程切开，圆形即相当于切口处的连接头（成对出现）
    1. graph LR
    2.  A(开始)-->B[打开冰箱门]-->C[把大象放进去]-->D((连接A))
    3.  E((连接A))-->F[关闭冰箱门]-->G(开始)
    Mermaid 绘制流程图和时序图 - 图7
  6. 另外还有嵌入在以上图形中的描述文本

    图示布局方向

    在画流程图时，最常用的布局方向是
  • 从上向下
  • 从左向右

当然也允许从下向上画、从右向左画，但是这两种很少见。
每次作图时，代码以 graph <布局方向> 开头，如：

  1. graph TB
  2.     ...
  3.     ...

TB（Top Bottom）表示从上向下布局，另外三种是

  • BT
  • LR（Left Right）
  • RL

工具

  1. 免费 Markdown 编辑器 Typora，非常好用且美观。其自带 mermaid 画图扩展。
  2. 如果你不想用 Markdown，可以选择网页版 mermaid 编辑器，免费且无需注册。链接：https://dwz.cn/hOMIoH4w

    节点的画法

    接下来，来画之前介绍过的四种节点（圆形、矩形、菱形、圆形）。四种节点对应四行代码，请仔细观察代码差异，并与对应的节点相比较。
    1. graph TB
    2.  A(开始)    
    3.  B[打开冰箱门]    
    4.  C{"冰箱小不小？"}    
    5.  D((连接))
    Mermaid 绘制流程图和时序图 - 图8看出玄机了吗？其实很简单，就是
  • 不同种类的括号对应不同的节点图形
  • 括号中的文字就是显示在节点中的描述

  • A B C D 这些字符是为节点取的名字，这个名字可以在之后反复利用（在编程里这相当于定义变量）

    线段的画法

    前面是节点的画法，再来看下线段的画法。线段用于连接节点，所以请结合刚才所学的节点一同来看：

    1. graph TB
    2.   A[把大象放进去] --> B{"冰箱小不小？"}
    3.   B -->|不小| C[把冰箱门关上]
    4.   B -->|小| D[换个大冰箱]

    Mermaid 绘制流程图和时序图 - 图9上述 -->是带箭头线段，-->|不小| 和 -->|小| 是加了描述文字的带箭头线段。它们都位于两个节点之间。
    好了，要学的内容就是这些，意不意外！东西不多也不复杂，只要根据图案联想记忆即可。稍加练习后便能运用自如。

    额外提示

  • 上一个代码示例中，B{"冰箱小不小？"} 这里的描述文字加了引号，是因为其中包含特殊字符 ？，用引号包裹防止出错

  • 为节点取名为 A B C 不太合适，因为节点很多时容易产生混淆，不方便后续使用和阅读（编程时命名的重要性）。建议起有意义的名字
  • 除上述带箭头线段 --> 外，还有带箭头虚线线段 -.->、带箭头加粗线段 ==>、不带箭头线段 ---

    完整示例

    完成了上面的教程后，来看个完整例子体会下：
    1. graph TB
    2.   Start(开始) --> Open[打开冰箱门]
    3.   Open --> Put[把大象放进去]
    4.   Put[把大象放进去] --> IsFit{"冰箱小不小？"}
    5.   IsFit -->|不小| Close[把冰箱门关上]
    6.   Close --> End(结束)
    7.   IsFit -->|小| Change[换个大冰箱]
    8.   Change --> Open
    Mermaid 绘制流程图和时序图 - 图10

    时序图

    Mermaid 绘制流程图和时序图 - 图11

    参与者

    传统时序图概念中参与者有角色和类对象之分，但这里我们不做此区分，用参与者表示一切参与交互的事物，可以是人、类对象、系统等形式。中间竖直的线段从上至下表示时间的流逝。
    画法：
    1. sequenceDiagram
    2.   participant 客户端
    3.   participant 服务器

    sequenceDiagram 为每幅时序图的固定开头
    participant <参与者名称> 声明参与者，语句次序即为参与者横向排列次序。如后续示例所示。

Mermaid 绘制流程图和时序图 - 图12

消息

交互时一方对另一方的操作（比如接口调用）或传递出的信息。用单向箭头来表示——实线代表主动发出消息；虚线代表响应；末尾带「X」代表异步消息，无需等待回应。
画法：

  1. sequenceDiagram
  2.     participant 老板L
  3.     participant 员工A
  4.     老板L ->> 员工A : “在这里我们是兄弟！”
  5.     老板L -x 员工A : 画个饼
  6.     员工A -->> 老板L : 怯怯地鼓掌

消息语句格式为：<参与者> <箭头> <参与者> : <描述文本>。 其中<箭头> 的写法有：

  • ->>：显示为实线箭头（主动发出消息）
  • -->>：显示为虚线箭头（响应）
  • -x：显示为末尾带「X」的实线箭头（异步消息）

注：participant <参与者名称> 这句其实可以省略，省略后参与者横向排列的次序，由消息语句中参与者出现的次序决定。如后续示例所示。

Mermaid 绘制流程图和时序图 - 图13

激活框

从消息接收方的时间线上标记一小段时间，表示对消息进行处理的时间间隔。

画法如下，注意体会箭头符号后的 + 和 - 的使用方法和效果，它们相当于激活框的开关：

  1. sequenceDiagram
  2.     老板M ->> + 员工B : “不仅996，还要669！”
  3.     员工B -->> - 老板M : 怯怯地鼓掌
  4.     老板M ->> + 员工B : “悔创本司！”
  5.     员工B -->> - 老板M : 怯怯地鼓掌

Mermaid 绘制流程图和时序图 - 图14

注解

画法：

  1. sequenceDiagram
  2.     Note left of 老板L : 对脸不感兴趣
  3.     Note right of 老板M : 对钱不感兴趣
  4.     Note over 老板L,老板M : 对996感兴趣

Mermaid 绘制流程图和时序图 - 图15

循环（loop）

在条件满足时，重复发出消息序列。（相当于编程语言中的 while 语句。）
画法： 

  1. sequenceDiagram
  2.     网友 ->> + X宝 : 网购钟意的商品
  3.     X宝 -->> - 网友 : 下单成功
  4.     loop 一天七次
  5.         网友 ->> + X宝 : 查看配送进度
  6.         X宝 -->> - 网友 : 配送中
  7.     end

Mermaid 绘制流程图和时序图 - 图16

选择（alt）

在多个条件中作出判断，每个条件将对应不同的消息序列。（相当于 if 及 else if 语句。）
画法：

  1. sequenceDiagram    
  2.     土豪 ->> 取款机 : 查询余额
  3.     取款机 -->> 土豪 : 余额
  4.     alt 余额 > 5000
  5.         土豪 ->> 取款机 : 取上限值 5000 块
  6.     else 100 < 余额 < 5000
  7.         土豪 ->> 取款机 : 有多少取多少
  8.     else 余额 < 100
  9.         土豪 ->> 取款机 : 退卡
  10.     end
  11.     取款机 -->> 土豪 : 退卡

Mermaid 绘制流程图和时序图 - 图17

可选（opt）

在某条件满足时执行消息序列，否则不执行。相当于单个分支的 if 语句。
画法：

  1. sequenceDiagram
  2.     老板们 ->> 员工们 : 开始实行996
  3.     opt 永不可能
  4.         员工们 -->> 老板们 : 拒绝
  5.     end

Mermaid 绘制流程图和时序图 - 图18

并行（Par）

将消息序列分成多个片段，这些片段并行执行。
画法：

  1. sequenceDiagram
  2.     老板C ->> 员工C : 开始实行996
  3.     par 并行
  4.         员工C ->> 员工C : 刷微博
  5.     and
  6.         员工C ->> 员工C : 工作
  7.     and
  8.         员工C ->> 员工C : 刷朋友圈
  9.     end
  10.     员工C -->> 老板C : 9点下班

Mermaid 绘制流程图和时序图 - 图19