feat: add support for extended mermaid syntax

exampleSite/config.toml

@@ -757,6 +757,10 @@ enableEmoji = true
       Skype = false
       Trello = false
       Mix = false
+    # Mermaid config
+    # Mermaid 设置
+    [params.page.mermaid]
+      enable = false
     # Comment config
     # 评论系统设置
     [params.page.comment]

exampleSite/content/posts/tests/mermaid-tests/index.en.md

@@ -18,6 +18,14 @@ hiddenFromSearch: true
     C-->D;
 {{< /mermaid >}}
 
+```mermaid
+graph TD;
+    A-->B;
+    A-->C;
+    B-->D;
+    C-->D;
+```
+
 {{< mermaid >}}sequenceDiagram
     participant Alice
     participant Bob

layouts/shortcodes/mermaid.html

@@ -1,3 +1,3 @@
-{{- $id := dict "Content" (trim .Inner "\n") "Scratch" .Page.Scratch | partial "function/id.html" -}}
-<div class="mermaid" id="{{ $id }}"></div>
+{{- $id := dict "Scratch" .Page.Scratch | partial "function/id.html" -}}
+<div class="mermaid" id="{{ $id }}">{{ .Inner }}</div>
 {{- .Page.Scratch.SetInMap "this" "mermaid" true -}}

src/js/theme.js

@@ -604,13 +604,41 @@ function initMath() {
 }
 
 function initMermaid() {
+    var elementId = 1;
+    while (document.getElementById(`id-${elementId}`)) elementId++;
+
+    const mermaidKeywords = [
+        "graph TD",
+        "graph TB",
+        "graph BT",
+        "graph RL",
+        "graph LR",
+        "sequenceDiagram",
+        "gantt",
+        "classDiagram",
+        "gitGraph",
+        "erDiagram",
+        "journey",
+    ];
+    Array.from(document.getElementsByClassName("language-fallback")).forEach((e) => {
+        let graphDefinition = e.innerText;
+        if (mermaidKeywords.some((keyword) => graphDefinition.startsWith(keyword))) {
+            let eN = e.parentElement.parentElement.parentElement.parentElement;
+            eN.parentElement.outerHTML = `<div class="mermaid" id="id-${elementId}">${e.innerText}</div>`;
+        }
+    });
+
+    Array.from(document.getElementsByClassName("language-mermaid")).forEach((e) => {
+            e.parentElement.outerHTML = `<div class="mermaid" id="id-${elementId}">${e.innerText}</div>`;
+    });
+
     const $mermaidElements = document.getElementsByClassName('mermaid');
     if ($mermaidElements.length) {
         mermaid.initialize({ startOnLoad: false, theme: 'default' });
         forEach($mermaidElements, $mermaid => {
-            mermaid.mermaidAPI.render('svg-' + $mermaid.id, window.data[$mermaid.id], svgCode => {
+            mermaid.mermaidAPI.render('svg-' + $mermaid.id, $mermaid.textContent, svgCode => {
                 $mermaid.insertAdjacentHTML('afterbegin', svgCode);
-                document.getElementById('svg-' + $mermaid.id).children[0].remove();
+                document.getElementById('svg-' + $mermaid.id).firstElementChild.remove();
             }, $mermaid);
         });
     }