graph

Author: HowCam

AI-edit-skill.md

@@ -156,6 +156,56 @@ let b = 2;
 ![描述](url){ width=50% }
 ```
 
+### 3.10 Mermaid 流程图
+
+使用 Mermaid.js 渲染流程图、思维导图等：
+
+**配置**：已在 `mkdocs.yml` 中添加 Mermaid CDN 和初始化脚本。
+
+**使用方法**：使用 HTML 嵌入模式而非代码块模式：
+
+```html
+<div class="mermaid">
+graph TB
+    A[父节点] --> B[子节点1]
+    A --> C[子节点2]
+    B --> B1[孙节点]
+</div>
+```
+
+**常用图表类型**：
+
+```html
+<!-- 流程图：从上到下 -->
+<div class="mermaid">
+graph TB
+    A[开始] --> B[处理]
+    B --> C[结束]
+</div>
+```
+
+```html
+<!-- 流程图：从左到右 -->
+<div class="mermaid">
+graph LR
+    A[输入] --> B[处理] --> C[输出]
+</div>
+```
+
+```html
+<!-- 思维导图样式 -->
+<div class="mermaid">
+graph TB
+    A[中心主题] --> B[分支1]
+    A --> C[分支2]
+    A --> D[分支3]
+    B --> B1[子主题]
+    B --> B2[子主题]
+</div>
+```
+
+**主题颜色**：当前使用 `forest` 主题（绿色系）。
+
 ---
 
 ## 4. 内容模式

docs/assets/mermaid-init.js

@@ -0,0 +1,12 @@
+// 初始化 Mermaid
+document.addEventListener("DOMContentLoaded", function() {
+    mermaid.initialize({
+        startOnLoad: true,
+        theme: 'forest',
+        securityLevel: 'loose',
+        flowchart: {
+            useMaxWidth: true,
+            htmlLabels: true
+        }
+    });
+});

docs/chemistry/senior/XB-3/C1/review.md

@@ -4,7 +4,7 @@
 
 ### 知识框架
 
-```mermaid
+<div class="mermaid">
 graph TB
     A[第一章 有机化合物的结构特点与研究方法] --> B[第一节 有机化合物的结构特点]
     A --> C[第二节 研究有机化合物的一般方法]
@@ -17,7 +17,7 @@ graph TB
     C --> C1[分离与提纯]
     C --> C2[分子式的测定]
     C --> C3[结构式的测定]
-```
+</div>
 
 ### 重点知识梳理
 

docs/chemistry/senior/XB-3/C2/review.md

@@ -4,7 +4,7 @@
 
 ### 知识框架
 
-```mermaid
+<div class="mermaid">
 graph TB
     A[第二章 烃] --> B[第一节 烷烃]
     A --> C[第二节 烯烃 炔烃]
@@ -18,7 +18,7 @@ graph TB
     D --> D1[苯的结构]
     D --> D2[苯的性质]
     D --> D3[苯的同系物]
-```
+</div>
 
 ### 重点知识梳理
 

docs/chemistry/senior/XB-3/C3/review.md

@@ -4,7 +4,7 @@
 
 ### 知识框架
 
-```mermaid
+<div class="mermaid">
 graph TB
     A[第三章 烃的衍生物] --> B[第一节 卤代烃]
     A --> C[第二节 醇 酚]
@@ -25,7 +25,7 @@ graph TB
     E --> E3[羧酸衍生物]
     F --> F1[有机合成路线设计]
     F --> F2[常见合成路线]
-```
+</div>
 
 ### 重点知识梳理
 

docs/chemistry/senior/XB-3/C4/review.md

@@ -4,7 +4,7 @@
 
 ### 知识框架
 
-```mermaid
+<div class="mermaid">
 graph TB
     A[第四章 生物大分子] --> B[第一节 糖类]
     A --> C[第二节 蛋白质]
@@ -21,7 +21,7 @@ graph TB
     D --> D2[DNA的结构]
     D --> D3[RNA的结构]
     D --> D4[核酸的生物功能]
-```
+</div>
 
 ### 重点知识梳理
 

docs/chemistry/senior/XB-3/C5/review.md

@@ -4,7 +4,7 @@
 
 ### 知识框架
 
-```mermaid
+<div class="mermaid">
 graph TB
     A[第五章 合成高分子] --> B[第一节 合成高分子的基本方法]
     A --> C[第二节 高分子材料]
@@ -15,7 +15,7 @@ graph TB
     C --> C1[通用高分子材料]
     C --> C2[功能高分子材料]
     C --> C3[高分子材料与环境]
-```
+</div>
 
 ### 重点知识梳理
 

mkdocs.yml

@@ -264,6 +264,8 @@ extra_javascript:
   - https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/contrib/mhchem.min.js
   - https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/contrib/auto-render.min.js
   - assets/katex-init.js
+  - https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js
+  - assets/mermaid-init.js
 
 extra_css:
   - https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.css