Fix mermaid diagram rendering with YAML frontmatter

FSNotesCore/Business/Note.swift

@@ -879,7 +879,7 @@ public class Note: NSObject  {
                     result += "<hr>\n\n"
                 }
 
-                result += list.joined()
+                result += list.joined(separator: "---")
 
                 return result
             }
@@ -892,15 +892,42 @@ public class Note: NSObject  {
         #if IOS_APP || os(OSX)
             let mutable = NotesTextProcessor.convertAppTags(in: self.content.unloadAttachments(), codeBlockRanges: codeBlockRangesCache)
         let content = NotesTextProcessor.convertAppLinks(in: mutable, codeBlockRanges: codeBlockRangesCache)
-            let result = cleanMetaData(content: content.string)
-                .replacingOccurrences(of: "\n---\n", with: "\n<hr>\n")
-        
+            let cleaned = cleanMetaData(content: content.string)
+            let result = Note.replaceHorizontalRulesOutsideCodeBlocks(cleaned)
+
             return result
         #else
             return cleanMetaData(content: self.content.string)
         #endif
     }
 
+    /// Replace `\n---\n` with `\n<hr>\n` only outside fenced code blocks,
+    /// so that `---` inside e.g. mermaid YAML frontmatter is preserved.
+    private static func replaceHorizontalRulesOutsideCodeBlocks(_ text: String) -> String {
+        let pattern = "(?<=\\n|\\A)```[^\\n]*\\n[\\s\\S]*?\\n```(?=\\n|\\Z)"
+        guard let regex = try? NSRegularExpression(pattern: pattern) else {
+            return text.replacingOccurrences(of: "\n---\n", with: "\n<hr>\n")
+        }
+
+        let nsText = text as NSString
+        let codeRanges = regex.matches(in: text, range: NSRange(location: 0, length: nsText.length)).map { $0.range }
+
+        var result = ""
+        var currentIndex = 0
+
+        for codeRange in codeRanges {
+            let beforeRange = NSRange(location: currentIndex, length: codeRange.location - currentIndex)
+            result += nsText.substring(with: beforeRange).replacingOccurrences(of: "\n---\n", with: "\n<hr>\n")
+            result += nsText.substring(with: codeRange)
+            currentIndex = codeRange.location + codeRange.length
+        }
+
+        let remainingRange = NSRange(location: currentIndex, length: nsText.length - currentIndex)
+        result += nsText.substring(with: remainingRange).replacingOccurrences(of: "\n---\n", with: "\n<hr>\n")
+
+        return result
+    }
+
     public func overwrite(url: URL) {
         self.url = url
 

Resources/MPreview.bundle/index.html

@@ -31,7 +31,8 @@
 
     <script charset="utf-8" src="{WEB_PATH}js/highlight.min.js" type="text/javascript"></script>
     <script>hljs.initHighlightingOnLoad();</script>
-    <script async src="{WEB_PATH}js/mermaid.min.js"></script>
+    <script src="{WEB_PATH}js/mermaid.min.js"></script>
+    <script src="{WEB_PATH}js/elk-layout.min.js"></script>
 
     <script>
         (function () {
@@ -321,22 +322,65 @@
         }
 
         let loadMemaid = () => {
+            if (typeof mermaid === 'undefined') return;
+
             let mermaidTheme = 'default';
             if ('{FSNOTES_APPEARANCE}' == 'darkmode') {
                 mermaidTheme = 'dark';
             }
 
+            // Register ELK layout engine if available
+            if (typeof window.__elkLayouts !== 'undefined') {
+                try {
+                    mermaid.registerLayoutLoaders(window.__elkLayouts);
+                } catch (e) {}
+            }
+
             var config = {
-                startOnLoad: true,
+                startOnLoad: false,
                 theme: mermaidTheme,
                 flowchart: {
-                    useMaxWidth: false,
+                    useMaxWidth: true,
                     htmlLabels: true
                 }
             };
 
             mermaid.initialize(config);
-            window.mermaid.init(undefined, document.querySelectorAll('.language-mermaid'));
+
+            var nodes = document.querySelectorAll('.language-mermaid');
+
+            // Normalize YAML frontmatter indentation in mermaid blocks
+            // (tabs and mixed whitespace are invalid YAML)
+            nodes.forEach(function(el) {
+                var text = el.textContent;
+                if (text.trimStart().startsWith('---')) {
+                    var lines = text.split('\n');
+                    var inFrontmatter = false;
+                    for (var i = 0; i < lines.length; i++) {
+                        var trimmed = lines[i].trim();
+                        if (trimmed === '---') {
+                            inFrontmatter = !inFrontmatter;
+                            continue;
+                        }
+                        if (inFrontmatter && trimmed.length > 0) {
+                            if (lines[i] !== trimmed) {
+                                // Any indented line gets normalized to 2-space indent
+                                lines[i] = '  ' + trimmed;
+                            }
+                        }
+                    }
+                    el.textContent = lines.join('\n');
+                }
+            });
+
+            mermaid.run({ nodes: nodes }).catch(function(e) {
+                nodes.forEach(function(el) {
+                    var errDiv = document.createElement('div');
+                    errDiv.style.cssText = 'color:#ff4444;padding:8px;font-size:12px;';
+                    errDiv.textContent = 'Mermaid error: ' + e.message;
+                    el.parentNode.insertBefore(errDiv, el.nextSibling);
+                });
+            });
         };
 
         let loadAttachments = () => {