forgot to add #/ to js.ipynb cell.

Author: ImtiazKhanDS

fasthtml/_modidx.py

@@ -117,6 +117,7 @@
             'fasthtml.js': { 'fasthtml.js.HighlightJS': ('api/js.html#highlightjs', 'fasthtml/js.py'),
                              'fasthtml.js.KatexMarkdownJS': ('api/js.html#katexmarkdownjs', 'fasthtml/js.py'),
                              'fasthtml.js.MarkdownJS': ('api/js.html#markdownjs', 'fasthtml/js.py'),
+                             'fasthtml.js.MermaidJS': ('api/js.html#mermaidjs', 'fasthtml/js.py'),
                              'fasthtml.js.SortableJS': ('api/js.html#sortablejs', 'fasthtml/js.py'),
                              'fasthtml.js.dark_media': ('api/js.html#dark_media', 'fasthtml/js.py'),
                              'fasthtml.js.light_media': ('api/js.html#light_media', 'fasthtml/js.py')},

fasthtml/js.py

@@ -3,7 +3,8 @@
 # AUTOGENERATED! DO NOT EDIT! File to edit: ../nbs/api/03_js.ipynb.
 
 # %% auto 0
-__all__ = ['marked_imp', 'npmcdn', 'light_media', 'dark_media', 'MarkdownJS', 'KatexMarkdownJS', 'HighlightJS', 'SortableJS']
+__all__ = ['marked_imp', 'npmcdn', 'light_media', 'dark_media', 'MarkdownJS', 'KatexMarkdownJS', 'HighlightJS', 'SortableJS',
+           'MermaidJS']
 
 # %% ../nbs/api/03_js.ipynb
 import re
@@ -87,3 +88,43 @@ def SortableJS(
 proc_htmx('%s', Sortable.create);
 """ % sel
     return Script(src, type='module')
+
+# %% ../nbs/api/03_js.ipynb
+def MermaidJS(
+        sel='.language-mermaid',  # CSS selector for mermaid elements
+        theme='base',  # Mermaid theme to use
+    ):
+    "Implements browser-based Mermaid diagram rendering."
+    src = """
+import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs';
+
+mermaid.initialize({
+    startOnLoad: false,
+    theme: '%s',
+    securityLevel: 'loose',
+    flowchart: { useMaxWidth: false, useMaxHeight: false }
+});
+
+function renderMermaidDiagrams(element, index) {
+    try {
+        const graphDefinition = element.textContent;
+        const graphId = `mermaid-diagram-${index}`;
+        mermaid.render(graphId, graphDefinition)
+            .then(({svg, bindFunctions}) => {
+                element.innerHTML = svg;
+                bindFunctions?.(element);
+            })
+            .catch(error => {
+                console.error(`Error rendering Mermaid diagram ${index}:`, error);
+                element.innerHTML = `<p>Error rendering diagram: ${error.message}</p>`;
+            });
+    } catch (error) {
+        console.error(`Error processing Mermaid diagram ${index}:`, error);
+    }
+}
+
+// Assuming proc_htmx is a function that triggers rendering
+proc_htmx('%s', renderMermaidDiagrams);
+""" % (theme, sel)
+    return Script(src, type='module')
+

nbs/api/03_js.ipynb

@@ -275,6 +275,7 @@
    "metadata": {},
    "outputs": [],
    "source": [
+    "#| export\n",
     "def MermaidJS(\n",
     "        sel='.language-mermaid',  # CSS selector for mermaid elements\n",
     "        theme='base',  # Mermaid theme to use\n",