peterstockings/workout
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Generate ERD diagram from schema at build time rather then dynamically to reduce dependency on mermaid js library in the frontend

Browse Source
This commit is contained in:
Peter Stockings
2026-01-29 13:20:45 +11:00
parent 509d11443d
commit 6fb9ba126f
10 changed files with 809 additions and 146 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
templates/base.html
View File

@@ -17,19 +17,6 @@
<script src="/static/js/htmx.min.js" defer></script>
<script src="/static/js/hyperscript.min.js"></script>
<script src="/static/js/sweetalert2@11.js" defer></script>
<!-- Mermaid -->
<script src="/static/js/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>

8
templates/partials/sql_explorer/schema.html
View File

@@ -15,11 +15,9 @@
<span>Copy SQL</span>
</button>
<div class="overflow-auto" style="max-height: 80vh;">
<div class="mermaid" style="opacity: 0;" _="on load
mermaid.init(undefined, this)
set me.style.opacity to '1'">
{{ mermaid_code }}
<div class="overflow-auto border rounded-xl bg-slate-50 p-4" style="max-height: 80vh;">
<div class="flex justify-center">
<img src="/static/img/schema.svg" alt="Database Schema Diagram" class="max-w-full h-auto">
</div>
</div>