feat: add mermaid

Author: zyao89

docs/markdown/advance/5-import.md

@@ -20,26 +20,26 @@
 **输入**
 
 ```
-<<< ./markdown/advance/fragments/snippet.js{2}
+<<< ./fragments/snippet.js{2}
 ```
 
 **输出**
 
-<<< ./markdown/advance/fragments/snippet.js{2}
+<<< ./fragments/snippet.js{2}
 
 
 为了只导入对应部分的代码，你也可运用 [VS Code region](https://code.visualstudio.com/docs/editor/codebasics#_folding)。你可以在文件路径后方的 `#` 紧接着提供一个自定义的区域名称（预设为 `snippet` ）
 
 **输入**
 
 ``` md
-<<< ./markdown/advance/fragments/snippet-with-region.js#snippet{1}
+<<< ./fragments/snippet-with-region.js#snippet{1}
 ```
 
 **代码文件**
 
-<<< ./markdown/advance/fragments/snippet-with-region.js
+<<< ./fragments/snippet-with-region.js
 
 **输出**
 
-<<< ./markdown/advance/fragments/snippet-with-region.js#snippet{1}
+<<< ./fragments/snippet-with-region.js#snippet{1}

docs/markdown/advance/6-include.md

@@ -23,26 +23,26 @@
 **输入**
 
 ```
-<<< include(./markdown/advance/fragments/snippet.js)
+<<< include(./fragments/snippet.js)
 ```
 
 **输出**
 
-<<<include(./markdown/advance/fragments/snippet.js)
+<<<include(./fragments/snippet.js)
 
 
 为了只导入对应部分的代码，你也可运用 [VS Code region](https://code.visualstudio.com/docs/editor/codebasics#_folding)。你可以在文件路径后方的 `#` 紧接着提供一个自定义的区域名称（预设为 `snippet` ）
 
 **输入**
 
 ``` md
-<<< include(./markdown/advance/fragments/snippet-with-region.js#snippet)
+<<< include(./fragments/snippet-with-region.js#snippet)
 ```
 
 **代码文件**
 
-<<< ./markdown/advance/fragments/snippet-with-region.js
+<<< ./fragments/snippet-with-region.js
 
 **输出**
 
-<<<include(./markdown/advance/fragments/snippet-with-region.js#snippet)
+<<<include(./fragments/snippet-with-region.js#snippet)

docs/markdown/advance/7-mermaid.md

@@ -0,0 +1,56 @@
+# Mermaid
+
+Mermaid 可让您使用文本和代码创建图表和可视化效果。
+
+![](./images/2021-11-01-14-23-07.png)
+
+具体使用可参考 [Mermaid-js](https://mermaid-js.github.io/mermaid/#/)
+
+## 例子
+
+### Demo1
+
+    ```mermaid
+    flowchart TD
+        A[Start] --> B{Is it?};
+        B -->|Yes| C[OK];
+        C --> D[Rethink];
+        D --> B;
+        B ---->|No| E[End];
+    ```
+
+```mermaid
+flowchart TD
+    A[Start] --> B{Is it?};
+    B -->|Yes| C[OK];
+    C --> D[Rethink];
+    D --> B;
+    B ---->|No| E[End];
+```
+
+### Demo2
+
+    ```mermaid
+    journey
+        title My working day
+        section Go to work
+        Make tea: 5: Me
+        Go upstairs: 3: Me
+        Do work: 1: Me, Cat
+        section Go home
+        Go downstairs: 5: Me
+        Sit down: 5: Me
+    ```
+
+```mermaid
+journey
+    title My working day
+    section Go to work
+      Make tea: 5: Me
+      Go upstairs: 3: Me
+      Do work: 1: Me, Cat
+    section Go home
+      Go downstairs: 5: Me
+      Sit down: 5: Me
+```
+