Mermaid安装及绘制流程图

---

Mermaid 插件的安装

---

---

卸载 Hexo 默认的渲染器

---

默认的 Hexo 安装包括一个 MarkDown 渲染器插件，该插件使用 hexo-renderer-marked ，而 hexo-renderer-markdown-it 是一款用于 Markdown 解析和渲染的插件，用于替换 Hexo 默认自带的 Markdown 渲染器，提供了更丰富的 Markdown 解析和渲染，替换命令如下：

npm un hexo-renderer-marked --save

npm i hexo-renderer-markdown-it --save

---

添加 Mermaid 支持

---

Mermaid 是一个支持 MarkDown 的流行的 js 图标库。具有直接在Markdown中画流程图，甘特图，序列图等功能。

• 使用 hexo-filter-mermaid-diagrams 的 Hexo 插件来实现相应的功能，在 Hexo 根目录执行如下命令安装：

npm install hexo-filter-mermaid-diagrams --save

• 修改在 Matery 主题目录 layout/_partial/ 下的 footer.ejs 文件，文末添加如下内容：

<% if (theme.mermaid.enable) { %><script src='https://unpkg.com/mermaid@<%= theme.mermaid.version %>/dist/mermaid.min.js'></script><script>if (window.mermaid) {mermaid.initialize({theme: 'forest'});}</script>
<% } %>

• 在 Hexo 根目录文件下 _config.yml 配置文件添加如下内容：

# mermaid chart。 依赖hexo-tag-mermaid
mermaid: ## mermaid url https://github.com/knsv/mermaidenable: true  # default falseversion: "latest" # default v7.1.2options:  # find more api options from https://github.com/knsv/mermaid/blob/master/src/mermaidAPI.js#startOnload: true  // default true

执行 hexo clean && hexo g 重新生成博客文件，在博文中使用含有 mermaid 标签的代码块包裹 mermaid 正文内容 。

---

Mermaid 的配置

---

hexo-renderer-markdown-it 的所有配置，均在 Hexo 的根目录下配置文件_config.yml 中进行配置。

---

简单配置

---

hexo-renderer-markdown-it 提供三种简单配置方式（配置级别）zero 、default 、commonmark 。

在 Hexo 的_config.yml 文件中可以配置以下内容：

# Markdown-it config
# markdown: 'zero'
# markdown: 'default'
# markdown: 'commonmark'

每种简单配置其默认的一些设置：

• zero ：禁用大多数解析器功能。仅支持斜体和粗体，甚至不支持所有原始 MarkDown 功能。
• default（GFM）：解析器的行为类似于 GitHub 规范。
• commonmark ：提供比 zero 预设更多的功能， 此设置将强制插件使用最新的 CommonMark 规范。

警告 ：选择一种简单配置，将阻止您使用任何附带的插件。

---

高级配置

---

hexo-renderer-markdown-it 提供的高级配置，是对简单配置的详细定制。在 Hexo 的根目录下 _config.yml 文件中配置以下内容（官方提供的完整配置，没有特殊需要不用再次修改）。

# Markdown-it config
markdown:render:html: truexhtmlOut: falsebreaks: truelinkify: truetypographer: truequotes: '“”‘’'plugins:- markdown-it-abbr- markdown-it-footnote- markdown-it-ins- markdown-it-sub- markdown-it-supanchors:level: 2collisionSuffix: 'v'permalink: truepermalinkClass: header-anchorpermalinkSymbol: ¶ # anchors 符号

1. 渲染器（render）

# Markdown-it config
markdown:render:html: truexhtmlOut: falsebreaks: truelinkify: truetypographer: truequotes: '“”‘’'

html ：定义文档中的 HTML 内容是否应转义或传递给最终结果。

html: true # 不转义 HTML 内容
html: false # 转义 HTML 内容，使标签作为文本输出

xhtmlOut ：定义解析器是否将导出完全兼容 XHTML 的标记。

xhtmlOut: true # 必须使用完全的 XHTML 代码，换行必须为 
xhtmlOut: false # 不必必使用完全的 XHTML 代码，换行可以为 

breaks ：使源文件中的换行符被解析为标记，每次按 Enter 键都会创建换行符。

breaks: true # 每次会车换行相当于一个标签
breaks: false # Pa,每次会车换行会被忽略

linkify ：解析器能够将直接粘贴到文本中的链接内联。

linkify: true # 类似链接的文本，作为链接输出
linkify: false # 类似链接的文本，依然作为文本输出

typographer：可以替换常见的排版元素。

typographer: true # 替换常见的排版元素
typographer: false # 不替换常见的排版元素

quotes ：定义单引号、双引号如何被替换。

quotes: '“”‘’' # 'single'、"double" 变成 ‘single’、“double”
quotes: '«»“”' # 'single'、"double" 变成 “single”、«single»

2. 插件（plugins）

hexo-renderer-markdown-it 默认集成 5 个markdown-it 插件。

# Markdown-it config
markdown:plugins:- markdown-it-abbr- markdown-it-footnote- markdown-it-ins- markdown-it-sub- markdown-it-sup

markdown-it-abbr ：缩写插件。

*[HTML]: Hyper Text Markup Language
*[W3C]:  World Wide Web ConsortiumThe HTML specification
is maintained by the W3C.

markdown-it-footnote ：脚注插件。

basic footnote[^1]
here is an inline footnote[^2](inline footnote)
and another one[^3]
and another one[^4][^1]: basic footnote content
[^3]: paragraph footnote content
[^4]: footnote content with some [markdown](https://en.wikipedia.org/wiki/Markdown)

markdown-it-ins ：插入插件（下划线插件）。

++inserted++ 

++inserted++

markdown-it-sub：下标插件。

H~2~O => H2O

H₂0

markdown-it-sup ：上标插件。

e^th^ 

e^th

3. 锚（anchors）

# Markdown-it config
markdown:anchors:level: 2collisionSuffix: 'v'permalink: truepermalinkClass: header-anchorpermalinkSymbol: ¶

level ：生成 Heading ID 的标题等级。

• collisionSuffix ：Heading ID 重复时，数字的后缀

• permalink ：‘true’ ，则创建一个锚标记，除标题外还有一个固定链接

• permalinkClass ：用于固定链接锚标记的样式

• permalinkSymbol ：用于固定链接标记的符号

---

• 参考 hexo-renderer-markdown-it 官网

---

绘制流程图

---

---

简介

---

所有流程图都由 节点 、几何形状 和 边 、箭头 / 线 组成。mermaid 定义了这些节点和边的制作和交互方式，还支持不同类型的箭头、多方向箭头以及与子图的连接。

---

节点

---

• 默认节点。

默认节点展示在方格中，作为节点对象，也作为节点的名字。

mermaid 语法如下：

flowchart LR节点/文本

---

• 重命名节点。

默认节点对象就是节点的名称，可以使用 node[xxx] 的形式来设置节点的别名。

mermaid 语法如下：

flowchart LRnode[框中的文本]

---

---

流程图展开的方向

---

• 设置从上到下的方向（TD or TB）。

mermaid 语法如下：

flowchart TD开始 --> 结束

---

• 设置从左到右的方向（LR）。

mermaid 语法如下：

flowchart LR开始 --> 结束

---

• 设置从下到上的方向（DT or BT）。

mermaid 语法如下：

flowchart BT开始 --> 结束

---

• 设置从右到左的方向（RL）。

mermaid 语法如下：

flowchart RL开始 --> 结束

---

流程图的展开方向总结如下表:

符号	说明	流程图展开方向
TB	top to bottom	上到下
TD	top-down/same as top to bottom	上到下
BT	bottom to top	下到上
RL	right to left	右到左
LR	left to right	左到右

---

节点的形状

---

• 矩形节点。

mermaid 语法如下：

flowchart LR矩形节点

---

mermaid 语法如下：

flowchart RLnode[矩形节点]

---

• 圆角边形节点。

mermaid 语法如下：

flowchart LRnode(圆角边节点)

---

• 球场形节点。

mermaid 语法如下：

flowchart LRnode([体育场状节点])

---

• 子程序形节点。

mermaid 语法如下：

flowchart LRnode[[子程序形节点]]

---

• 圆柱形节点。

mermaid 语法如下：

flowchart LRnode[(圆柱形节点)]

---

• 圆形节点。

mermaid 语法如下：

flowchart LRnode((圆形节点))

---

• 非对称形节点。

mermaid 语法如下：

flowchart LRnode>非对称形节点]

---

• 菱形节点。

mermaid 语法如下：

flowchart LRnode{菱形节点}

---

• 六角形节点。

mermaid 语法如下：

flowchart LRnode{{六角形节点}}

---

• 平行四边形节点。

mermaid 语法如下：

flowchart TDnode1[/平行四边形/]node2[\平行四边形\]

---

• 梯形节点。

mermaid 语法如下：

flowchart TDA[/上梯形\]B[\下梯形/]

---

• 环形节点。

mermaid 语法如下：

flowchart TDnode((环形节点))

---

节点形状总结如下表：

形状	Mermaid 符号
矩形	xxx / node[xxx]
圆形	(xxx)
球场形	([xxx])
子程序形	[[xxx]]
圆柱形	[(xxx)]
非对称形	>xxx]
菱形	{xxx}
六角形	{{xxx}}
平行四边形	[/xxx/] / [\xxx\]
梯形	[/xxx\] / [\xxx/]
环形	((xxx))

---

节点间的连接

---

可以连接两个节点通过一条线，可以设置不同类型的线和带有文字的线，节点可以使用链接/边连接，可以具有不同类型的链接或将文本字符串附加到链接。

• 实线直接连接。

mermaid 语法如下：

flowchart LRA --- B

---

• 单方向箭头的实线连接。

1. 从左到右方向。

mermaid 语法如下：

flowchart LRA-->B

---

2.从右到左方向。

mermaid 语法如下：

flowchart RLA-->B

---

3. 从上到下方向。

mermaid 语法如下：

flowchart TBA-->B

---

4. 从下到上方向。

mermaid 语法如下：

flowchart BTA-->B

---

• 带文本的节点连接。

mermaid 语法如下：

flowchart LRA-- 文本 ---BA---|文本|B

---

• 单方向箭头的文本线。

1. 从左到右方向。

mermaid 语法如下：

flowchart LRA-->|文本|BA-- 文本 -->B

---

2. 从右到左方向。

mermaid 语法如下：

flowchart RLA-->|文本|BA-- 文本 -->B

---

3. 从上到下方向。

mermaid 语法如下：

flowchart TBA-->|文本|BA-- 文本 -->B

---

4. 从下到上方向。

mermaid 语法如下：

flowchart BTA-->|文本|BA-- 文本 -->B

---

• 虚线和带文本的虚线。

1. 水平方向。

mermaid 语法如下：

flowchart LRA-.->BB-. 文本 .-> A

---

2. 竖直方向。

mermaid 语法如下：

flowchart TBA-.->BB-. 文本 .-> A

---

• 加粗线。

1. 水平方向。

mermaid 语法如下：

flowchart LRA ==> BB == 文本 ==> A

---

2. 竖直方向。

mermaid 语法如下：

flowchart TBA ==> BB == 文本 ==> A

---

• 自定义的箭头类型。

mermaid 语法如下：

flowchart LRA --o BB --x C

---

• 双方向的箭头。

mermaid 语法如下：

flowchart LRA o--o BB <--> CC x--x D

---

节点间的连接线长度方向及类型汇总表如下：

类型	长度 1	长度 2	长度 3
实线	--	---	----
带箭头的实线	-->	<---	---->
加粗线	===	====	=====
带箭头的加粗线	==>	<===	<====>
虚线	-.-	-..-	-...-
带箭头的虚线	-.->	<-..-	<-...->

• 连接链。

一行中（多个节点）可以声明多条线。

mermaid 语法如下：

flowchart LRA -- 文本 --> B -- 文本 --> C

---

可以在同一行中声明多个节点链路。

mermaid 语法如下：

flowchart LRA --> B & C--> D

---

可以在一行中描述一个依赖关系。

mermaid 语法如下：

flowchart TBA & B--> C & D

---

上图关系如果使用基本语法描述同一个图，则需要四行进行描述。

mermaid 语法如下：

flowchart TBA --> CA --> DB --> CB --> D

---

• 链路的最小长度。

流程图中默认情况下，连接可以跨越任意数量的列组，但可以通过在链接定义中添加额外的短划线来要求任何链接比其他链接长，在下面的示例中，在来自节点的链接中添加了两个额外的破折号。

mermaid 语法如下：

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

---

当链接标签写在链接的中间时，必须在链接的右侧添加额外的破折号，以下示例与前面的示例等效。

mermaid 语法如下：

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

---

• 破坏语法的特殊字符。

为了呈现更麻烦的字符，可以将文本放在引号中。

mermaid 语法如下：

flowchart LRnode["重庆(邮电)大学 "]

---

• 转义字符的实体代码。

可以使用此处示例的语法转义字符。

mermaid 语法如下：

    flowchart LRA["A double quote:#quot;"] -->B["A dec char:#9829;"]

给出的数字以 10 为基数，所以 # 可编码为#35;，还支持使用HTML 字符名称。

---

子图

---

• mermaid 定义子图使用下面的方式。

subgraph titlegraph definition
end

下面是一个例子。

mermaid 语法如下：

flowchart TBc1-->a2subgraph onea1-->a2endsubgraph twob1-->b2endsubgraph threec1-->c2end

---

• 为子图设置显式 ID 。

子图设置显示 ID 可以使用下面的方式。

mermaid 语法如下：

flowchart TBc1-->a2subgraph ide1 [xxx]a1-->a2end

---

• 设置子图的边。

使用图形类型流程图，还可以如下面的流程图中那样设置子图的边和子图的边。

mermaid 语法如下：

flowchart TBc1-->a2subgraph onea1-->a2endsubgraph twob1-->b2endsubgraph threec1-->c2endone --> twothree --> twotwo --> c2

---

• 设置子图方向。

在 graphtype 流程图中，可以使用方向语句（direction RL/LR/TB/BT）来设置子图将呈现的方向。

mermaid 语法如下：

flowchart LRsubgraph TOPdirection TBsubgraph B1direction RLi1 -->f1endsubgraph B2direction BTi2 -->f2endendA --> TOP --> BB1 --> B2

样式配置

在流程图中可以通过 style 关键字配置边框样式，包括填充颜色、边线颜色、边线实虚等等。可参考 CSS 样式表。

mermaid 语法如下：

flowchart LRnode1(开始)-->node2(结束)style node1 fill: #f9f, stroke: #333, stroke-width: 4px;style node2 fill: #ccf, stroke: #f66, stroke-width: 2px, stroke-dasharray: 5,5;

---

• 参考 Mermaid 官网教程

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！