关于『进击的Markdown』:第四弹

编程入门行业动态更新时间:2024-10-28 21:22:58

关于『进击的<a href=https://www.elefans.com/category/jswz/34/1767221.html style= Markdown』:第四弹"/>

关于『进击的Markdown』:第四弹

关于『进击的Markdown』:第四弹

~~建议缩放90%食用~~

美人鱼（Mermaid）悄悄的来，又悄悄的走，挥一挥匕首，不留一个活口
~~又是漫漫画图路...~~

女士们先生们，大家好！

~~我们要接受Markdown和Mermaid的洗礼了呢~~

Markdown 语法真香
~~(日常安利)~~

~~( 进击吧！Markdown！)~~

Markdown进阶系列向你开炮，请注意接收🔫🔫🔫

来吧！面对现实！

~~我们就不废话了~~

~~又双叒要为大家带来 (正当时的) Markdown了呢~~~

~~阿西，好多图啊~~

~~正文开始了~~

注：编者用的是CSDN-Markdown编辑器（没错它又满血复活了）

声明：本弹所有图表都是CSDN-Markdown编辑器预览截图而来，可放心食用（这些图Visual Studio Code也不支持 ~~（其实是我没装扩展）~~）

Mermaid流程图

所有流程图都由节点、几何形状和边缘、箭头或线条组成
Mermaid 代码定义了这些节点和边的生成和交互方式
它还可以容纳不同的箭头类型、多向箭头以及与子图的链接
重要说明：请勿将 “end” 一词输入为流程图节点
将所有或任何一个字母大写以防止流程图中断，即 “End” 或 “END”

~~听起来很高大上是不是~~

一. 基础

(一). 一个节点（默认）

代码：

```mermaid

graph LR

id

```

效果：

注：id 是显示在框中的内容

(二). 带有文本的节点

也可以在框中设置与 id 不同的文本
如果多次设置，则将使用该节点的最后一个文本
此外，如果稍后为节点定义边，则可以忽略文本定义
渲染框时将使用先前定义的框

代码：

```mermaid

graph LR

id1[张三的家]

```

效果：

二. 图

该语句声明了流程图的方向
一下声明图形是从上到下定向的（TD或TB）

代码：

```mermaid

graph TD

Start --> Stop

```

效果：

这声明了图形从左向右 ( LR）定向

代码：

```mermaid

graph LR

Start --> Stop

```

效果：

三. 流程图方向

可能的流程图方向是（表格请全屏食用）：

名称	说明
TB	从上到下
TD	从上到下
BT	自下而上
RL	从右到左
RL	从左到右

四. 节点形状

(一). 具有圆边的节点

代码：

```mermaid

graph LR

id1(This is the text in the box)

```

效果：

(二). 体育场状节点

代码：

```mermaid

graph LR

id1([This is the text in the box])

```

效果：

(三). 子程序形状的节点

代码：

```mermaid

graph LR

id1[[This is the text in the box]]

```

效果：

(四). 圆柱形状的节点

代码：

```mermaid

graph LR

id1[(靓仔盒子)]

```

效果：

(五). 一个圆形的节点

代码：

```mermaid

graph LR

id1((某块饼))

```

效果：

(六). 不对称形状的节点

代码：

```mermaid

graph LR

id1>某个书签]

```

效果：

注：目前，以上的形状是可能的，它没有镜像，随着将来的版本更新，也许会增加镜像

(七). 菱形节点

代码：

```mermaid

graph LR

id1{This is the text in the box}

```

效果：

(八). 一个六边形节点

代码：

```mermaid

graph LR

id1{{来自六边形的凝视}}

```

效果：

(九). 平行四边形

代码：

```mermaid

graph LR

id1[/来自刀片的凝视/]

```

效果：

(十). 平行四边形（镜像）

代码：

```mermaid

graph LR

id1[\来自另一块刀片的凝视]

```

效果：

(十一). 梯形

代码：

```mermaid

graph LR

id1[/Christmas]

```

效果：

(十二). 梯形（镜像）

代码：

```mermaid

graph LR

id1[\小小托盘/]

```

效果：

五. 节点之间的连接

节点可以通过链接（或边——连接
可以有不同类型的链接或将文本字符串附加到链接

(一). 带箭头的连接

代码：

```mermaid

graph LR

A–>B

```

效果：

(二). 一个打开的连接

代码：

```mermaid

graph LR

A–>B

```

效果：

(三). 连接上的文字

代码：

```mermaid

graph LR

A-- 量子纠缠! —B

```

或

```mermaid

graph LR

A—|This is the text|B

```

效果：

(四). 带有箭头和文本的连接

代码：

```mermaid

emsp;graph LR

A–>|text|B

```

或

```mermaid

emsp;graph LR

A-- text -->B

```

效果：

(五). 带有箭头和文本的连接

代码：

```mermaid

emsp;graph LR

A–>|text|B

```

效果：

(六). 虚线连接

代码：

```mermaid

emsp;graph LR

A-.->B;

```

效果：

(七). 粗连接

代码：

```mermaid

emsp;graph LR

A ==> B

```

效果：

(八). 连接连接

可以在同一行中声明多个链接↓↓↓

代码：

```mermaid

emsp;graph LR

A – text --> B – text2 --> C

```

效果：

也可以在同一行中声明多个节点链接

代码：

```mermaid

emsp;graph LR

a --> b & c–> d

```

效果：

还可以用一种非常有表现力的方式来描述依赖关系

代码：

```mermaid

emsp;graph TB

A & B–> C & D

```

效果：

注：

如果您使用基本语法描述相同的图表，它将需要四行
警告，一个人可能会过度使用这使得图表更难以降价形式阅读
我想到了瑞典语 lagom 这个词，意味着，不要太多，也不要太少。这也适用于表达语法

(九). 测试版：新的箭头类型

当使用流程图而不是图形时，支持新类型的箭头

代码：

```mermaid

emsp;flowchart LR

A --o B

B --x C

```

效果：

(十). 测试版：多向箭头

当使用流程图而不是图形时，可以使用多向箭头

代码：

```mermaid

emsp;flowchart LR

A o–o B

B <–> C

C x–x D

```

效果：

(十一). 连接的最小长度

流程图中的每个节点最终都被分配到渲染图中的一个等级，即垂直或水平级别（取决于流程图的方向）
默认情况下，连接可以跨越任意数量的等级，但您可以通过在连接定义中添加额外的破折号来要求此连接比其他连接更长。
在以下示例中，在从节点B 到节点E的链接中添加了两个额外的破折号，因此它比常规链接多跨越两个等级

代码：

```mermaid

graph TD

A[Start] --> B{Is it?};

B -->|Yes| C[OK];

C --> D[Rethink];

D --> B;

B ---->|No| E[End];

```

效果（卖家秀）：

实际上（买家秀）：

	graph TDA[Start] --> B{Is it?};B -->|Yes| C[OK];C --> D[Rethink];D --> B;B ---->|No|  E[End];

~~臣妾做不到啊，CSDN-编辑器已炸裂，Visual Studio Code扩展包已看瞎~~

注：连接的长度可能超过渲染引擎请求的最大等级数

对于虚线或粗链接，要添加的字符是等号或点，总结如下表（仅是CSDN-Markdown编辑器支持的，编辑器比较高级的大佬可以增加长度）：

类型	表示
正常	—
正常带箭头	–>
厚	===
粗有箭头	==>
虚线	-.-
用箭头点缀	-.->