Merge pull request #691 from direct-framework/690-mermaid-style

Add CSS styling for mermaid diagram SVG

Author: AdrianDAlessandro

main/static/assets/css/theme.css

@@ -1,12 +1,13 @@
+{% load static %}
 <script type="module">import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs';</script>
-<pre class="mermaid" style="background-color: #edf1f5">
+<pre class="mermaid">
 ---
 config:
   theme: base
   themeVariables:
     background: "#edf1f5"
     primaryColor: "#CEE398"
-    secondaryColor: "#edf1f5"
+    secondaryColor: "#F6F9FC"
 ---
 flowchart TD
 CD[Competency Domains]

main/static/assets/css/theme.css.map

@@ -46,3 +46,12 @@ html {
 .alert p {
   margin: 0;
 }
+
+.mermaid {
+  background-color: #f6f9fc;
+}
+
+.mermaid > svg {
+  display: block;
+  margin: auto;
+}

main/static/assets/css/theme.min.css

@@ -20,7 +20,7 @@
         "@rollup/plugin-babel": "^6.0.4",
         "@rollup/plugin-commonjs": "^28.0.3",
         "@rollup/plugin-node-resolve": "^15.2.3",
-        "@rollup/plugin-terser": "^0.4.4",
+        "@rollup/plugin-terser": "^1.0.0",
         "@rollup/plugin-virtual": "^3.0.2",
         "@storybook/addon-essentials": "^8.6.14",
         "@storybook/addon-interactions": "^8.6.14",
@@ -29,7 +29,7 @@
         "@storybook/html-vite": "^8.6.14",
         "@storybook/test": "^8.6.14",
         "autoprefixer": "^10.4.16",
-        "browser-sync": "^2.29.3",
+        "browser-sync": "^3.0.4",
         "cssnano": "^6.0.1",
         "eslint": "^8.53.0",
         "eslint-config-prettier": "^9.0.0",