WIP: Render database schema using Mermaid.js

Still need to: * Move mermaid.js to static files * Make template for mermaid wrapper * Create new page for SQL viewer then add explorer
2024-11-06 22:48:51 +11:00
parent 30ba59381c
commit 3a07b9d97f
5 changed files with 127 additions and 0 deletions
--- a/templates/base.html
+++ b/templates/base.html
@@ -16,6 +16,19 @@
    <script src="/static/js/htmx.min.js" defer></script>
    <script src="/static/js/hyperscript.min.js" defer></script>
    <script src="/static/js/sweetalert2@11.js" defer></script>
+    <!-- Mermaid -->
+    <script src="https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js"></script>
+    <script>
+        // Initialize Mermaid with startOnLoad set to false
+        mermaid.initialize({
+            startOnLoad: false, // Prevent automatic rendering
+            theme: 'neutral',
+            er: {
+                diagramPadding: 20,
+                layoutDirection: 'TB',
+            }
+        });
+    </script>
 </head>

 <body>