From d883483ec4a6bc8acef5bb337e9a415b1a3a5c88 Mon Sep 17 00:00:00 2001
From: panoshu <hup1031@outlook.com>
Date: Sun, 12 Feb 2023 17:44:30 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E5=AF=B9mermaid=E6=B5=81?=
 =?UTF-8?q?=E7=A8=8B=E5=9B=BE=E7=9A=84=E6=94=AF=E6=8C=81=20(#263)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 _config.yml                      | 27 ++++++++++++++++++++++-----
 layout/mermaid.ejs               | 28 ++++++++++++++++++++++++++++
 layout/post.ejs                  |  3 +++
 source/css/_plugins/index.styl   |  2 ++
 source/css/_plugins/mermaid.styl | 10 ++++++++++
 5 files changed, 65 insertions(+), 5 deletions(-)
 create mode 100755 layout/mermaid.ejs
 create mode 100644 source/css/_plugins/mermaid.styl

diff --git a/_config.yml b/_config.yml
index 5fc5006..f15c002 100755
--- a/_config.yml
+++ b/_config.yml
@@ -79,7 +79,7 @@ search:
     field: all # post, page, all
     path: /search.json # 搜索文件存放位置
     content: true # 是否搜索内容
-  
+
 
 ######## Comments ########
 comments:
@@ -127,7 +127,7 @@ comments:
   twikoo:
     js: https://gcore.jsdelivr.net/npm/twikoo@1.6.8/dist/twikoo.all.min.js # 建议锁定版本
     envId: https://xxx # vercel函数
-  
+
   # Waline
   # https://waline.js.org/
   waline:
@@ -168,12 +168,12 @@ comments:
     #   api: # 图床 api 地址
     #   token: # 图床验证
     #   resp: # 图片地址返回值的字段
-  
+
   # Artalk
   # https://artalk.js.org/
   artalk:
     css: https://unpkg.com/artalk@2.4.3/dist/Artalk.css
-    js: https://unpkg.com/artalk@2.4.3/dist/Artalk.js 
+    js: https://unpkg.com/artalk@2.4.3/dist/Artalk.js
     server: # 后端服务地址
     placeholder: ''
     darkMode: auto
@@ -271,7 +271,7 @@ plugins:
     weibo: /js/plugins/weibo.js
 
   marked: https://cdn.bootcdn.net/ajax/libs/marked/4.0.18/marked.min.js
-  
+
   ## optional plugins ##
   # preload
   preload:
@@ -338,6 +338,23 @@ plugins:
     min_js: <script defer src="https://gcore.jsdelivr.net/npm/katex@0.16.4/dist/katex.min.js" integrity="sha384-PwRUT/YqbnEjkZO0zZxNqcxACrXe+j766U2amXcgMg5457rve2Y7I6ZJSm2A0mS4" crossorigin="anonymous"></script>
     auto_render_min_js: <script defer src="https://gcore.jsdelivr.net/npm/katex@0.16.4/dist/contrib/auto-render.min.js" integrity="sha384-+VBxd3r6XgURycqtZ117nYw44OOcIax56Z4dCRWbxyPt0Koah1uHoK0o4+/RRE05" crossorigin="anonymous"onload="renderMathInElement(document.body);"></script>
 
+  # Mermaid - markdwon to flow chart, seq chart, class chart ...
+  # 需要安装 npm install --save hexo-filter-mermaid-diagrams
+  # 使用时 需要在Markdown文件开头加入 mermaid: true
+  # 使用示例：
+  # ```mermaid
+  # graph LR
+  #   A(Section A) -->|option 1| B(Section A)
+  #   B -->|option 2| C(Section C)
+  # ```
+  mermaid:
+    enable: false
+    # js: https://unpkg.com/mermaid@9.0.0/dist/mermaid.min.js
+    js: https://cdn.jsdelivr.net/npm/mermaid@v9/dist/mermaid.min.js
+    # Available themes: default | dark | forest | neutral
+    # 推荐使用 dark 主题 在夜间模式下显示效果更好
+    theme: dark
+
 style:
   darkmode: auto # auto / always / false
   smooth_scroll: true # true / false
diff --git a/layout/mermaid.ejs b/layout/mermaid.ejs
new file mode 100755
index 0000000..fb65356
--- /dev/null
+++ b/layout/mermaid.ejs
@@ -0,0 +1,28 @@
+<% if (theme.plugins.mermaid.enable) { %>
+  <script type="text/javascript" src="<%- theme.plugins.mermaid.js %>"></script>
+
+  <script>
+    var mermaid_config = {
+      startOnLoad: true,
+      theme: '<%- theme.plugins.mermaid.theme %>',
+      logLevel: 3,
+      themeVariables: {
+        darkMode: true
+      },
+      flowchart: {
+        useMaxWidth: false,
+        htmlLabels: true,
+        curve: 'linear'
+      },
+      gantt: {
+        axisFormat: '%m/%d/%Y'
+      },
+      sequence: {
+        actorMargin: 50
+      }
+    }
+    if (window.mermaid) {
+        mermaid.initialize(mermaid_config);
+    }
+  </script>
+<% } %>
diff --git a/layout/post.ejs b/layout/post.ejs
index bf56cab..d76d3ab 100755
--- a/layout/post.ejs
+++ b/layout/post.ejs
@@ -22,6 +22,9 @@ if (theme.plugins.heti && theme.plugins.heti.enable) {
 <% if (page.mathjax == true){ %>
     <%- partial('mathjax') %>
 <% } %>
+<% if (page.mermaid == true){ %>
+  <%- partial('mermaid') %>
+<% } %>
 <%- partial('_partial/main/navbar/breadcrumb') %>
 <article class='md-text content<%- heti %> <%- post.layout %><%- post.indent ? ' indent' : '' %><%- scrollreveal() %>'>
 <%- layoutTitle() %>
diff --git a/source/css/_plugins/index.styl b/source/css/_plugins/index.styl
index bba960e..2524c35 100644
--- a/source/css/_plugins/index.styl
+++ b/source/css/_plugins/index.styl
@@ -9,6 +9,8 @@ if hexo-config('plugins.scrollreveal.enable')
   @import 'scrollreveal'
 if hexo-config('plugins.fancybox.enable')
   @import 'fancybox'
+if hexo-config('plugins.mermaid.enable')
+  @import 'mermaid'
 
 
 // 评论
diff --git a/source/css/_plugins/mermaid.styl b/source/css/_plugins/mermaid.styl
new file mode 100644
index 0000000..6bf7d19
--- /dev/null
+++ b/source/css/_plugins/mermaid.styl
@@ -0,0 +1,10 @@
+pre.mermaid {
+  display: inline-block;
+  width: 100%;
+  text-align: center;
+}
+
+.mermaid svg {
+  width: 100%;
+  display: inline-block;
+}