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 圖標(biāo)庫。具有直接在Markdown中畫流程圖，甘特圖，序列圖等功能。
- 使用
hexo-filter-mermaid-diagrams的 Hexo 插件來實現(xiàn)相應(yīng)的功能，在 Hexo 根目錄執(zhí)行如下命令安裝：
npm install hexo-filter-mermaid-diagrams --save
- 修改在 Matery 主題目錄
layout/_partial/下的footer.ejs文件，文末添加如下內(nèi)容：
<% 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配置文件添加如下內(nèi)容：
# mermaid chart。 依賴hexo-tag-mermaid
mermaid: ## mermaid url https://github.com/knsv/mermaid
enable: true # default false
version: "latest" # default v7.1.2
options: # find more api options from https://github.com/knsv/mermaid/blob/master/src/mermaidAPI.js
#startOnload: true // default true
執(zhí)行 hexo clean && hexo g 重新生成博客文件，在博文中使用含有 mermaid 標(biāo)簽的代碼塊包裹 mermaid 正文內(nèi)容 。
Mermaid 的配置
hexo-renderer-markdown-it 的所有配置，均在 Hexo 的根目錄下配置文件_config.yml 中進行配置。
簡單配置
hexo-renderer-markdown-it 提供三種簡單配置方式（配置級別）zero 、default 、commonmark 。
在 Hexo 的_config.yml 文件中可以配置以下內(nèi)容：
# Markdown-it config
# markdown: 'zero'
# markdown: 'default'
# markdown: 'commonmark'
每種簡單配置其默認的一些設(shè)置：
- zero ：禁用大多數(shù)解析器功能。僅支持斜體和粗體，甚至不支持所有原始 MarkDown 功能。
- default（GFM）：解析器的行為類似于 GitHub 規(guī)范。
- commonmark ：提供比 zero 預(yù)設(shè)更多的功能， 此設(shè)置將強制插件使用最新的 CommonMark 規(guī)范。
警告 ：選擇一種簡單配置，將阻止您使用任何附帶的插件。
高級配置
hexo-renderer-markdown-it 提供的高級配置，是對簡單配置的詳細定制。在 Hexo 的根目錄下 _config.yml 文件中配置以下內(nèi)容（官方提供的完整配置，沒有特殊需要不用再次修改）。
# Markdown-it config
markdown:
render:
html: true
xhtmlOut: false
breaks: true
linkify: true
typographer: true
quotes: '“”‘’'
plugins:
- markdown-it-abbr
- markdown-it-footnote
- markdown-it-ins
- markdown-it-sub
- markdown-it-sup
anchors:
level: 2
collisionSuffix: 'v'
permalink: true
permalinkClass: header-anchor
permalinkSymbol: ? # anchors 符號
- 渲染器（render）
# Markdown-it config
markdown:
render:
html: true
xhtmlOut: false
breaks: true
linkify: true
typographer: true
quotes: '“”‘’'
html ：定義文檔中的 HTML 內(nèi)容是否應(yīng)轉(zhuǎn)義或傳遞給最終結(jié)果。
html: true # 不轉(zhuǎn)義 HTML 內(nèi)容
html: false # 轉(zhuǎn)義 HTML 內(nèi)容，使標(biāo)簽作為文本輸出
xhtmlOut ：定義解析器是否將導(dǎo)出完全兼容 XHTML 的標(biāo)記。
xhtmlOut: true # 必須使用完全的 XHTML 代碼，換行必須為
xhtmlOut: false # 不必必使用完全的 XHTML 代碼，換行可以為
breaks ：使源文件中的換行符被解析為標(biāo)記，每次按 Enter 鍵都會創(chuàng)建換行符。
breaks: true # 每次會車換行相當(dāng)于一個標(biāo)簽
breaks: false # Pa,每次會車換行會被忽略
linkify ：解析器能夠?qū)⒅苯诱迟N到文本中的鏈接內(nèi)聯(lián)。
linkify: true # 類似鏈接的文本，作為鏈接輸出
linkify: false # 類似鏈接的文本，依然作為文本輸出
typographer：可以替換常見的排版元素。
typographer: true # 替換常見的排版元素
typographer: false # 不替換常見的排版元素
quotes ：定義單引號、雙引號如何被替換。
quotes: '“”‘’' # 'single'、"double" 變成 ‘single’、“double”
quotes: '??“”' # 'single'、"double" 變成 “single”、?single?
- 插件（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 Consortium
The 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：下標(biāo)插件。
H~2~O => H2O
H20
markdown-it-sup ：上標(biāo)插件。
e^th^
eth
- 錨（anchors）
# Markdown-it config
markdown:
anchors:
level: 2
collisionSuffix: 'v'
permalink: true
permalinkClass: header-anchor
permalinkSymbol: ?
level ：生成 Heading ID 的標(biāo)題等級。
-
collisionSuffix ：Heading ID 重復(fù)時，數(shù)字的后綴
-
permalink ：‘true’ ，則創(chuàng)建一個錨標(biāo)記，除標(biāo)題外還有一個固定鏈接
-
permalinkClass ：用于固定鏈接錨標(biāo)記的樣式
-
permalinkSymbol ：用于固定鏈接標(biāo)記的符號
- 參考 hexo-renderer-markdown-it 官網(wǎng)
繪制流程圖
簡介
所有流程圖都由 節(jié)點 、幾何形狀 和 邊 、箭頭 / 線 組成。mermaid 定義了這些節(jié)點和邊的制作和交互方式，還支持不同類型的箭頭、多方向箭頭以及與子圖的連接。
節(jié)點
- 默認節(jié)點。
默認節(jié)點展示在方格中，作為節(jié)點對象，也作為節(jié)點的名字。
mermaid 語法如下：文章來源地址http://www.zghlxwxcb.cn/news/detail-767586.html
flowchart LR
節(jié)點/文本
- 重命名節(jié)點。
默認節(jié)點對象就是節(jié)點的名稱，可以使用 node[xxx] 的形式來設(shè)置節(jié)點的別名。
mermaid 語法如下：
flowchart LR
node[框中的文本]
流程圖展開的方向
- 設(shè)置從上到下的方向（TD or TB）。
mermaid 語法如下：
flowchart TD
開始 --> 結(jié)束
- 設(shè)置從左到右的方向（LR）。
mermaid 語法如下：
flowchart LR
開始 --> 結(jié)束
- 設(shè)置從下到上的方向（DT or BT）。
mermaid 語法如下：
flowchart BT
開始 --> 結(jié)束
- 設(shè)置從右到左的方向（RL）。
mermaid 語法如下：
flowchart RL
開始 --> 結(jié)束
流程圖的展開方向總結(jié)如下表:
| 符號 | 說明 | 流程圖展開方向 |
|---|---|---|
TB |
top to bottom | 上到下 |
TD |
top-down/same as top to bottom | 上到下 |
BT |
bottom to top | 下到上 |
RL |
right to left | 右到左 |
LR |
left to right | 左到右 |
節(jié)點的形狀
- 矩形節(jié)點。
mermaid 語法如下：
flowchart LR
矩形節(jié)點
mermaid 語法如下：
flowchart RL
node[矩形節(jié)點]
- 圓角邊形節(jié)點。
mermaid 語法如下：
flowchart LR
node(圓角邊節(jié)點)
- 球場形節(jié)點。
mermaid 語法如下：
flowchart LR
node([體育場狀節(jié)點])
- 子程序形節(jié)點。
mermaid 語法如下：
flowchart LR
node[[子程序形節(jié)點]]
- 圓柱形節(jié)點。
mermaid 語法如下：
flowchart LR
node[(圓柱形節(jié)點)]
- 圓形節(jié)點。
mermaid 語法如下：
flowchart LR
node((圓形節(jié)點))
- 非對稱形節(jié)點。
mermaid 語法如下：
flowchart LR
node>非對稱形節(jié)點]
- 菱形節(jié)點。
mermaid 語法如下：
flowchart LR
node{菱形節(jié)點}
- 六角形節(jié)點。
mermaid 語法如下：
flowchart LR
node{{六角形節(jié)點}}
- 平行四邊形節(jié)點。
mermaid 語法如下：
flowchart TD
node1[/平行四邊形/]
node2[\平行四邊形\]
- 梯形節(jié)點。
mermaid 語法如下：
flowchart TD
A[/上梯形\]
B[\下梯形/]
- 環(huán)形節(jié)點。
mermaid 語法如下：
flowchart TD
node((環(huán)形節(jié)點))
節(jié)點形狀總結(jié)如下表：
| 形狀 | Mermaid 符號 |
|---|---|
| 矩形 |
xxx / node[xxx]
|
| 圓形 | (xxx) |
| 球場形 | ([xxx]) |
| 子程序形 | [[xxx]] |
| 圓柱形 | [(xxx)] |
| 非對稱形 | >xxx] |
| 菱形 | {xxx} |
| 六角形 | {{xxx}} |
| 平行四邊形 |
[/xxx/] / [\xxx\]
|
| 梯形 |
[/xxx\] / [\xxx/]
|
| 環(huán)形 | ((xxx)) |
節(jié)點間的連接
可以連接兩個節(jié)點通過一條線，可以設(shè)置不同類型的線和帶有文字的線，節(jié)點可以使用鏈接/邊連接，可以具有不同類型的鏈接或?qū)⑽谋咀址郊拥芥溄印?/p>
- 實線直接連接。
mermaid 語法如下：
flowchart LR
A --- B
- 單方向箭頭的實線連接。
- 從左到右方向。
mermaid 語法如下：
flowchart LR
A-->B
2.從右到左方向。
mermaid 語法如下：
flowchart RL
A-->B
- 從上到下方向。
mermaid 語法如下：
flowchart TB
A-->B
- 從下到上方向。
mermaid 語法如下：
flowchart BT
A-->B
- 帶文本的節(jié)點連接。
mermaid 語法如下：
flowchart LR
A-- 文本 ---B
A---|文本|B
- 單方向箭頭的文本線。
- 從左到右方向。
mermaid 語法如下：
flowchart LR
A-->|文本|B
A-- 文本 -->B
- 從右到左方向。
mermaid 語法如下：
flowchart RL
A-->|文本|B
A-- 文本 -->B
- 從上到下方向。
mermaid 語法如下：
flowchart TB
A-->|文本|B
A-- 文本 -->B
- 從下到上方向。
mermaid 語法如下：
flowchart BT
A-->|文本|B
A-- 文本 -->B
- 虛線和帶文本的虛線。
- 水平方向。
mermaid 語法如下：
flowchart LR
A-.->B
B-. 文本 .-> A
- 豎直方向。
mermaid 語法如下：
flowchart TB
A-.->B
B-. 文本 .-> A
- 加粗線。
- 水平方向。
mermaid 語法如下：
flowchart LR
A ==> B
B == 文本 ==> A
- 豎直方向。
mermaid 語法如下：
flowchart TB
A ==> B
B == 文本 ==> A
- 自定義的箭頭類型。
mermaid 語法如下：
flowchart LR
A --o B
B --x C
- 雙方向的箭頭。
mermaid 語法如下：
flowchart LR
A o--o B
B <--> C
C x--x D
節(jié)點間的連接線長度方向及類型匯總表如下：
| 類型 | 長度 1 | 長度 2 | 長度 3 |
|---|---|---|---|
| 實線 | -- |
--- |
---- |
| 帶箭頭的實線 | --> |
<--- |
----> |
| 加粗線 | === |
==== |
===== |
| 帶箭頭的加粗線 | ==> |
<=== |
<====> |
| 虛線 | -.- |
-..- |
-...- |
| 帶箭頭的虛線 | -.-> |
<-..- |
<-...-> |
- 連接鏈。
一行中（多個節(jié)點）可以聲明多條線。
mermaid 語法如下：
flowchart LR
A -- 文本 --> B -- 文本 --> C
可以在同一行中聲明多個節(jié)點鏈路。
mermaid 語法如下：
flowchart LR
A --> B & C--> D
可以在一行中描述一個依賴關(guān)系。
mermaid 語法如下：
flowchart TB
A & B--> C & D
上圖關(guān)系如果使用基本語法描述同一個圖，則需要四行進行描述。
mermaid 語法如下：
flowchart TB
A --> C
A --> D
B --> C
B --> D
- 鏈路的最小長度。
流程圖中默認情況下，連接可以跨越任意數(shù)量的列組，但可以通過在鏈接定義中添加額外的短劃線來要求任何鏈接比其他鏈接長，在下面的示例中，在來自節(jié)點的鏈接中添加了兩個額外的破折號。
mermaid 語法如下：
flowchart TD
A[Start] --> B{Is it?}
B -->|Yes| C[OK]
C --> D[Rethink]
D --> B
B ---->|No| E[End]
當(dāng)鏈接標(biāo)簽寫在鏈接的中間時，必須在鏈接的右側(cè)添加額外的破折號，以下示例與前面的示例等效。
mermaid 語法如下：
flowchart TD
A[Start] --> B{Is it?}
B -- Yes --> C[OK]
C --> D[Rethink]
D --> B
B -- No ----> E[End]
- 破壞語法的特殊字符。
為了呈現(xiàn)更麻煩的字符，可以將文本放在引號中。
mermaid 語法如下：
flowchart LR
node["重慶(郵電)大學(xué) "]
- 轉(zhuǎn)義字符的實體代碼。
可以使用此處示例的語法轉(zhuǎn)義字符。
mermaid 語法如下：
flowchart LR
A["A double quote:#quot;"] -->B["A dec char:#9829;"]
給出的數(shù)字以 10 為基數(shù)，所以 # 可編碼為#35;，還支持使用HTML 字符名稱。
子圖
- mermaid 定義子圖使用下面的方式。
subgraph title
graph definition
end
下面是一個例子。
mermaid 語法如下：
flowchart TB
c1-->a2
subgraph one
a1-->a2
end
subgraph two
b1-->b2
end
subgraph three
c1-->c2
end
- 為子圖設(shè)置顯式 ID 。
子圖設(shè)置顯示 ID 可以使用下面的方式。
mermaid 語法如下：
flowchart TB
c1-->a2
subgraph ide1 [xxx]
a1-->a2
end
- 設(shè)置子圖的邊。
使用圖形類型流程圖，還可以如下面的流程圖中那樣設(shè)置子圖的邊和子圖的邊。
mermaid 語法如下：
flowchart TB
c1-->a2
subgraph one
a1-->a2
end
subgraph two
b1-->b2
end
subgraph three
c1-->c2
end
one --> two
three --> two
two --> c2
- 設(shè)置子圖方向。
在 graphtype 流程圖中，可以使用方向語句（direction RL/LR/TB/BT）來設(shè)置子圖將呈現(xiàn)的方向。
mermaid 語法如下：
flowchart LR
subgraph TOP
direction TB
subgraph B1
direction RL
i1 -->f1
end
subgraph B2
direction BT
i2 -->f2
end
end
A --> TOP --> B
B1 --> B2
樣式配置
在流程圖中可以通過 style 關(guān)鍵字配置邊框樣式，包括填充顏色、邊線顏色、邊線實虛等等?？蓞⒖?CSS 樣式表。文章來源：http://www.zghlxwxcb.cn/news/detail-767586.html
mermaid 語法如下：
flowchart LR
node1(開始)-->node2(結(jié)束)
style node1 fill: #f9f, stroke: #333, stroke-width: 4px;
style node2 fill: #ccf, stroke: #f66, stroke-width: 2px, stroke-dasharray: 5,5;
- 參考 Mermaid 官網(wǎng)教程
到了這里，關(guān)于Mermaid安裝及繪制流程圖的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
