新增：文章内支持 Mermaid 流程图（更多 Mermaid 语法请参见官方文档）

2022-09-24 14:08:24 +08:00
parent d4a6426b6f
commit 5df47b7205
9 changed files with 732 additions and 30 deletions
--- a/docs/.vitepress/config.ts
+++ b/docs/.vitepress/config.ts
@@ -3,14 +3,17 @@ import { metaData } from './config/constants'
 import { head } from './config/head'
 import { markdown } from './config/markdown'
 import { themeConfig } from './config/theme'
+import { withMermaid } from 'vitepress-plugin-mermaid'

-export default defineConfig({
-  lang: metaData.lang,
-  title: metaData.title,
-  description: metaData.description,
+export default withMermaid(
+  defineConfig({
+    lang: metaData.lang,
+    title: metaData.title,
+    description: metaData.description,

-  head, // <head>内标签配置
-  lastUpdated: true, // 显示最后更新时间
-  markdown: markdown, // Markdown配置
-  themeConfig // 主题配置
-})
+    head, // <head>内标签配置
+    lastUpdated: true, // 显示最后更新时间
+    markdown: markdown, // Markdown配置
+    themeConfig // 主题配置
+  })
+)
--- a/docs/courses/java/01-Java语法入门/07-控制语句和流程图.md
+++ b/docs/courses/java/01-Java语法入门/07-控制语句和流程图.md
@@ -31,8 +31,8 @@ tags:

 **顺序控制语句** 是程序中最简单的流程控制，按照代码执行的先后顺序，依次执行，程序中的大多数代码都是这样执行的。[1]

-<!--
-```
+<!-- flowchart 格式
+```flow
 st=>start: 开始
 process1=>operation: 语句1
 process2=>operation: 语句2
@@ -43,13 +43,23 @@ st->process1->process2->process3->e
 ```
 -->

+<!-- flowchart 格式 图
 ![202010071016056](../../../public/img/2020/10/07/202010071016056.png)
+-->
+
+```mermaid
+flowchart LR
+    A([开始]) --> B[语句1]
+    B --> C[语句2]
+    C --> D[语句3]
+    D --> E([结束])
+```

 ## 选择控制语句

 本篇我们要学习的选择结构就属于 **选择控制语句** 。 **选择控制语句** 也被称为分支结构语句，选择结构有特定的语法规则，代码要执行具体的逻辑运算进行判断，逻辑运算的结果有两个或多个（真或假），所以产生了选择，根据不同的选择就会执行不同的代码。[1]

-<!--
+<!-- flowchart 格式
 ```
 st=>start: 开始
 cond=>condition: 条件表达式
@@ -62,13 +72,23 @@ cond(no)->e
 ```
 -->

+<!-- flowchart 格式 图
 ![202010071026397](../../../public/img/2020/10/07/202010071026397.png)
+-->
+
+```mermaid
+flowchart LR
+    A([开始]) --> B{条件表达式}
+    B -->|是| C[语句]
+    C --> D
+    B -->|否| D([结束])
+```

 ## 循环控制语句

 循环控制语句可以在满足循环条件的情况下，反复执行某一段代码，这段被重复执行的代码被称为循环体语句（循环操作）。当反复执行这个循环体时，需要在合适的时候把循环判断条件修改为 false ，从而结束循环，否则循环将一直执行下去，形成死循环。[1]

-<!--
+<!-- flowchart 格式
 ```
 st=>start: 开始
 cond=>condition: 循环条件
@@ -81,7 +101,17 @@ cond(no)->e
 ```
 -->

+<!-- flowchart 格式 图
 ![202010071026666](../../../public/img/2020/10/07/202010071026666.png)
+-->
+
+```mermaid
+flowchart LR
+    A([开始]) --> B{循环条件}
+    B -->|是| C[循环操作]
+    C --> B
+    B -->|否| D([结束])
+```

 ## 流程图

--- a/docs/courses/java/01-Java语法入门/08-if选择结构.md
+++ b/docs/courses/java/01-Java语法入门/08-if选择结构.md
@@ -30,11 +30,21 @@ tags:
 // 条件往往是由关系运算符来组成的判断
 // 条件的结果是一个boolean值，要么为true(真)，要么为false(假)
 if (条件) {
-    // 条件为真时执行的代码块
+    // 条件为真时执行的语句
 }
 ```

+<!--
 ![202010071229820](../../../public/img/2020/10/07/202010071229820.png)
+-->
+
+```mermaid
+flowchart LR
+    A([开始]) --> B{条件表达式}
+    B -->|是| C[语句]
+    C --> D
+    B -->|否| D([结束])
+```

 **案例需求：如果佩奇 Java 成绩大于 90 分，笔者将会奖励她一部 OnePlus 8 Pro。**  

@@ -132,15 +142,26 @@ System.out.println("程序结束！");
 ```java
 // 语法
 if (条件) {
-    // 代码块1
+    // 语句1
 } else {
-    // 代码块2
+    // 语句2
 }
 ```

 ![202010071230720](../../../public/img/2020/10/07/202010071230720.png)

+<!--
 ![202010071230796](../../../public/img/2020/10/07/202010071230796.png)
+-->
+
+```mermaid
+flowchart LR
+    A([开始]) --> B{条件表达式}
+    B -->|是| C[语句1]
+    C --> E
+    B -->|否| D[语句2]
+    D --> E([结束])
+```

 使用 `if-else` 来解决上述案例需求。

@@ -193,15 +214,29 @@ if (score < 60) {
 ```java
 // 语法
 if (条件1) {
-    // 代码块1
+    // 语句1
 } else if(条件2) { // 可以有多个else if
-    // 代码块2
+    // 语句2
 } else { // 可以省略
-    // 代码块3
+    // 语句3
 }
 ```

+<!--
 ![202010071230888](../../../public/img/2020/10/07/202010071230888.png)
+-->
+
+```mermaid
+flowchart LR
+    A([开始]) --> B{成绩 >= 80}
+    B -->|是| C[语句1]
+    C --> G
+    B -->|否| D{成绩 >= 60}
+    D -->|是| E[语句2]
+    E --> G
+    D -->|否| F[语句3]
+    F --> G([结束])
+```

 ```java
 // 存储考试成绩
@@ -212,7 +247,7 @@ int score = 90;
 * 注意事项：
 *     1.else if 必须配合if使用，if只能写一个，else if可以写很多个
 *     2.if-else if结构是自上而下进行判断选择的，只要上方的一个条件成立，下方的其他条件不再执行
- *     3.可以结合else来使用，当上方所有条件都不成立时，就会执行else代码块内容
+ *     3.可以结合else来使用，当上方所有条件都不成立时，就会执行else语句内容
 */
 if (score >= 80) {
    System.out.println("笔者奖励她一部OnePlus 8 Pro。");
@@ -236,16 +271,29 @@ if (score >= 80) {
 ```java
 if (条件1) {
    if (条件2) 
-        // 代码块1
+        // 语句1
    } else {
-        // 代码块2
+        // 语句2
    }
 } else {
-    // 代码块3
+    // 语句3
 }
 ```

+<!--
 ![202010071231951](../../../public/img/2020/10/07/202010071231951.png)
+-->
+
+```mermaid
+flowchart LR
+    A([开始]) --> B{条件1}
+    B -->|是| C{条件2}
+    C -->|是| D[语句1]
+    D --> F
+    C -->|否| E[语句2]
+    E -->|否| F
+    B -->|否| F([结束])
+```

 **案例需求：学校举行运动会，百米赛跑跑入10秒内的学生有资格进决赛，然后根据性别进入男子组或女子组**  

--- a/docs/courses/java/01-Java语法入门/10-循环结构.md
+++ b/docs/courses/java/01-Java语法入门/10-循环结构.md
@@ -79,7 +79,17 @@ while (循环条件) {

 从流程图中，我们可以看出它和选择结构的主要区别在于： **当条件成立且执行完操作后，它不会直接结束，而是会再次进入条件判断，直到条件不成立为止。** 

+<!--
 ![202010080738975](../../../public/img/2020/10/08/202010080738975.png)
+-->
+
+```mermaid
+flowchart LR
+    A([开始]) --> B{循环条件}
+    B -->|是| C[循环操作]
+    C --> B
+    B -->|否| D([结束])
+```

 ### 使用

@@ -187,7 +197,17 @@ do {

 从流程图中，我们可以看出：`do-while` 循环的执行讲究一个先 do（循环操作），然后再执行循环条件。而且 **无论条件是否能成立，它至少会执行一次循环操作** 。

+<!--
 ![202010080739706](../../../public/img/2020/10/08/202010080739706.png)
+-->
+
+```mermaid
+flowchart LR
+    A([开始]) --> B[循环操作]
+    B --> C{循环条件}
+    C -->|是| B
+    C -->|否| D([结束])
+```

 ### 使用

--- a/docs/public/screenshot/Mermaid流程图1.png
+++ b/docs/public/screenshot/Mermaid流程图1.png
--- a/docs/public/screenshot/Mermaid流程图2.png
+++ b/docs/public/screenshot/Mermaid流程图2.png