【CSDN】 MarkDown编辑器 - Mermaid流程图

前言

自从接触了 CSDN 的 MarkDown 编辑器 ,我仿佛发现了一个宝矿…

CSDN 官方也很贴心的给出了侧边栏的帮助文档，帮我们尽快的熟悉。
其中，注释、 LaTeX 数学公式、甘特图、 UML 图以及流程图引起了我的注意。

以下为官方提供的 Mermaid 流程图示例

```mermaid
graph LR
A[长方形] -- 链接 --> B((圆))
A --> C(圆角长方形)
B --> D{菱形}
C --> D
```

效果

该篇主要讲解 Mermaid 流程图 ,大部分内容参考自 mermaid 文档。

查阅参考文档发现有些内容在 CSDN 上并不适用，亦或许是我使用的姿势不对？
在此总结一下我的一些 Mermaid 使用心得。

正文

布局方向

从上至下

```mermaid
graph TD
Start --> Stop
```

效果

从右至左

```mermaid
graph RL
Start --> Stop
```

效果

小结

该项可设置的参数有：
TB - 顶部到底部
BT - 底部到顶部
RL - 由右至左
LR - 由左至右
TD - 与 TB 相同

节点形状

默认

首先是最简洁的方式 A

```mermaid
graph RL
A
```

效果

显示文本

这里可以发现，A不仅是节点名，还作为节点文本显示了出来。
那么我先节点A内显示其他内容该怎么操作呢？

```mermaid
graph RL
A[text]
```

效果

节点框图

到目前，我们的节点都是长方形外框，那么有没有别的显示方式呢？
答案是有，还很多！

圆边长方形

```mermaid
graph RL
A(text)
```

效果

圆形

```mermaid
graph RL
A((text))
```

效果

非对称体

```mermaid
graph RL
A>text]
```

效果

…
此外还有很多，就不一一展示了。
小结

符号	图像
[text]	长方形，也是默认值
(text)	圆角长方形
((text))	圆形
text]	有点像标签的非对称体
{text}	菱形
{{text}}	六角形
[/text\ ]	上梯形（为避免转义，这里的 "\" 后面多加了一个空格）
[\text/]	下梯形

链接

箭头链接

```mermaid
graph LR
A[text1] --> B[text2]
```

效果

直线连接

```mermaid
graph LR
A[text1] --- B[text2]
```

效果

虚线链接

```mermaid
graph LR
A-.->B
```

效果

粗线链接

```mermaid
graph LR
A==>B
```

效果

带文字的链接

```mermaid
graph LR
A-->|text|B
```

效果

小小结 一下，有以下几种方式：

A —|text|B
A --text—B
A–>|text|B
A-- text -->B
A-. text .->B
A== text==>B

破坏语法的特殊字符

文本加引号，以呈现麻烦的字符
如果没有“”,下文效果将无法呈现。

```mermaid
graph LR
A["This is the (text) in the box"]
```

效果

子图

示例

```mermaid
graph LR
A-->B
subgraph test
B-->C
end
```

效果

小小结

subgraph 子图名称
// 此处为子图内容
end

样式

链接样式貌似 CSDN 不支持，这里仅介绍 节点样式
示例

```mermaid
graph LR
A(Start)-->B(Stop)
style A fill:#f9f,stroke:#333,stroke-width:4px
style B fill:#ccf,stroke:#f66,stroke-width:2px,stroke-dasharray: 5, 5
```

效果

小小结

style 节点名
fill: 填充颜色，
stroke: 边框颜色，
stroke-width: 边框宽度，
stroke-dasharray: 虚线长度，未知…

结语

若发现文章 有误 或 有未添加的 CSDN 支持的 Mermaid 语法 & 特性 欢迎留言补充。希望本文对你能有所帮助~