Add Mermaid Rendering Support

README.md

@@ -82,3 +82,5 @@
 
 8. 使用 1Panel 自动续签 Https 证书的文章，参考 [https://hin.cool/posts/sslfor1panel.html](https://hin.cool/posts/sslfor1panel.html)。
 
+9. 给博客添加流程图 mermaid 渲染支持。
+

package.json

@@ -20,6 +20,7 @@
     "hexo-abbrlink": "2.2.1",
     "hexo-browsersync": "0.3.0",
     "hexo-deployer-git": "4.0.0",
+    "hexo-filter-mermaid-diagrams": "1.0.5",
     "hexo-fs": "4.1.3",
     "hexo-generator-archive": "2.0.0",
     "hexo-generator-category": "2.0.0",

source/about/index.md

@@ -7,19 +7,22 @@ comments: false
 
 # <center>关于</center>
 
-这里是 DavidingPlus 的博客，用来记录学习过程中的感悟和收获。我的各个社交链接已经放在左边了，可以添加互相交流学习。
+这里是 DavidingPlus 的博客，记录学习过程中的感悟和收获。本人的社交链接已经放在左边了，可以添加，相互交流学习。
 
 本人是**电子科技大学**的**带砖生**，本科就读于着火的**沙软**专业。目前大四，保研到了清水河的**计算机学院**。
 
-相关技术栈：
+个人技术栈：
 
-1. C/C++ 底层开发。参与项目 [LarkSDK](http://caiyi.tech/larksdk/)：一款跨平台通用的 C++ 基础开发库。
+```mermaid
+graph TD
+  A[个人技术栈]
 
-2. C++/Qt 应用开发。
-
-3. Linux 用户层开发。
-
-4. Linux 内核开发。正在学习中。。。
+  A --> B[C/C++ 底层开发]
+  B --> C[<a href="http://caiyi.tech/larksdk/" target="_blank">LarkSDK</a><br>（跨平台通用的 C++ 基础开发库）]
+  A --> D[C++/Qt 应用开发]
+  A --> E[Linux 用户层开发]
+  A --> F[Linux 内核层开发<br>（正在学习中）]
+```
 
 <img src="https://image.davidingplus.cn/images/2025/03/09/lbj-laugh.webp" alt="lbj-laugh" style="zoom:80%;" />
 

themes/stun/_config.yml

@@ -1068,3 +1068,12 @@ title_trick:
   enable: true
   leave: "🤡快回来,粗大事了~~"
   enter: "😚欢迎回来!~"
+
+# mermaid chart
+mermaid: ## mermaid url https://github.com/knsv/mermaid
+  enable: true
+  cdn: /third-party/js/mermaid.min.js
+  version: # 若 cdn 给出链接则该项无效。否则，留空则是最新版本，也可指定版本例如 "11.6.0"
+  options: # find more api options from https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts
+    # startOnload: false
+    theme: "default"

themes/stun/layout/_partials/footer/footer.pug

@@ -65,3 +65,23 @@ div
 
 if footer.custom.enable
   div!= footer.custom.text
+
+if theme.mermaid.enable == true
+  - var mermaid_js = ''
+  - if (theme.mermaid.cdn) {
+  -   mermaid_js = theme.mermaid.cdn
+  - } else {
+  -   var version = theme.mermaid.version
+  -   mermaid_js = 'https://unpkg.com/mermaid'
+  -   if (version) {
+  -     mermaid_js += '@' + version
+  -   }
+  -   mermaid_js += '/dist/mermaid.min.js?v=' + stun_env('version')
+  - }
+
+  script(type='text/javascript', id='maid-script', mermaidoptioins=theme.mermaid.options, src=mermaid_js)
+  script.
+    if (window.mermaid) {
+      var options = JSON.parse(document.getElementById('maid-script').getAttribute('mermaidoptioins'));
+      mermaid.initialize(options);
+    }

themes/stun/layout/_third-party/pjax.pug

@@ -86,5 +86,12 @@ script.
           Stun.utils.pjaxReloadLocalSearch();
         }
       }
+
+      // 加上 Mermaid 渲染逻辑
+      if (typeof mermaid !== 'undefined') {
+        const nodes = Array.from(document.querySelectorAll(".mermaid"))
+          .filter(el => !el.dataset.processed);
+        mermaid.init(undefined, nodes);
+      }
     }, false);
   }, false);