✨ Feat: add layout loaders and layout configuration for Mermaid diagrams (#627)

assets/js/lib/mermaid.js

@@ -4,8 +4,24 @@
 import mermaid from "{{ $mermaidCDN }}"
 {{- with $mermaid.zenuml }}
 import zenuml from "{{ . }}"
+{{- end }}
+{{- $loadersArr := slice }}
+{{- range $i, $loaders := $mermaid.layoutloaders }}
+import loaders{{ $i }} from "{{ $loaders }}"
+{{- $loadersArr = $loadersArr | append (printf "loaders%d" $i) }}
+{{- end }}
+{{- if $mermaid.zenuml }}
 await mermaid.registerExternalDiagrams([zenuml])
 {{- end }}
+const loaders = []
+for(const item of {{ $loadersArr }}) {
+	if(Array.isArray(item)) {
+		loaders.push(...item)
+	} else {
+		loaders.push(item)
+	}
+}
+mermaid.registerLayoutLoaders(loaders)
 mermaid.startOnLoad = false;
 const mermaidConfig = {{ $mermaid | jsonify }}
 let processing = false
@@ -56,6 +72,7 @@ async function loadMermaid({ theme, darkMode, selector }) {
     theme: currentTheme,
     securityLevel: mermaidConfig.securitylevel,
     look: mermaidConfig.look,
+    layout: mermaidConfig.layout,
     fontFamily: mermaidConfig.fontfamily,
     altFontFamily: mermaidConfig.fontfamily
   })

hugo.toml

@@ -727,6 +727,14 @@ mainSections = []
     look = "handDrawn"
     # FixIt 0.4.0 | NEW Specifies the font to be used in the rendered diagrams
     fontFamily = ""
+    # FixIt 0.4.0 | NEW Layout loaders from ESM module CDN sources (e.g., ELK layout engine)
+    # Example: ["https://cdn.jsdelivr.net/npm/@mermaid-js/layout-elk/dist/mermaid-layout-elk.esm.min.mjs"]
+    # This will enable additional layout options: ["elk", "elk.layered", "elk.stress", "elk.force", "elk.mrtree"]
+    layoutLoaders = []
+    # Default layout algorithm for rendering diagrams
+    # Available options: "dagre" (default), "elk", "elk.layered", "elk.stress", "elk.force", "elk.mrtree"
+    # Note: ELK layouts require layoutLoaders to be configured first
+    layout = "dagre"
 
   # FixIt 0.3.13 | NEW Admonitions custom config
   # See https://fixit.lruihao.cn/documentation/content-management/shortcodes/extended/admonition/#custom-admonitions

test/hugo.toml

@@ -47,6 +47,3 @@ baseURL = "https://demo.fixit.lruihao.cn/test/"
 
   [params.mermaid]
     zenuml = "https://cdn.jsdelivr.net/npm/@mermaid-js/mermaid-zenuml/dist/mermaid-zenuml.esm.min.mjs"
-
-  [params.home.posts]
-    paginate = 1