💄🚩 Add mermaid support. Close #56

assets/css/_common/components/third-party/index.scss

@@ -6,6 +6,7 @@
 @import 'gitter';
 @import 'livere';
 @import 'waline';
+@import 'mermaid';
 
 .use-motion .animated {
   // Fix issue #48 #55

assets/css/_common/components/third-party/mermaid.scss

@@ -0,0 +1,3 @@
+.mermaid {
+  background: var(--highlight-foreground);
+}

data/resources.yaml

@@ -84,6 +84,7 @@ instant:
   file: dist/instantsearch.production.min.js
 
 plugins:
+  # 数学公式渲染
   mathjax:
     js:
       - name: mathjax
@@ -102,4 +103,11 @@ plugins:
       - name: katex
         version: 0.16.0
         file: dist/katex.min.css
+  # 画图渲染
+  mermaid:
+    js:
+      - name: mermaid
+        version: 9.1.7
+        file: dist/mermaid.min.js
+
 

exampleSite/content/post/mermaid-charts.md

@@ -0,0 +1,189 @@
+---
+title: "Mermaid支持流程图"
+description: "mermaid-flow-chart"
+keywords: "mermaid,flow,chart"
+
+date: 2022-09-18T20:58:13+08:00
+lastmod: 2022-09-18T20:58:13+08:00
+
+categories:
+  - 示例
+tags:
+  - 流程图
+  - 时序图
+
+url: "post/mermaid-charts.html"
+mermaid: true
+toc: true
+---
+
+本主题已支持 `Mermaid` 实现以纯文本的方式绘制流程图、序列图、甘特图、状态图、关系图行等等，随着 `Mermaid` 也在逐步发展，后续还会有各种各样的图被引入进来，更多的类型及使用方式可关注其官方网站：[https://mermaid-js.github.io/](https://mermaid-js.github.io/)。
+
+
+<!--more-->
+
+# 使用说明
+
+{{< note info >}}
+
+- 通过 `hugo new` 命令创建一篇新的文章
+- 在文章头部配置 `mermaid: true`
+- 使用短代码书写各种类型的图，自带2个参数： align（对齐） 和 bc（背景色），可参考如下使用示例
+
+{{< /note >}}
+
+# 流程图
+
+```shell
+{{</* mermaid align="left" */>}}
+graph TD;
+    A-->B;
+    A-->C;
+    B-->D;
+    C-->D;
+{{</* /mermaid */>}}
+```
+
+{{< mermaid align="left" >}}
+graph TD;
+    A-->B;
+    A-->C;
+    B-->D;
+    C-->D;
+{{< /mermaid >}}
+
+```shell
+{{</* mermaid bc="#eee"  */>}}
+sequenceDiagram
+    participant Alice
+    participant Bob
+    Alice->>John: Hello John, how are you?
+    loop Healthcheck
+        John->>John: Fight against hypochondria
+    end
+    Note right of John: Rational thoughts <br/>prevail!
+    John-->>Alice: Great!
+    John->>Bob: How about you?
+    Bob-->>John: Jolly good!
+{{</* /mermaid */>}}
+```
+
+{{< mermaid bc="#eee" >}}
+sequenceDiagram
+    participant Alice
+    participant Bob
+    Alice->>John: Hello John, how are you?
+    loop Healthcheck
+        John->>John: Fight against hypochondria
+    end
+    Note right of John: Rational thoughts <br/>prevail!
+    John-->>Alice: Great!
+    John->>Bob: How about you?
+    Bob-->>John: Jolly good!
+{{< /mermaid >}}
+
+# 类图
+```mermaid
+{{</* mermaid */>}}
+classDiagram
+Class01 <|-- AveryLongClass : Cool
+Class03 *-- Class04
+Class05 o-- Class06
+Class07 .. Class08
+Class09 --> C2 : Where am i?
+Class09 --* C3
+Class09 --|> Class07
+Class07 : equals()
+Class07 : Object[] elementData
+Class01 : size()
+Class01 : int chimp
+Class01 : int gorilla
+Class08 <--> C2: Cool label
+{{</* /mermaid */>}}
+```
+{{< mermaid >}}
+classDiagram
+Class01 <|-- AveryLongClass : Cool
+Class03 *-- Class04
+Class05 o-- Class06
+Class07 .. Class08
+Class09 --> C2 : Where am i?
+Class09 --* C3
+Class09 --|> Class07
+Class07 : equals()
+Class07 : Object[] elementData
+Class01 : size()
+Class01 : int chimp
+Class01 : int gorilla
+Class08 <--> C2: Cool label
+{{< /mermaid >}}
+
+# 甘特图
+```mermaid
+{{</* mermaid */>}}
+gantt
+dateFormat  YYYY-MM-DD
+title Adding GANTT diagram to mermaid
+excludes weekdays 2014-01-10
+
+section A section
+Completed task            :done,    des1, 2014-01-06,2014-01-08
+Active task               :active,  des2, 2014-01-09, 3d
+Future task               :         des3, after des2, 5d
+Future task2               :         des4, after des3, 5d
+{{</* /mermaid */>}}
+```
+{{< mermaid >}}
+gantt
+dateFormat  YYYY-MM-DD
+title Adding GANTT diagram to mermaid
+excludes weekdays 2014-01-10
+
+section A section
+Completed task            :done,    des1, 2014-01-06,2014-01-08
+Active task               :active,  des2, 2014-01-09, 3d
+Future task               :         des3, after des2, 5d
+Future task2               :         des4, after des3, 5d
+{{< /mermaid >}}
+
+# 实体关系图
+```mermaid
+{{</* mermaid */>}}
+erDiagram
+    CUSTOMER ||--o{ ORDER : places
+    ORDER ||--|{ LINE-ITEM : contains
+    CUSTOMER }|..|{ DELIVERY-ADDRESS : uses
+{{</* /mermaid */>}}
+```
+{{< mermaid >}}
+erDiagram
+    CUSTOMER ||--o{ ORDER : places
+    ORDER ||--|{ LINE-ITEM : contains
+    CUSTOMER }|..|{ DELIVERY-ADDRESS : uses
+{{< /mermaid >}}
+
+# 用户旅程
+```mermaid
+{{</* 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 */>}}
+```
+{{< 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 >}}

layouts/partials/_thirdparty/others/math.html

@@ -0,0 +1,28 @@
+<!-- Load math render scripts -->
+{{ $math := .Params.math | default .Site.Params.math }}
+{{- partial "scripts/plugins.html" (dict "vendor" (.Scratch.Get "vendor") "router" (.Scratch.Get "router") "res" .Site.Data.resources.plugins "index" $math) }}
+{{ if eq $math "katex" }}
+  <script type="text/javascript">
+      document.addEventListener("DOMContentLoaded", function() {
+          renderMathInElement(document.body, {
+            delimiters: [
+                {left: '$$', right: '$$', display: true},
+                {left: '$', right: '$', display: false},
+                {left: '\\(', right: '\\)', display: false},
+                {left: '\\[', right: '\\]', display: true}
+            ],
+            
+            throwOnError : false
+          });
+      });
+  </script>
+{{ end }}
+{{ if eq $math "mathjax" }}
+  <script type="text/javascript">
+    window.MathJax = {
+      tex: {
+        inlineMath: [["$", "$"]],
+      }
+    };
+  </script>
+{{ end }}

layouts/partials/_thirdparty/others/mermaid.html

@@ -0,0 +1,15 @@
+{{- partial "scripts/plugins.html" (dict "vendor" (.Scratch.Get "vendor") "router" (.Scratch.Get "router") "res" .Site.Data.resources.plugins "index" "mermaid") }}
+
+<script type="text/javascript">
+  document.addEventListener('DOMContentLoaded', () => {
+    mermaid.initialize({
+      sequence: { 
+        showSequenceNumbers: true,
+        actorMargin: 50, 
+        diagramMarginX:10, 
+        diagramMarginY:10
+      }
+    });
+  });
+</script>
+

layouts/partials/init.html

@@ -20,6 +20,7 @@
 
 {{ $vendor := .Site.Params.vendors.plugins }}
 {{ $router := index .Site.Data.resources.vendors $vendor }}
+{{ $globalVars.Set "vendor" $vendor }}
 {{ $globalVars.Set "router" $router }}
 
 {{ $config := dict

layouts/partials/scripts.html

@@ -1,39 +1,15 @@
 {{ partialCached "scripts/global.html" . }}
 
-{{- $vendor := .Site.Params.vendors.plugins }}
-{{- $router := .Scratch.Get "router" }}
-
-<!-- Load math render scripts -->
-{{ $math := .Params.math | default .Site.Params.math }}
-{{ if $math }}
-  {{- partialCached "scripts/plugins.html" (dict "vendor" $vendor "router" $router "res" .Site.Data.resources.plugins "index" $math) }}
-  {{ if eq $math "katex" }}
-    <script type="text/javascript">
-        document.addEventListener("DOMContentLoaded", function() {
-            renderMathInElement(document.body, {
-              delimiters: [
-                  {left: '$$', right: '$$', display: true},
-                  {left: '$', right: '$', display: false},
-                  {left: '\\(', right: '\\)', display: false},
-                  {left: '\\[', right: '\\]', display: true}
-              ],
-              
-              throwOnError : false
-            });
-        });
-    </script>
-  {{ end }}
-  {{ if eq $math "mathjax" }}
-    <script type="text/javascript">
-      window.MathJax = {
-        tex: {
-          inlineMath: [["$", "$"]],
-        }
-      };
-    </script>
+{{ if or .Params.math .Site.Params.math }}
+  {{ partialCached "_thirdparty/others/math.html" . }}
 {{ end }}
+
+{{ if .Params.mermaid }}
+  {{ partialCached "_thirdparty/others/mermaid.html" . }}
 {{ end }}
 
 
 
 
+
+

layouts/shortcodes/mermaid.html

@@ -0,0 +1,3 @@
+<div class="mermaid" align="{{ .Get "align" | default "center" }}"  {{  with .Get "bc" }} style="background: {{ . }}" {{ end }}> 
+  {{ safeHTML .Inner }}
+</div>