时间管理、头脑风暴、阅读、会议记录神器-Mermaid

6,220 阅读9分钟

这是我参与更文挑战的第4天,活动详情查看: 更文挑战

缘起

看到Mermaid是因为我开始用掘金编辑器写文章,日常我会用xmind或者流程图来记录,甚至我还徒手画过xmind。用结构图来梳理内容,更直观,清晰也有更自己得思考,俗话说的好千万字抵不过一张图。看到Mermaid我立马就爱了,用代码生成结构图,其实就相当与手写笔记的过程。这篇文章也就应运而生 image.png

你能得到什么

  1. 你可以用代码生成任意你想要的流程图状态图甘特图时序图饼图类图关系图旅程图
  2. 不管在阅读、学习知识、会议纪要、头脑风暴、时间管理这绝对是一款利器,提高学习效率,梳理学习思路在画图的过程中二次知识深化告别点点点,一路coding 一路爽
  3. 历史代码可追踪,因为这是代码哇

Mermaid是什么

mermaid 是一个 JS 实现的一个三方库

浅显的理解就是 生成图表 的 “Markdown语法” 用纯文本格式编写图表

在哪里可以使用Mermaid

<body>
  <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
</body>

图表类型

  • flowchart 流程图

    image.png

  • 时序图

    image.png

  • 甘特图

    image.png

  • 类图

    image.png

  • 状态图

    image.png

  • 关系图

    image.png

  • 旅程图

    image.png

  • 饼图

    image.png

Mermaid - 流程图

基本结构

  1. 圆角矩形 表示“开始”与“结束”
  2. 矩形表示行动方案、普通工作环节用
  3. 菱形表示问题判断或判定(审核/审批/评审)环节
  4. 用平行四边形表示输入输出
  5. 箭头代表工作流方向

流程图与节点的创建

id 存在的意义 当节点内多文字过多 节点与节点之间的关系复杂 即可用id指代 当前节点即可

  • 流程图声明
    • 关键字: graph
    • 源代码
          ```mermaid
          graph             //流程图声明
          S[声明一个流程图] // 节点创建 Id[节点内容]
          
          ```
      
    • 生成结果 image.png
  • 节点内容
    • 节点内容为纯文本:
      • 语法:id(纯文本)

      • 源代码

            ```mermaid
            graph
            s(节点为纯文本不包含特殊字符)
            ```
        
      • 生成结果

        image.png

    • 内容包含特殊字符
      • 语法:id("内容+特殊字符")

      • 源代码

            ```mermaid
           graph
           s("开始(START)")
           ```
        
      • 生成结果

        image.png

    • 内容包含转义字符
      • 语法:id(":转义字符;")
      • 源代码
            ```mermaid
           graph
           s("开始:#9829;")
           ```
        
      • 生成结果 image.png

流程图布局

流程图默认的布局为的自上到下

image.png

    ```mermaid
    graph 
    s[开始]-->
    e[结束]
    ```
  • 自上向下
    • 语法:

      • graph BT
      • graph TD
    • 源代码:

        ```mermaid
          graph TD
          s[开始]-->
          e[结束  
        ```
      
       ```mermaid
         graph TB
         s[开始]-->
         e[结束  
       ```
      
    • 生成结果

      image.png

  • 自下向上
    • 语法:
      • graph BT
    • 源代码:
        ```mermaid
          graph BT
          s[开始]-->
          e[结束  
        ```
      
    • 生成结果 image.png
  • 自左向右
    • 语法:

      • graph LR
    • 源代码

        ```mermaid
          graph LR
          s[开始]-->
          e[结束  
        ```
      
    • 生成结果:

      image.png

  • 自右向左
    • 语法:
      • graph RL
    • 源代码
        ```mermaid
          graph RL
          s[开始]-->
          e[结束  
        ```
      
    • 生成结果: image.png

流程图节点形状

  • 矩形
    • 语法: id[节点内容]
    • 源代码
          ```mermaid
          graph
          s[开始]
          e[结束]
          ```
      
    • 生成结果: image.png
  • 圆角矩形节点
    • 语法:id(节点内容)

    • 源代码

          ```mermaid
          graph
          s(开始)
          e(结束)id()
          ```
      
    • 生成结果:

      image.png

  • 体育场形状
    • 语法:id([内容])
    • 源代码
          ```mermaid
          graph 
          s([开始 - 体育场图]) --> e([结束 - 体育场图])
          ```
      
    • 生成结果: image.png
  • 圆柱形
    • 语法:id[(内容)]
    • 源代码
          ```mermaid
          graph 
         s[(开始 - 圆柱)] --> e[(结束 - 圆柱)]
          ```
      
    • 生成结果: image.png
  • 圆形
    • 语法:id((内容))

    • 源代码

          ```mermaid
          graph 
         s((开始 - 圆柱)) --> e((结束 - 圆柱))
          ```
      
    • 生成结果:

      image.png

  • 菱形
    • 语法:id{内容}

    • 源代码

          ```mermaid
          graph 
         s{开始 - 菱形} --> e{结束 - 菱形}
          ```
      
    • 生成结果:

      image.png

  • 六角形
    • 语法:id{{内容}}
    • 源代码
         ```mermaid
          graph 
          s{{开始 - 六角形}} --> e{{结束 - 六角形}}
          ```
      
    • 生成结果: image.png
  • 不对称
    • 语法:id>内容]

    • 源代码

          ```mermaid
          graph 
          s>开始-非对称] --> E>结束-非对称]
          ```
      
    • 生成结果:

      image.png

  • 平行四边形
    • 语法:

      • 右 id[/内容/]
      • 左 id[\内容\]
    • 源代码

         ```mermaid
          graph 
          s[\开始\] --> E[/结束/]
          ```
      
    • 生成结果:

      image.png

  • 梯形
    • 语法:id[/内容]

    • 源代码

          ```mermaid
          graph 
          s[/开始\] --> E[/结束\]
          ```
      
      
    • 生成结果:

      image.png

节点与节点之间的链接

  • 实线

    • 语法:--
    • 源代码:
          ```mermaid 
          graph LR
          s[开始] --- e[结束]
          ```
      
    • 生成效果
      graph LR
      s[开始] --- e[结束]
      
  • 虚线

    • 语法 -.-
    • 源代码
          ```mermaid 
          graph LR
          s[开始] -.- e[结束]
          ```
          
      
    • 生成效果
      graph LR
      s[开始] -.- e[结束]
      
  • 粗链接线

    • ===
    • 源代码
          ```mermaid 
          graph LR
          s[开始] === e[结束]
          ```
      
    • 生成效果
      graph LR
      s[开始] === e[结束]
      
  • 实线箭头

    • 语法 -->

    • 源代码

          ```mermaid
          graph LR
          s[开始] --> e[结束]
          ```
      
    • 生成效果:

      graph LR
      s[开始] --> e[结束]
      
  • 虚线箭头

    • 语法 -.->
    • 源代码
          ```mermaid
          graph LR
          s[开始] -.-> e[结束]
          ```
      
    • 生成效果:
      graph LR
      s[开始] -.-> e[结束]
      
  • 粗线箭头

    • 语法 ==>
    • 源代码
          ```mermaid
          graph LR
          s[开始] ==> e[结束]
          ```
          
      
    • 生成效果
         graph LR
         s[开始] ==> e[结束]
      
  • 带文字的链接线-实线

    • 语法 --内容--- 或者 --->|内容|

    • 源代码

          ```mermaid
          graph LR
          s[开始] --过程--- e[结束]
          ```
      

      或者

          ```mermaid
          graph LR
          s[开始] --->|过程| e[结束]
          ```
      
    • 生成效果:

      graph LR
      s[开始] --过程--- e[结束]
      
  • 带文字的链接线-虚线

    • 语法 -.内容.->

    • 源代码

          ```mermaid
          graph LR
          s[开始] -.过程.-> e[结束]
          ```
      
    • 生成效果:

          graph LR
          s[开始] -.过程.-> e[结束]
      
  • 带文字的链接线-实线粗线

    • 语法 ==内容==>

    • 源代码

          ```mermaid
          graph LR
          s[开始] ==过程==> e[结束]
          ```
      
    • 生成效果:

          graph LR
          s[开始] ==过程==> e[结束]
      

关系链

1. 流程关系 横向 纵向

单行

  • 源代码

        
        ```mermaid
        graph LR
        s[买菜] --走路-->P[菜市场]--付钱--> e[结束买菜]
        ```
    
  • 生成效果

    graph LR
    s[买菜] --走路-->P[菜市场]--付钱--> e[结束买菜]
    

多行

  • 源代码

        ```mermaid
            graph LR
            s[买菜] --走路-->P[菜市场]--付钱--> e[结束买菜]
            s--走路--> o[永辉超市]--付钱--> e
        ```
    
  • 生成效果

    graph LR
    s[买菜] --走路-->P[菜市场]--付钱--> e[结束买菜]
    s--走路--> o[永辉超市]--付钱--> e
    
2. 闭合关系
  • 源代码(单循环):
    
    ```mermaid
    graph LR
    s[家] --走路-->P[菜市场]--走路-->L[水果店]--走路--> j[超市]-->s
    ```
   
  • 生成效果
    graph LR
    s[家] --走路-->P[菜市场]--走路-->L[水果店]--走路--> j[超市]-->s
    
  • 源代码(多循环):
    
     ```mermaid
        graph LR
        s[买菜] --走路-->P[菜市场]--付钱--> s
        s--网上--> o[永辉超市]--付钱--> s
     ```
   
  • 生成效果
     graph LR
     s[买菜] --走路-->P[菜市场]--付钱--> s
     s--网上--> o[永辉超市]--付钱--> s
    
3. 平行与交叉关系

张三 李四 都会内卷和躺平

graph
z[张三]-->C[内卷] & D[躺平]
graph
L[李四]-->C[内卷] & D[躺平]

合并

  • 源代码
    ```mermaid
    graph
    z[张三]-->C[内卷]
    z-->D[躺平]
    L[李四]-->C[内卷] 
    L-->D

    ```
graph
z[张三]-->C[内卷]
z-->D[躺平]
L[李四]-->C[内卷] 
L-->D

更简易的写法 只需要一行

  • 源代码
    ```mermaid
    graph
    z[张三] & L[李四]-->C[内卷] & D[躺平]
    ```
  • 生成效果
graph
z[张三] & L[李四]-->C[内卷] & D[躺平]
4. 控制连接长度
  • 源代码
    ```mermaid
    graph
    z[张三]-->X{选择躺平还是内卷}
    x--内卷-->Y[努力]
    Y--努力-->R[重新思考]
    R-->X
    X-->|躺平|N[喝快乐水]
    ```
graph
z[张三]-->X{选择躺平还是内卷}
x--内卷-->Y[努力]
Y--努力-->R[重新思考]
R-->X
X-->|躺平|N[喝快乐水]

上图可得当角色选择躺平得逻辑不是预期得展示 需要调整 选择增加躺平得长度 逻辑即可正确

  • 源代码
    ```mermaid
graph
z[张三]-->X{选择躺平还是内卷}
x--内卷-->Y[努力]
Y--努力-->R[重新思考]
R-->X
X--->|躺平|N[喝快乐水] //增加长度
graph
z[张三]-->X{选择躺平还是内卷}
x--内卷-->Y[努力]
Y--努力-->R[重新思考]
R-->X
X--->|躺平|N[喝快乐水]

逻辑上 躺平与重新思考并不是平行关系 理想状态 选择躺平长度大于选择内卷 可用----> 链接线会增加2个层级的长度

  • 源代码:
        ```mermaid
        graph
        z[张三]-->X{选择躺平还是内卷}
        x--内卷-->Y[努力]
        Y--努力-->R[重新思考]
        R-->X
        X--躺平---->N[喝快乐水]
        ```
    
graph
z[张三]-->X{选择躺平还是内卷}
x--内卷-->Y[努力]
Y--努力-->R[重新思考]
R-->X
X--躺平---->N[喝快乐水]

可用----> 链接线会增加3个层级的长度 一下是各个类型连接线增加层级长度语法

增加层级长度123
实线------------
带箭头的实线-->--->---->
粗实线============
带箭头的粗实线==>===>====>
虚线-.--..--...-
带箭头的虚线-.->-..->-...->

子图表 subgraph

  • 基本语法
graph
    节点关系
    subgraph title //子图表的名称
    子图表的节点关系
    end //子图标结束标志
  • 源代码
    ```mermaid
    graph TB
        c1-->a2
        subgraph 表1
        a1-->a2
        end
        subgraph 表2
        b1-->b2
        end
        subgraph 表3
        c1-->c2
        end
    ```

  • 生成效果
graph TB
    c1-->a2
    subgraph 表1
    a1-->a2
    end
    subgraph 表2
    b1-->b2
    end
    subgraph 表3
    c1-->c2
    end

交互

为节点添加事件 以及点击跳转 这个现在还不是很好用

  • 语法:
     var callback = function(){
          alert('A callback was triggered');
      }
    
  • 源代码:
        ```mermaid
            graph LR;
                A-->B;
                B[跳转百度]-->C;
                C-->D;
                click A callback "Tooltip for a callback"
                click B "http://www.baidu.com" "This is a tooltip for a link"
                click A call callback() "Tooltip for a callback"
                click B href "http://www.github.com" "This is a tooltip for a link"
        ```
    
  • 生成效果
    graph LR;
        A-->B;
        B[跳转百度]-->C;
        C-->D;
        click A callback "Tooltip for a callback"
        click B "http://www.baidu.com" "This is a tooltip for a link"
        click A call callback() "Tooltip for a callback"
        click B href "http://www.github.com" "This is a tooltip for a link"
    

注释

  • 语法 %%

  • 源代码

        ```mermaid
        graph LR
        %% this is a comment A -- text --> B{node}
           A -- text --> B -- text2 --> C
        ```
    
  • 生成效果

    graph LR
    %% this is a comment A -- text --> B{node}
       A -- text --> B -- text2 --> C
    

添加样式

方式1

我们需要给开始和结束添加样式

  • 语法: style id key:value,key:value
  • 源代码:
        ```mermaid
            graph LR
            s["开始(实线边框,4px,边框颜色:#007fff 掘金蓝 ,背景色:red)"]
            e["结束(虚线边框,4px,边框颜色:red,背景色:#007fff 掘金蓝 文本颜色为白色)"]
            style s  fill:red ,stroke:#007fff,stroke-width:4px
            style e  fill:#007fff,stroke:red,stroke-width:4px,stroke-dasharray: 5 5,color:#fff
        ```
    
  • 生成效果
        graph LR
        s["开始(实线边框,4px,边框颜色:#007fff 掘金蓝 ,背景色:red)"]
        e["结束(虚线边框,4px,边框颜色:red,背景色:#007fff 掘金蓝 文本颜色为白色)"]
        style s  fill:red ,stroke:#007fff,stroke-width:4px
        style e  fill:#007fff,stroke:red,stroke-width:4px,stroke-dasharray: 5 5,color:#fff
    

方式2 类

    1. 定义样式 class
    • 语法:classDef className 样式定义
    1. 应用 :::classname
    • 源代码:
           ```mermaid
          graph LR
          s[开始]:::ownstyle-->e[结束]
          classDef ownstyle fill:#007fff,stroke:red,stroke-width:4px,stroke-dasharray: 5 5,color:#fff
          ```
      
    • 生成效果
      graph LR
      s[开始]:::ownstyle-->e[结束]
      classDef ownstyle fill:#007fff,stroke:red,stroke-width:4px,stroke-dasharray: 5 5,color:#fff
      
      

方式3 css class形式添加样式

  • 定义

       <style>
            .cssClass > rect{
                fill:red;
                stroke:#FFFF00;
                stroke-width:4px;
            }
        </style>
    
  • 实例: 源代码

        ```mermaid
            graph LR;
            A-->B[AAA<span>BBB</span>];
            B-->D;
            class A cssClass;
        ```
    

    生成效果:

          graph LR;
          A-->B[AAA<span>BBB</span>];
          B-->D;
          class A cssClass;
    

Mermaid - 时序图(序列图)

时序图又名序列图是UML交互图的一种 
主要用来表示对象之间发送消息的时间顺序

基本结构

  1. 角色 Actor 系统角色 可是是人或者其他系统子系统
  2. 对象 Object 交互过程中扮演的角色 一般位于时序图顶部
  3. 生命线 Lifeline 生命线代表时序图中的对象在一段时期内的存在
  4. 控制焦点 Activation 控制焦点代表时序图中的对象执行一项活动的时期
  5. 消息 Message 定义交互和协作中交换信息的类 学习流程图的时候还能明白点,到了时序图好像都是没有听过的词汇 不要慌张 我们还是一边看一遍做就会明白其中的含义可以跳过

时序图的创建

  • 时序图声明
    • 关键字:sequenceDiagram
    • 源代码:
          ```mermaid
              sequenceDiagram
          ```
      
    • 生成效果:
          sequenceDiagram 
      
  • 参与者
    • 关键字participant
    • 基本对象声明
      • 语法: participant 参与者名称

      • 源代码

            ``` mermaid
                sequenceDiagram
                participant  张三
                participant  李四
            ```
        
      • 生成效果:

                   sequenceDiagram
                   participant  张三
                   participant 李四
        
    • 对象声明-别名 Aliases
      • 语法: participant 别名 as 参与者名称

      • 源代码

            ``` mermaid
                sequenceDiagram
                participant  Z as 张三
                participant  L as 李四
            ```
        
      • 生成效果:

                   sequenceDiagram
                   participant  Z as 张三
                   participant  L as 李四
        

消息 Message

  • 语法:participant1 箭头 participant2:消息内容

  • 源代码:

    张三跟李四的对话用不同的连接线来连接

        ```mermaid
        sequenceDiagram
            participant Z  as 张三 
            participant L  as  李四 
            Z->L:我是没有箭头的实线
            L-->Z:我是没有箭头的虚线
            Z->>L:带箭头的实线
            L-->>Z:带箭头的虚线
            Z-xL:带x箭头实线
            L-)Z:结束时候 带箭头的实线
            Z--)L:结束时候 带箭头的虚线
        ```
    
  • 生成效果:

        sequenceDiagram
            participant Z  as 张三 
            participant L  as  李四 
            Z->L:我是没有箭头的实线
            L-->Z:我是没有箭头的虚线
            Z->>L:带箭头的实线
            L-->>Z:带箭头的虚线
            Z-xL:带x箭头实线
            L-)Z:结束时候 带箭头的实线
            Z--)L:结束时候 带箭头的虚线
    
  • 线型对照表

    线形含义
    ->无箭头的实线
    -->没箭头的虚线
    ->>带箭头的实线
    -->>带箭头的实线
    -x带x号箭头实线
    --x结尾x号箭头实线
    -)结束 带箭头的实线
    --)结束 带箭头的虚线

控制焦点 Activations

  • 语法:
        activate participant //激活
           消息
        deactivate participant //释放激活
    
    

这个有一些抽象我们用一个场景来去理解

  • 场景1:

        张三:hi李四你还好么
        // 李四听了开始回话 此时李四是激活状态 开始进行对话
        李四:hi张三我可以听到你,我很好,不用担心。
        //李四会话结束 不会再跟张三有活动 此时李四的激活状态被释放
    
    
    • 源代码:
          ```mermaid
          sequenceDiagram
          participant Z as 张三
          participant L as 李四
          Z->>L:hi李四你还好么
           activate L
          L->>Z:hi张三我可以听到你,我很好,不用担心。
          deactivate L
          ```
      
      
    • 生成效果:
    sequenceDiagram
    participant Z as 张三
    participant L as 李四
    Z->>L:hi李四你还好么
     activate L
    L->>Z:hi张三我可以听到你,我很好,不用担心。
    deactivate L
    

    image.png

  • 场景2:

        张三:hi李四你还好么
        张三:你可以听到我说话么 
           //李四开始回话 被激活
        李四:hi张三我可以听到你 
        李四:不用担心我
    
    • 源代码:
          ```mermaid
          sequenceDiagram
          participant Z as 张三
          participant L as 李四
      
          Z->>L:hi李四你还好么
           activate L
          Z->>L:你可以听到我说话么
           activate L
          L->>Z:hi张三我可以听到你
           deactivate L
          L->>Z:我很好,不用担心。
           deactivate L
          ```
      
      
    • 生成效果:
    sequenceDiagram
    participant Z as 张三
    participant L as 李四
    
    Z->>L:hi李四你还好么
     activate L
    Z->>L:你可以听到我说话么
     activate L
    L->>Z:hi张三我可以听到你
     deactivate L
    L->>Z:我很好,不用担心。
     deactivate L
    

时序图-批注 Note

  • 语法:
    • 单个对象:

      Note 位置 of participant:批注内容

    • 对个对象:

      Note 位置 角色名称1,角色名称2:批注内容

  • 位于对象左侧:
    • 源代码
          ```mermaid
              sequenceDiagram
              participant 张三
              Note left of 张三 :我是张三
          ```
      
    • 生成效果
              sequenceDiagram
              participant 张三
              Note left of 张三 :我是张三
      
  • 位于对象右侧:
    • 源代码
          ```mermaid
              sequenceDiagram
              participant 张三
              Note right of 张三 :我是张三
          ```
      
    • 生成效果
              sequenceDiagram
              participant 张三
              Note right of 张三 :我是张三
      
  • 位于对象上方(需要两个对象):
    • 源代码
          ```mermaid
              sequenceDiagram
              participant 张三
              participant 李四
              Note over of 张三&李四 :我是张三
          ```
      
    • 生成效果
              sequenceDiagram
              participant 张三
              participant 李四
              张三->>李四:李四你好么
              Note over  张三,李四 :他们正在沟通
      

时序图-逻辑循环 Loop

交互过程中表示某些循环的环节

  • 语法:

        loop 循环描述
        循环内容
        end //结束标记
    
  • 场景: 李四跟张三是好朋友 李四生病了 张三很关心他 每过一小时 为了不让张三如此担心 李四就约定每一个小时给张三发消息

  • 源代码:

         ```mermaid
            sequenceDiagram
            participant 张三
            participant 李四
            张三->>李四:李四你好么
            loop 每过一小时李四发消息给张三
                 李四 --> 张三:我很好
            end
        ```
    
  • 生成效果:

        sequenceDiagram
        participant 张三
        participant 李四
        张三->>李四:李四你好么
        loop 每过一小时李四发消息给张三
             李四 --> 张三:我很好
        end
    

时序图 抉择(Alt)&选项(Opt)

组合片段用来解决交互执行的条件及方式。它允许在序列图中直接表示逻辑组件,用于通过指定条件或子进程的应用区域,为任何生命线的任何部分定义特殊条件和子进程。

Alt 抉择

用来指明在两个或更多的消息序列之间的互斥的选择,相当于经典的if..else.. 只能发生一种情况

  • 语法:
    alt 第一种情况描述
        具体发生的动作
    else 剩余情况描述
        具体发生的动作
    end
  • 场景:
        场景:张三:李四你还好么
        如果李四生病了他会说:我不是很好
        如果李四很健康他会说:我很好 又是很好的一天
    
    • 源代码:
          ```mermaid
              sequenceDiagram
              participant 张三
              participant 李四
              张三 ->>李四:你生病了么
              alt 第一种情况描述
                  李四-->>张三:是的,我很难受
              else 剩余情况描述
                  李四-->>张三:我没生病,挺好的
              end
          ```
      
    • 生成效果:
          sequenceDiagram
          participant 张三
          participant 李四
          张三 ->>李四:你生病了么
          alt 第一种情况描述
              李四-->>张三:是的,我很难受
          else 剩余情况描述
              李四-->>张三:我没生病,挺好的
          end
      

opt 选择"

包含一个可能发生或不发生的序列 就是一种场景有可能发生也有可能不发生

  • 语法:

        opt 情况描述
            有可能发生的动作
        end
    
  • 场景:

        场景:张三:李四你还好么
        李四会可能会说谢谢你的问候也可能不会说 这个并无法预测
    
    • 源代码:
          ```mermaid
              sequenceDiagram
              participant 张三
              participant 李四
              张三 ->>李四:你还好么
              opt 可能的回答
                  李四-->>张三:谢谢你的问候
              end
          ```
      
    • 生成效果:
          sequenceDiagram
          participant 张三
          participant 李四
          张三 ->>李四:你还好么
              opt 可能的回答
                  李四-->>张三:谢谢你的问候
              end
      

时序图 并行关系 par

并行处理。 一个对象同时发出的交互动作

  • 基本语法:
        par 动作描述1
        participant1 ->> participant2: 内容
        and 动作描述2
        participant1 ->> participant3: 内容
        end
    
    • 场景:
          participants: 张三  李四 王五
          张三 在下午5点分别给李四和王五分一条信息:内容是吃了么
          李四回复:吃了
          张三回复:没吃
      
      • 源代码
            ```mermaid
            sequenceDiagram
                autonumber
                participant 张三
                participant 李四 
                participant 王五
                par [给李四发消息]
                张三 ->> 李四: 吃了么
                and [王五发送消息] 
                张三 ->> 王五: 吃了么
                end
                李四 ->> 张三:没吃呢
                王五 ->> 张三:吃了
        
            ```
        
      • 生成效果
            sequenceDiagram
                autonumber
                participant 张三
                participant 李四 
                participant 王五
                par [给李四发消息]
                张三 ->> 李四: 吃了么
                and [王五发送消息] 
                张三 ->> 王五: 吃了么
                end
                李四 ->> 张三:没吃呢
                王五 ->> 张三:吃了
        
        
  • 嵌套语法:
        par 动作描述1
        participant1 ->> participant2: 内容
        and 动作描述2
        participant1 ->> participant3: 内容
        end
        par 动作描述1
         participant3 ->> participant4:内容
         and 王五发消息给A8
         participant3 ->> participant5:内容
         end
    
    • 场景:
          participants: 张三  李四 王五 赵六 A8
          王五明天请吃饭
          张三发消息问李四明天去不去 同时发消息给王五问明天都有哪些人参加
          王五发消息给赵六:明天一起吃饭8 同事也发消息给A8告诉他让他带着小伙伴一起
      
      • 源代码
            ```mermaid
            sequenceDiagram
             participant 张三
             participant 李四 
             participant 王五
             participant 张三
             participant 赵六
             participant A8
             par  张三发消息给李四
                 张三 -->> 李四:明天王5请客吃饭
             and 张三发消息给王五
                 张三 -->> 王五: 明天吃饭都有谁呢
             end
             par 王五发消息给赵六
                 王五->>赵六:明天准时到场哈
             and 王五发消息给A8
                 王五 ->>A8:明天带上你的伙伴一起来哈
             end
        
            ```
        
      • 生成效果
            sequenceDiagram
             participant 张三
             participant 李四 
             participant 王五
             participant 张三
             participant 赵六
             participant A8
             par  张三发消息给李四
                 张三 -->> 李四:明天王5请客吃饭
             and 张三发消息给王五
                 张三 -->> 王五: 明天吃饭都有谁呢
             end
             par 王五发消息给赵六
                 王五->>赵六:明天准时到场哈
             and 王五发消息给A8
                 王五 ->>A8:明天带上你的伙伴一起来哈
             end
        
        

    背景高亮

    • 语法:

          rect rgba(0,213,123)
      
    • 源代码:

          ```mermaid
          sequenceDiagram
           participant 张三
           participant 李四 
           participant 王五
           participant 张三
           participant 赵六
           participant A8
           par  张三发消息给李四
                rect rgba(0,113,133)
               张三 -->> 李四:明天王5请客吃饭
                  end
      
           and 张三发消息给王五
                rect rgba(0,113,133)
               张三 -->> 王五: 明天吃饭都有谁呢
          end
           end
      
           par 王五发消息给赵六
            rect rgba(0,213,123)
               王五->>赵六:明天准时到场哈
                   end
           and 王五发消息给A8
           rect rgba(0,213,123)
               王五 ->>A8:明天带上你的伙伴一起来哈
          end
           end
      
      
          ```
      
    • 生成效果:

      sequenceDiagram
       participant 张三
       participant 李四 
       participant 王五
       participant 张三
       participant 赵六
       participant A8
       par  张三发消息给李四
            rect rgba(0,113,133)
           张三 -->> 李四:明天王5请客吃饭
              end
      
       and 张三发消息给王五
            rect rgba(0,113,133)
           张三 -->> 王五: 明天吃饭都有谁呢
      end
       end
      
       par 王五发消息给赵六
        rect rgba(0,213,123)
           王五->>赵六:明天准时到场哈
               end
       and 王五发消息给A8
       rect rgba(0,213,123)
           王五 ->>A8:明天带上你的伙伴一起来哈
      end
       end