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

这是我参与更文挑战的第4天，活动详情查看：更文挑战javascript

缘起

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

你能获得什么

你能够用代码生成任意你想要的流程图、状态图、甘特图、时序图、 饼图、类图、关系图、旅程图
无论在阅读、学习知识、会议纪要、头脑风暴、时间管理这绝对是一款利器，提升学习效率，梳理学习思路在画图的过程当中二次知识深化告别点点点，一路coding 一路爽
历史代码可追踪，由于这是代码哇

Mermaid是什么

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

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

在哪里可使用Mermaid

js文件中做为三方库引入 npm仓库地址
cdn形式引入

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

支持Markdown语法的编辑器好比 掘金编辑器 语雀 印象笔记 Typora Mermaid在线编辑器
IDE：VScode中下载插件：Markdown Preview Mermaid Support

图表类型

flowchart 流程图git
时序图github
甘特图web
类图npm
状态图markdown
关系图app
旅程图
饼图

Mermaid - 流程图

基本结构

圆角矩形表示“开始”与“结束”
矩形表示行动方案、普通工做环节用
菱形表示问题判断或断定（审核/审批/评审）环节
用平行四边形表示输入输出
箭头表明工做流方向

流程图与节点的建立

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

流程图声明：

关键字： graph

源代码

```mermaid
    graph             //流程图声明
    S[声明一个流程图] // 节点建立 Id[节点内容]
    
    ```
复制代码

生成结果

节点内容：
- 节点内容为纯文本：
  - 语法：id(纯文本)
  - 源代码
```
```mermaid
        graph
        s(节点为纯文本不包含特殊字符)
    ```
复制代码
```
  - 生成结果
- 内容包含特殊字符
  - 语法：id("内容+特殊字符")
  - 源代码
```
```mermaid
       graph
       s("开始(START)")
   ```
复制代码
```
  - 生成结果
- 内容包含转义字符
  - 语法：id(":转义字符;")
  - 源代码
```
```mermaid
       graph
       s("开始:#9829;")
   ```
复制代码
```
  - 生成结果

流程图布局

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

```mermaid
    graph 
    s[开始]-->
    e[结束]
    ```
复制代码

自上向下

语法：
- graph BT
- graph TD

源代码：

```mermaid
    graph TD
    s[开始]-->
    e[结束  
  ```
复制代码

```mermaid
   graph TB
   s[开始]-->
   e[结束  
 ```
复制代码

生成结果

自下向上

语法：
- graph BT

源代码：

```mermaid
    graph BT
    s[开始]-->
    e[结束  
  ```
复制代码

生成结果

自左向右

语法:
- graph LR

源代码

```mermaid
    graph LR
    s[开始]-->
    e[结束  
  ```
复制代码

生成结果:

自右向左

语法:
- graph RL

源代码

```mermaid
    graph RL
    s[开始]-->
    e[结束  
  ```
复制代码

生成结果:

流程图节点形状

矩形

语法： id[节点内容]

源代码

```mermaid
    graph
    s[开始]
    e[结束]
    ```
复制代码

生成结果：

圆角矩形节点

语法：id(节点内容)

源代码

```mermaid
    graph
    s(开始)
    e(结束)id()
    ```
复制代码

生成结果：

体育场形状

语法：id([内容])

源代码

```mermaid
    graph 
    s([开始 - 体育场图]) --> e([结束 - 体育场图])
    ```
复制代码

生成结果：

圆柱形

语法：id[(内容)]

源代码

```mermaid
    graph 
   s[(开始 - 圆柱)] --> e[(结束 - 圆柱)]
    ```
复制代码

生成结果：

圆形

语法：id((内容))

源代码

```mermaid
    graph 
   s((开始 - 圆柱)) --> e((结束 - 圆柱))
    ```
复制代码

生成结果：

菱形

语法：id{内容}

源代码

```mermaid
    graph 
   s{开始 - 菱形} --> e{结束 - 菱形}
    ```
复制代码

生成结果：

六角形

语法：id{{内容}}

源代码

```mermaid
    graph 
    s{{开始 - 六角形}} --> e{{结束 - 六角形}}
    ```
复制代码

生成结果：

不对称

语法：id>内容]

源代码

```mermaid
    graph 
    s>开始-非对称] --> E>结束-非对称]
    ```
复制代码

生成结果：

平行四边形
- 语法：
  - 右 id[/内容/]
  - 左 id[\内容\]
- 源代码
```
```mermaid
      graph 
      s[\开始\] --> E[/结束/]
    ```
复制代码
```
- 生成结果：

梯形

语法：id[/内容]

源代码

```mermaid
    graph 
    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[结束]
    ```
    
复制代码

生成效果
```
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个层级的长度一下是各个类型链接线增长层级长度语法

增长层级长度	1	2	3
实线	---	----	-----
带箭头的实线	-->	--->	---->
粗实线	===	====	=====
带箭头的粗实线	==>	===>	====>
虚线	-.-	-..-	-...-
带箭头的虚线	-.->	-..->	-...->

子图表 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 样式定义

应用 :::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交互图的一种 
主要用来表示对象之间发送消息的时间顺序
复制代码

基本结构

角色 Actor 系统角色但是是人或者其余系统子系统
对象 Object 交互过程当中扮演的角色通常位于时序图顶部
生命线 Lifeline 生命线表明时序图中的对象在一段时期内的存在
控制焦点 Activation 控制焦点表明时序图中的对象执行一项活动的时期
消息 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

场景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

复制代码

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

缘起

你能获得什么

Mermaid是什么

在哪里可使用Mermaid

图表类型

Mermaid - 流程图

基本结构

流程图与节点的建立

流程图布局

流程图节点形状

节点与节点之间的连接

关系链

1. 流程关系 横向 纵向

2. 闭合关系

3. 平行与交叉关系

4. 控制链接长度

子图表 subgraph

交互

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

注释

添加样式

方式1

方式2 类

方式3 css class形式添加样式

Mermaid - 时序图（序列图）

基本结构

时序图的建立

消息 Message

控制焦点 Activations

时序图-批注 Note

时序图-逻辑循环 Loop

时序图 抉择（Alt）&选项（Opt）

Alt 抉择

opt 选择"

时序图 并行关系 par

背景高亮

1. 流程关系横向纵向

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

时序图抉择（Alt）&选项（Opt）

`Alt` 抉择

`opt` 选择"

时序图并行关系 par