Merge pull request #518 from ImtiazKhanDS/add_mermaid_diagrams

Adding mermaidJS for mermaid graphs

Author: jph00

fasthtml/_modidx.py

@@ -113,6 +113,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

@@ -274,7 +274,72 @@
    "execution_count": null,
    "metadata": {},
    "outputs": [],
-   "source": []
+   "source": [
+    "#| export\n",
+    "def MermaidJS(\n",
+    "        sel='.language-mermaid',  # CSS selector for mermaid elements\n",
+    "        theme='base',  # Mermaid theme to use\n",
+    "    ):\n",
+    "    \"Implements browser-based Mermaid diagram rendering.\"\n",
+    "    src = \"\"\"\n",
+    "import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs';\n",
+    "\n",
+    "mermaid.initialize({\n",
+    "    startOnLoad: false,\n",
+    "    theme: '%s',\n",
+    "    securityLevel: 'loose',\n",
+    "    flowchart: { useMaxWidth: false, useMaxHeight: false }\n",
+    "});\n",
+    "\n",
+    "function renderMermaidDiagrams(element, index) {\n",
+    "    try {\n",
+    "        const graphDefinition = element.textContent;\n",
+    "        const graphId = `mermaid-diagram-${index}`;\n",
+    "        mermaid.render(graphId, graphDefinition)\n",
+    "            .then(({svg, bindFunctions}) => {\n",
+    "                element.innerHTML = svg;\n",
+    "                bindFunctions?.(element);\n",
+    "            })\n",
+    "            .catch(error => {\n",
+    "                console.error(`Error rendering Mermaid diagram ${index}:`, error);\n",
+    "                element.innerHTML = `<p>Error rendering diagram: ${error.message}</p>`;\n",
+    "            });\n",
+    "    } catch (error) {\n",
+    "        console.error(`Error processing Mermaid diagram ${index}:`, error);\n",
+    "    }\n",
+    "}\n",
+    "\n",
+    "// Assuming proc_htmx is a function that triggers rendering\n",
+    "proc_htmx('%s', renderMermaidDiagrams);\n",
+    "\"\"\" % (theme, sel)\n",
+    "    return Script(src, type='module')\n"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "```python\n",
+    "app, rt = fast_app(hdrs=[MermaidJS()])\n",
+    "@rt('/')\n",
+    "def get():\n",
+    "    return Titled(\"Mermaid Examples\", \n",
+    "        # Assigning 'marked' class to components renders content as markdown\n",
+    "        Pre(Code(cls =\"language-mermaid\")('''flowchart TD\n",
+    "            A[main] --> B[\"fact(5)\"] --> C[\"fact(4)\"] --> D[\"fact(3)\"] --> E[\"fact(2)\"] --> F[\"fact(1)\"] --> G[\"fact(0)\"]\n",
+    "           ''')))\n",
+    "```\n",
+    "In a markdown file, just like a code cell you can define \n",
+    "\n",
+    "\\```mermaid\n",
+    "\n",
+    "        graph TD\n",
+    "        A --> B \n",
+    "        B --> C \n",
+    "        C --> E\n",
+    "\n",
+    "\\```"
+   ]
   }
  ],
  "metadata": {