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/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

执行 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: 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: true # 不转义 HTML 内容
html: false # 转义 HTML 内容，使标签作为文本输出

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

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

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

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

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

*[HTML]: Hyper Text Markup Language
*[W3C]:  World Wide Web Consortium

The HTML specification
is maintained by the W3C.

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)

++inserted++

++inserted++

H~2~O => H2O

H₂0

e^th^

e^th

锚（anchors）

# Markdown-it config
markdown:
  anchors:
    level: 2
    collisionSuffix: 'v'
    permalink: true
    permalinkClass: header-anchor
    permalinkSymbol: ¶

collisionSuffix ：Heading ID 重复时，数字的后缀
permalink ：‘true’ ，则创建一个锚标记，除标题外还有一个固定链接
permalinkClass ：用于固定链接锚标记的样式
permalinkSymbol ：用于固定链接标记的符号

参考 hexo-renderer-markdown-it 官网

绘制流程图

简介

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

节点

默认节点。

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

flowchart LR
    节点/文本

重命名节点。

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

flowchart LR
    node[框中的文本]

流程图展开的方向

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

flowchart TD
    开始 --> 结束

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

flowchart LR
    开始 --> 结束

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

flowchart BT
    开始 --> 结束

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

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	左到右

节点的形状

矩形节点。

flowchart LR
     矩形节点

flowchart RL
    node[矩形节点]

圆角边形节点。

flowchart LR
    node(圆角边节点)

球场形节点。

flowchart LR
    node([体育场状节点])

子程序形节点。

flowchart LR
    node[[子程序形节点]]

圆柱形节点。

flowchart LR
    node[(圆柱形节点)]

圆形节点。

flowchart LR
    node((圆形节点))

非对称形节点。

flowchart LR
    node>非对称形节点]

菱形节点。

flowchart LR
    node{菱形节点}

六角形节点。

flowchart LR
    node{{六角形节点}}

平行四边形节点。

flowchart TD
    node1[/平行四边形/]
    node2[\平行四边形\]

梯形节点。

flowchart TD
    A[/上梯形\]
    B[\下梯形/]

环形节点。

flowchart TD
    node((环形节点))

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

节点间的连接

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

实线直接连接。

flowchart LR
    A --- B

单方向箭头的实线连接。

从左到右方向。

flowchart LR
    A-->B

2.从右到左方向。

flowchart RL
    A-->B

从上到下方向。

flowchart TB
    A-->B

从下到上方向。

flowchart BT
    A-->B

带文本的节点连接。

flowchart LR
    A-- 文本 ---B
    A---|文本|B

单方向箭头的文本线。

从左到右方向。

flowchart LR
    A-->|文本|B
    A-- 文本 -->B

从右到左方向。

flowchart RL
    A-->|文本|B
    A-- 文本 -->B

从上到下方向。

flowchart TB
    A-->|文本|B
    A-- 文本 -->B

从下到上方向。

flowchart BT
    A-->|文本|B
    A-- 文本 -->B

虚线和带文本的虚线。

水平方向。

flowchart LR
   A-.->B
   B-. 文本 .-> A

竖直方向。

flowchart TB
   A-.->B
   B-. 文本 .-> A

加粗线。

水平方向。

flowchart LR
   A ==> B
   B == 文本 ==> A

竖直方向。

flowchart TB
   A ==> B
   B == 文本 ==> A

自定义的箭头类型。

flowchart LR
    A --o B
    B --x C

双方向的箭头。

flowchart LR
    A o--o B
    B <--> C
    C x--x D

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

连接链。

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

flowchart LR
   A -- 文本 --> B -- 文本 --> C

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

flowchart LR
   A --> B & C--> D

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

flowchart TB
    A & B--> C & D

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

flowchart TB
    A --> C
    A --> D
    B --> C
    B --> D

链路的最小长度。

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

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

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

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

破坏语法的特殊字符。

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

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

转义字符的实体代码。

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

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

子图

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

subgraph title
    graph definition
end

下面是一个例子。

flowchart TB
    c1-->a2
    subgraph one
    a1-->a2
    end
    subgraph two
    b1-->b2
    end
    subgraph three
    c1-->c2
    end

为子图设置显式 ID 。

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

flowchart TB
    c1-->a2
    subgraph ide1 [xxx]
    a1-->a2
    end

设置子图的边。

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

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

设置子图方向。

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

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 关键字配置边框样式，包括填充颜色、边线颜色、边线实虚等等。可参考 CSS 样式表。

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

参考 Mermaid 官网教程