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

这是我参与更文应战的第4天，活动详情检查：更文应战

缘起

看到Mermaid是由于我开始用编辑器写文章，日常我会用xmind或许流程图来记载，乃至我还徒手画过xmind。用结构图来整理内容，更直观，清楚也有更自markdown语法己得考虑，俗语说的好千万字抵不过一张图。看到Mermaid我立马就爱了，用代码生成结构笔记本电脑性价比排行图，其实就适当与手写笔记的进程。这篇文章也就应运而生

你能得到什么

你能够用代码生成任意你想要的流程图、状况图、甘特图、时序图、 饼图github永久回家地址、类图、联络图、旅程图
不论在阅览、学习常识、会议纪要、脑筋风暴、时刻办理这肯定是一款利器，行进学习功率，整理学习思路在画图的进程中二次常识深化离别点点点，一路coding 一路爽
前史代码可追踪，由markdown是什么于这是代码哇

Mermaid是什么

mermaid 是笔记本电脑开不了机一个 JS 完结的一个三方库

浅显的了解便是生成图表的 “Ma交流技巧rkdown语法” 用纯文本格式编写图表交流的重要性

在哪里能够运用Mermaid

js文件中作为三方库引入 npm库房地址
cdn办法引入

<body>
<script srgithub是干什么的c="笔记本电脑开不了机https://cdn.jsdelivr.net/npm/编辑器下载mermaid/dist/mermaid.min.js"></script&gt编辑器哪个好用;
</body>

支撑Markdown语法的编辑器比方 编辑器 语雀 形象笔记 Typora Mermaid笔记本电脑怎样连wifi在线编辑器
IDE：VSco笔记本电脑怎样连wifide中下载插件：Markdown Previgiteeew Mermaid Support

图表类型

flowchart 流程图
时序图
甘特图
类图
状况图
联络图
旅程图
饼图

Mermaid – 流程图

底子结构

圆角矩形标交流才能差怎样提高明“开始”与“完毕”
矩形标明行动计划、一般作业环节用
菱形标明问题判别或判定（gitee审理/阅览/评定）环交流技巧和办法节
用平行四边形标明输入输出
箭头代表作业流方向

流程图与节点的创立

id 存在的含编辑器英文义当节点内多文字过多节点与节点之间的联络杂乱即可用id指代其时节点即可

流程图声明：

关键字： graph

源代码

    ```mermaid
graph             //流程图声明
S[声明一个流程图] // 节点创立 Id[节点内容]
```

生成作用

节点内容：
- 节点内容为纯文本：
  - 语法：id(纯文本)
  - 源代码
```
    ```mermaid
    graph
    s(节点为纯文本不包括特别字符)
```
```
  - 生成作用
- 内容包括特别字符
  - 语法：id(“内容+特别字编辑器符”)
  - 源代码
```
    ```mermaid
    graph
    s("开始(START)交流的重要性")
```
```
  - 生成作用
- 内容包括转义字符
  - 语法：id(“:转义字符;”)
  - 源代码
```
    ```mermaid
    graph
    s("开始:#9829;")
    `markdown图片``
```
- 生成效github中文官网网页果

流程图布局

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

    ```mermaid
graph
s[开始]-->
e[完毕]
```

自上向Markdown下

语法：
- graph交流 BT
- graph TD

源代码：

  ```mermaid
graph TD
s[开始]-->
e[完毕
```

 ```mermaid
graph TB
s[开始]-->
e[完毕
```

生成作用

自下向上

语法：
- graph BT

源代码：

  ```mermaid
grapgithub中文官网网页h BT
s[开始]-->
e[完毕
```

生成作用

自左向右

语编辑器哪个好用法:
- graph LR

源代码

  ```memarkdown符号rm编辑器未包括main类型aid
graph LR
s[开始]-->
e[完毕
```

生成作用:

自右向左

语法:
- graph RL

源代码笔记本电脑

  ```mermaid
graph RL
s[开始]--交流的三要素是什么>
e[完毕
```

生成作用:

流程图节Git点形状

矩形

语法： id[节点内容]

源代码

    `giti轮胎``mermaimarkdown笔记d
graph
s[开始笔记本电脑怎样连wifi]
emarkdown中引用的标记符号是[完毕]
```

生成作用：

圆角markdown语法矩形节点
- 语法：id(节点内容)交流
- 源代码
```
    ```mermaid
  grgithubaph
  s(开始)
  e(完毕)id()
```
```
- 生成作用：

体育场形Markdown状

语法：id([内容])

源代码

    ```mermaid
grapmarkdown笔记h
s([开始 - 体育场图]) --> e([完毕 - 体育场图])
`笔记``

生成作用：

圆柱形
- 语法：id[交流的三要素是什么(内容)]
- 源代码
```
    ```mermaid
  graph
  s[(开始 - 圆柱)] --> e[(完毕 - 圆柱)]
```
```
- 生成作用：

圆形

语法：id((内容))

源代码编辑器下载

    ```mermaid
graph
s((开始 - 圆柱)) --> e((完毕 - 圆柱))
```

生成作用：

菱形

语法：id{markdown是什么内容}

源代码

    ```mermaid
graph
s{开始 - 菱形} --> e{完毕 - 菱形}
```

生成作用：

六角形

语法：id{{内容}}

源代码markdown笔记

   ```mermaid
graph
s{{开始 - 六角形}} --> e{{完毕 - 六角形}}
```

生成作用：

不对称

语法：id>内容]

源代码

    ```mermaid
graph编辑器下载
s>开始-非对称] -->交流才能 E>完毕-非对称]
```

生成效笔记果：

平行四边形
- 语法：
  - 右 id[/内容/]
  - 左 id[内容]
- 源代码
```
   ```mermaid
  graph
  s[开始] --> E[/结markdown软件束/]
```
```
- 生成作用：

梯形

语法：id[/内容]

源代码

    ```mermaid
graph
s[/开始] --> E[/交流的重要性心得体会完毕]
```

生成作用：

节点与节点之间的链接

实线

语法：–

源交流技巧和办法代码：

    ```m编辑器ermai笔记本电脑开机黑屏没反应怎样办d
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[完毕]
```

虚线箭头

语法 -.->

源代码

    ``github是干什么的`mermaid
graph LR
s[开始] -.-> e[完毕]
```

生成作用：
```
graph LR
s[开始] -.-> e[完毕]
```

粗线箭头

语法 ==>

源代码

    ```mermaid
g笔记本电脑开不了机raph LR
s[开始] ==> e[完毕]
`git指令``

生成作用
```
   graph LR
s[开始] ==> e[完毕]
```

带文字的链接线-实线

语法 –内容— 或许 —>|内容|笔记本电脑开不了机

源代码

    ```mermaid
graph笔记本cpu天梯图 LR
s[开始] --进程--- e[完毕]
```

或许

    ```markdown中文官网mermaid
graph LR
s[开始] --->|进程| e[完毕]编辑器手机版
```

生成作用：

graph LR
s[开始] --进程--- e[完毕]

带文字的链接线-虚线

语法 -.内容.->

源代码

    ```mermaid
graph LR
s[开始] -.进程.-> e[完毕]
```

生成作用：

    graph LR
s[开始] -.进程.-> e[完毕]

带文字的链接线-实线粗线

语markdown是什么法 ==内容==>

源笔记本电脑性价比排行代码

    ```mermaid
graph LR
s[开始] ==进程==&gt交流才能; 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--走路-笔记本电脑排名前十-&gt笔记本电脑排名前十; o[永辉超市]--付钱--> e

2. 闭合编辑器联络

源代码（单循环）：


```mermaid
graph LR
s[家github是干什么的] --走路-->P[菜市场]--走路-->L[水果店]--走路--> j[超市]-->s
```

生成作用

graph LR
s[编辑器软件家] --走路-->P[菜市场]--走路-->L[水果店]--走路--> j[超市]-->s

源代交流技巧码（多循环）：


```mermaid
graph LR
s[买菜] --走路--&笔记本电脑开机黑屏没反应怎样办gt;P[菜市场]--付钱--> s
s--网上--> o[永辉超市]--付钱--> s
```

生成作用

 graph LR
s[买菜] --走路-->P[菜市场]--付钱--> s
s--网上--> o[永辉超市]--付钱--> s

3. 平行与交叉联络

张三李四都会内卷和躺平

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

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

兼并

源代码

    ``Markdown`mermaidmarkdown编辑器
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
grmarkdown中文官网aph
z[张三]-->X{挑选躺平仍是内卷}
x--内卷--&gmarkdown软件t;Y[竭力]
Y--竭力-->R[从头考虑]
R-->X
X--&gt笔记本cpu天梯图;|躺平|N[交流的三要素是什么喝高兴水]
```

graph
z[张三]-->X{挑选躺平仍是内卷}
x--内卷-->Y[竭力]
Y--竭力笔记本电脑排名前十-->R[从头考虑]
R-->X
X-->|躺平|N[喝高兴水]

上图可妥当人giti物挑选躺平得逻辑不是预期得展现
需求调整挑选添加躺平得长度逻辑即可正确

源代码

    ```mermaid
graph
z[张三]-->X{挑选躺平仍是内卷}
x--内卷-->Y[竭力]git指令
Y--竭力git指令-->编辑器哪个好用R[从头考虑]
R编辑器手机版--&gtgithub是干什么的;X
X--->|躺平|N[喝高兴水] //添加长度

graph
z[张三]-->X{挑选躺平仍是内卷}
x--内卷-->Y[竭力]
Y--竭力-->R[从头考虑]
R-->X
X--->|躺平|N[喝高兴水]

逻辑上躺平与从头考虑并不是平行联络理想状况挑选躺平长度大于挑选内卷
可用—-&交流的三要素是什么gt; 链接线会添加2个层级的长markdown符号度

源代码：

    ```mermaid
graph
z[张三]-->X{挑选躺平仍是内卷}
x--内卷-->Y[竭力]
Y--竭力-->R[从头考虑]
R-->X
X--躺平---->N[喝高兴水]
```

graph
z[张三]笔记本电脑性价比排行-->X{挑选躺平仍是内卷}
x--内卷-->Y[竭力]
Y--竭力-->R[从头考虑]
R-->X
X--Git躺平-编辑器和编译器的差异--->N[喝高兴水]

可用—-> 链接线会添加3个层级的长度
一下是各个类型联接线添加层级长度语法笔记本电脑什么牌子好

添加层级长度	1	2	3
实线	—	—-	—–
带箭头的实线	–>	—>	—->
粗实线	===	====	=====
带github永久回家地址箭头的粗实线	==>	===>	====>
虚线	-.-	-..编辑器软件–	-…-
带箭头的虚线	-.->	-..->	-…->

子图表笔记本电脑开机黑屏没反应怎样办 subgraph

底子语法

graph
节点联络
subgraph title //子图表的称谓
子图表的节点联络
en交流才能差怎样提高dgiti //子图标完毕标志

源代码

    ```mermaid
graph TB
c1-->a2
subgrapgitih 表1
a1-->a2
end
subgraph 表2
b1--编辑器不包括主类型>b2
end
subgraph 表3
c1-->c2
end
`编辑器和编译器的差异``

生成作用

g编辑器哪个好用raph TB
c1-->a2
subgraph 表1
a1-->a2
end
subgraph 表2
b1-->b交流2
end
subgraph 表3
c1-->c2
end

交互

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

语法：

 var callback = function(){笔记本电脑
alert笔记本cpu天梯图('A callback was triggered');
}

源代码：

    ```mermaid
graph LR;
A-->B;
B[跳转git教程百度]-->C;
C-->D;
cliGitck A callback "Tooltip for agitee callback"
click B交流的三要素是什么 "http://www.baidu.com" "This is a too交流的重要性的名言ltip for a link"
click A call callbamarkdown中引用的标记符号是ck() "Tooltip for a callback"
click B href "http://www.github.com" "Th笔记本电脑性价比排行is is a tooltip for a link"
``交流技巧`

生成作用

graph LR;
A-->笔记本电脑排名前十B;
B[跳转百度]-->C;
C-markdown中文官网->D;
click A callbacMarkdownk "Tooltip for a callback"
click B "http://www.baidu.com" "This is a tooltip for a link"
click A call callback() "Tooltip fo笔记r a callback"
click B href "http:交流的重要性//www.github.com" "This is a tooltip for a link"

注释

语法 %%

源代码

    ```me笔记rmaid
graph LR
%% this is a comment A -- text --> B{node}
A -- text --> B -- text2 --> C
```

生成github中文官网网页作用

graph LR
%% this is a comment A -- text --&g编辑器手机版t; B{node}
A -- text --&gt编辑器软件; B -- text2 --> C

添加款式

办法1

咱们需求给开始和完毕添加款式

语法github永久回家地址： 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 5gitlab,color:#fff
```

生成作用

    graph LR
s["开始(实线边框，4px，边框色彩：#007fff 蓝 ,布风光：red)"]
e["完毕(虚线边框，4px，边框色彩：red,布风光：#007f笔记本cpu天梯图ff 蓝 文本色彩为白色)"]
style s  fill:red ,stroke:#007fff,stro交流技巧和办法ke-width:4px
style e  fill:#007fff,stroke:red,stroke-width:4pxmarkdown符号,stroke-dasharray: 5 5,color:#fff

办法2 类

1. 界说款式 class
- 语法：classDef classNamgithub中文官网网页e 款式界说

运用 :::classname

源代码：

     ```mermaid
graph LR
s[开始]:::ownstyle-->e[完毕]
clas交流的艺术sDef ownstyle fill:#007fff,strok交流技巧e:red,stroke-width:4px,stroke-dasharray: 5 5,col笔记本电脑开机黑屏没反应怎样办or:#fff
```

生成作用

graph LR
s[开始]:::ownstyle-->e[完毕]markdown编辑器
classDef ownstyle fill:#007fff,stroke:re交流技巧d,stroke-width:4px,stroke-dasharray: 5 5,co笔记lor:#fff

办法3 css class办法添加款式

界说

   <style&g编辑器小说t;
.cssClass &markdown中文官网gt; rect{
fill:regithub是干什么的d;
stroke:#F交流的重要性FFF00;
stroke-width:4px;github是干什么的
}
</style>

实例：
源代码

    ```mermaid
graph LR;
A-->B[AAA&lt编辑器下载;span>BBB</span>];
B-gitlab->D;
clasgit指令s A cssClass;
```

生成作用：

      graph L编辑器英文R;
A-->B[AAA<sp交流作文an>BBB</span笔记本电脑开机黑屏没反应怎样办>];
B-->D;
class A cssClass;

Mermaid – 时序图（序列图）

时序图又名序列图是UML交互图的一种
首要用来标明政策之编辑器小说间发送音讯的时刻次第

底子结构

人物 Ac笔记本tor 体系人物但是是人或许其他体系子体系
政策 Object 交互进程中扮演的人物一般坐编辑器软件落时序图顶部
生命线 Limarkdown软件feline 生命线代表时序图中的政策在一段时期内的存在
操控焦markdown图片点 Act笔记本cpu天梯图ivation 操控焦点代表时序图中的政策实施一项活动的时期markdown软件
音讯 MesMarkdownsage 界说交互和Git协作中交流信息的类

学习流程图的时分还能了解点，到了时序图如gitee同都是没有听过的词汇不要严峻咱们仍是一边看一遍做就会了解其间的意义能够跳过

时序图的创立

时序图声明

关键字：sequenceDiagram
源代码：
```
    ```mermaid
sequenceDiagram
```
```
生成作用：
```
    sequenceDiagramarkdown语法m
```

参与者

关键字： participa笔记本nt

底子方交流作文针声明：

语法： participant 参与者称谓

源代码

    ``` mermaid
seque笔记本cpu天梯图nceDiagram
participant  张三
participant  李笔记本电脑什么牌子好四
```

生成作用：

           sequenceDiagram
participant  张三
participant 李四

政策声明-别号 Aliases ：

语法： participant 别号 as 参与者称谓

源代码

    ``` mermaid
sequen交流才能差怎样提高ceDiagram
participan编辑器t  Z as 张三
participant  L as 李四
```

生成作用：

           sequenceDiagram
participant  Z as 张三
participant  L as 李四

音讯 Message

语法：participant1 箭头编辑器小说 participant2：音讯内容

源代码：

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

    ```mermaid
sequenceDiamarkdown笔记gram
participant Z  as 张三
participant L  as  李四
Z->L:我是没有箭头的实线
L-->Z:我是没有箭头的虚线
Z->>L:带箭头的实线
L-->markdown软件>Z:带箭头的虚线
Z-xLgit指令:带x箭头实线
L-)Z:完毕时分 带箭头的实线
Z--)L:完毕时分 带箭头的编辑器不包括主类型虚线
```

生成作用：

    sequenceDiaggithubram
parmarkdown是什么ticipanmarkdown是什么t Z  as 张三
participant L  as  李四
Z->L:我是没有箭头的实线
L-->Z:我是没有箭头的虚线
Z-&交流技巧gt;>L:带箭头的实线
L-->>Z:带箭头的虚线
Z-xL:带x箭头实线
L-)Z:完毕时分 带箭头的实线
Z--)L:完毕时分 带箭头的虚线

线型对照表

线形笔记本电脑开机黑屏没反应怎样办	意义
->	无箭头的实线
–>	没箭头的虚线
–github是干什么的&g笔记本cpu天梯图t;>	带箭头的实线
–>>	带箭头的实线
-x	带x号箭头实线
–x	完毕x号箭头实线
-)	完毕带箭头的实线
–)	完毕笔记本电脑带箭头的虚线

操控焦点 Activations

语法：

    activate participmarkdown中文官网ant //激活交流的艺术
音讯markdown编辑器
deactivate participant /markdown语法/开释激git指令活

这个有一些抽象咱们用一个场景往来不断了解

场Git景1：

    张三：hi李四你还好么
// 李四听了开始回话 此时李四是激活状况 开始进行对话
李四：hi张三我交流的重要性能够听到你，我很好，不必忧虑。
//李四会话完毕 不会再跟张三有活动 此时李四的激活状况被开释

源代码：

    ```mermaid
sequenceDiagram
participant Z as 张三
participgit教程ant L a笔记本电脑性价比排行s 李四
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 张三
parti笔记本电脑开机黑屏没反应怎样办cipant L as 李四
Z->>L:hi李四你还好么
activate L
Z->>L:你能够听到我说话么
activate L
L-&gmarkdown笔记t;>Z:hi张三我能够听到你github
deactivat笔记e L
L->>Z:我很好，不必忧虑。
de编辑器小说activate L
```

生成作用：

sequenceDiagram
participant Z a笔记本电脑开不了机s 张三
participant L as 李四
Z->>L:hi李四你还好么
activate L
Z->>L:你能够听到我说话么
activate L
L->>Z:hi张三我能够听到你
deactivate L
L->>Z:我很好，不必忧虑。
deac交流的艺术tivate L

时序图-批注 Note

语法：
- 单个政策：
  
  Notegithub是干什么的方位 of participant笔记本电脑开机黑屏没反应怎样办:批注内容
- 对个政策：
  
  Note 方位人物称谓1，人物称谓2:批注内容

坐编辑器下载落政策左面：

源代码

    ```mermaid
sequenceDiagram
participant 张三
Note left of 张markdown图片三 :我是张三
```

生成作用

        sequenceDiagram
participant 张三
Note left of 张三 :我是张三

坐落政策右侧：

源代码

    ```m笔记本电脑怎样连wifiermaid
seq笔记uenceDiagram
participant 张三
Note right of 张三 :我是张三
```

生成作用

        s编辑器下载equenceDiagram
participant 张三
Note right of 张三 :我是张三

坐落政策上方（需求两个政策）：

源代码

    ```mermaid
seque编辑器英文nceDiagrammarkdown语法
participant 张三
participant 李四
Note over of 张三&李四 :我笔记是张三
```

生成作用markdown语法

        sequenceDiagram
participant 张三
participant 李四
张三->>李编辑器手机版四:李四你好么
Note over  张三,李四 :他们正在交流

时序图-逻辑循环 Loop

交互进程中标明某些循环的环节

语法：

    loop 循环描绘
循环内容
end //完毕符号

场景markdown教程：

李四跟张三是好朋友李四患病了张三很关怀他每过一小时为了不让giti张三如此忧虑李四就约好每一个小时给张三发音讯

源代码：

     ```mermai笔记本电脑开机黑屏没反应怎样办d
sequenceDiagram
participgit教程ant 张三
participant 李四
张三->>李四:李四你好么
loop 每过一小时李四发音讯给张三
李四 --> 张三:我很好
end
```

生成作用：

    sequenceDiagram
participant 张三笔记
participant 李四markdown符号
张三->>李四:李四你好么
loop 每过编辑器手机版一小时李四发音讯给张三
李四 --> 张三:我很好
end

时序图挑选（Alt）&选项（Opt）

组合片段用来处理交互实施的条件及办法。它允许在序列图中直接标明逻辑组件，用于经过指定条件或子进程的运用区域，为任笔记本电脑排名前十何生命线的任何部分界说特别条件和子进程。

`Alt` 挑选

用来指明在两个或更多的音讯序列之间的互斥的挑选，适当于经典的if..els笔记本电脑排名前十e..
只能产生一种状况

语法：

    alt 第一种状况描绘
详细产生的动作
else 剩下状况描绘
详细产生的动作
end

场景：

    场景:张三：李四你还好么
假定李四患病了他会说git教程：我不是很好
假编辑器小说设李四很健康他会说：我很好 又是很好的一天

源代码：

    ```mermaid
sequenceDia交流才能差怎样提高gram
participant 张三
participant 李四
张三 -&编辑器哪个好用gt;>李四:你患病了么
alt 第一种状况描绘
李四-->>张三:是的，我很伤心
else 剩下状况描绘
李四-->&gmarkdown教程t;张三Markdown:我没患病，挺好的
end
```

生成作用：

    sequenceDiagram
partic编辑器小说ipant 张三
p笔记本电脑开不了机artgithub中文官网网页icipant 李四
张三 ->>李四:你患病了么
alt 第一种状况描绘
李四-->>张三:是的，我很伤心
else 剩下状况描绘
李四-->交流技巧和办法&gt笔记本电脑开机黑屏没反应怎样办;张三:我没患病，挺好的
end

`opt` 挑选”

包括一个或许产生或不产生的序列便是一种场景有或许产生也有或许不产生编辑器软件

语法：

    opt 状况描绘
有或许产生的动作
end

场景：

    场景:张三：李四你还好么
李四会或github是干什么的许会说谢谢你的问好也或许不会说 这个并无法猜测

源代码：

    ```merma交流才能差怎样提高id
sequenceDiagram
participant 张三
participant 李四
张三 ->>李四:你还好么
opt 或许的答复
李四-->>张三:谢谢你的问好
end
```

生成作用：

    sequenceDiagram
participant 张三
partic交流的重要性的名言ipant 李四
张三 ->>李四:你还好么
opt 或许的答复
李四-->>张三:谢谢你的问好
end

时序图git指令并行联络 par

并行处理。一个政策一同宣布的交互动作

底子语法：

    par 动作描绘1
participant1 -&Gitgt;> participant2: 内容
and 动作描绘2
participant1 ->> participa编辑器和编译器的差异nt3: 内容
end

场景：

    participants: 张三  李四 王五
张三 在下午5点分别给李四和王五分一条信息：内容是吃了么
李四回复：吃了
张三回复：没吃

源代码

    ```m笔记本电脑怎样连wifiermaid
sequenceDiagram
autonumbegit教程r
participant 张三
participant 李四
participant 王五
par [给李四发音讯]
张三 ->> 李四: 吃了么
and [王五gitee发送音讯]
张三 ->> 王五: 吃了么github永久回家地址
end
李四 ->&git教程gt; 张三:没吃呢
王五 ->> 张三:吃了
```

生成作用

    sequenceDiagram
autonumber
participant 张三
participant 李四
particmarkdown图片ipangit教程t 王五
par [给李四发音讯]
张三 -&gtgit指令;> 李四: 吃了么
and [王五发送音讯]
张三 ->> 王五: 吃编辑器不包括主类型了么
end
李四 ->> 张三:没吃呢
王五 ->> 张三:吃了

嵌套语法：

    par 动作描绘1
participant1 ->> participant2: 内容
and 动作描绘2
participant1 ->> participan笔记本电脑性价比排行t3: 内容
end
par 动交流的重要性的名言作描绘1
partic编辑器哪个好用ipant3 ->> participant4:内容
and 王五发音讯给A8
participant3 ->&gMarkdownt; participant5:内容
end

场景：

    particmarkdown教程ipants: 张三  李四 王五 赵六 A8
王五明日请吃饭
张三发音讯问李四明编辑器英文日去不去 一同发交流的重要性音讯给王五问明日都有哪些人参与
王五发音讯给赵六:明日一同吃饭8 搭档也发音讯给A8奉告他让他带着小伙伴一同

源代码

    ```mermaid
sequenceDiagraGitm
participant 张三
participant 李四
participa交流才能差怎样提高nt 王五
participant 张三
participant 赵六
participant A8
par  张三发音讯给李四
张三 -->> 李四:明日王5请客吃饭
and 张三发音讯给王五
张三 -->> 王五: 明日吃饭都有谁呢
end
par 王五发音讯给赵六
王五->>赵六:明日按时参与哈
and 王五发音讯给A8
王五 ->>A8:明日带上你的伙伴一同来哈
end
```

生成作用

    sequenceDiagitigram
p交流技巧articipant 张三
participant 李四
participant 王五
participant 张三
participant 赵六
participant A编辑器手机版8
par  张三发音讯给李四
张三 -->> 李四:明日王5请客吃饭
and 张三发音讯给王五
张三 -->> 王五: 明日吃饭都有谁呢
egit教程nd
par 王五发音讯给赵六
王五-&gtgithub;>赵六:明日按时参与哈
angithub中文官网网页d 王五发音讯给A8
王五 ->>A8:明日带上你的伙伴一同来哈
end

布景高亮

语法：
```
    rect rgmarkdown图片ba(0,213,123)
```

源代交流才能差怎样提高码：

    ```mermaid
sequenceDiagram
participant 张三
participant 李四
participant 王五
participant 张三
participant 赵六
participant A8
par  张三发音讯给李四
rect rgba(0,113,133)
张三 -->> 李四:明日王5请客吃饭git指令
end
and 张三发音讯给王五
rect rgba(0,113,133)
张三 -->> 王五: 明日吃饭都有谁呢
end
end
par 王五发音讯给赵六
rect rgba(0,213,123)
王五->>赵六:明日按时参与哈
end
and 王五发音讯给A8
rect rgba(0,213,123)
王五 ->>A8:明日带上你的伙伴一同来交流才能哈
en编辑器不包括主类型d
end
```

生成作用：

sequenc编辑器和编译器的差异eDiagram
participant 张三
participant 李四
participant 王五
pgit教程articipant 张三
p笔记本电脑性价比排行articipa编辑器英文nt 赵六
participant A8
par  张三发音讯给笔记本电脑开机黑屏没反应怎样办李四
rect rgba(0,113,133)
张三 -->> 李四:明日王5请客吃饭
end
and 张三发音讯给编辑器王五
rect rgba(0,113,1交流的重要性33)
张三 -->> 王五: 明日吃饭都有谁呢
end
end
par 王五发音讯给赵六
rect rgba(0,213,123)
王五-&g笔记t;>赵六:明日按时参与哈
end
and 王五发音讯给A8
rect rgba(0,213,123)
王五 ->&gt交流的重要性;A8笔记本电脑开不了机:明日带上你的伙伴交流的艺术一同来哈
end
end

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

缘起

你能得到什么

Mermaid是什么

在哪里能够运用Mermaid

图表类型

Mermaid – 流程图

底子结构

流程图与节点的创立

流程图布局

流程图节Git点形状

节点与节点之间的链接

联络链

1. 流程联络横向纵向

2. 闭合编辑器联络

3. 平行与交叉联络

4. 操控联接长度

子图表笔记本电脑开机黑屏没反应怎样办 subgraph

交互

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

注释

添加款式

办法1

办法2 类

办法3 css class办法添加款式

Mermaid – 时序图（序列图）

底子结构

时序图的创立

音讯 Message

操控焦点 Activations

时序图-批注 Note

时序图-逻辑循环 Loop

时序图挑选（Alt）&选项（Opt）

`Alt` 挑选

`opt` 挑选”

时序图git指令并行联络 par

布景高亮

作者信息

推广

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

缘起

你能得到什么

Mermaid是什么

在哪里能够运用Mermaid

图表类型

Mermaid – 流程图

底子结构

流程图与节点的创立

流程图布局

流程图节Git点形状

节点与节点之间的链接

联络链

1. 流程联络 横向 纵向

2. 闭合编辑器联络

3. 平行与交叉联络

4. 操控联接长度

子图表笔记本电脑开机黑屏没反应怎样办 subgraph

交互

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

注释

添加款式

办法1

办法2 类

办法3 css class办法添加款式

Mermaid – 时序图（序列图）

底子结构

时序图的创立

音讯 Message

操控焦点 Activations

时序图-批注 Note

时序图-逻辑循环 Loop

时序图 挑选（Alt）&选项（Opt）

Alt 挑选

opt 挑选”

时序图git指令 并行联络 par

布景高亮

相关文章

Kotlin Flow 探索

源码共读 | classnames 的原理

我优化了进度条，页面性能竟提高了70%

【云原生】k8s 一键部署（ansible）

作者信息

推广

1. 流程联络横向纵向

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

时序图挑选（Alt）&选项（Opt）

`Alt` 挑选

`opt` 挑选”

时序图git指令并行联络 par