Update flowchart padding

Author: hasparus

next.config.js

@@ -185,20 +185,28 @@ function mermaidConfig() {
     rehypeMermaid,
     /** @type {import("rehype-mermaid").RehypeMermaidOptions} */ ({
       mermaidConfig: {
-        fontFamily: "var(--font-mono, monospace)",
+        fontFamily: "var(--font-sans)", // we can't use monospace here because it's way too wide
         theme: "null",
         look: "classic",
+        flowchart: {
+          defaultRenderer: "elk",
+          padding: 6,
+        },
         themeCSS: `
           .node rect {
-            fill: hsl(var(--color-neu-50));
-            stroke: hsl(var(--color-neu-300));
+            fill: var(--mermaid-node-fill);
+            stroke: var(--mermaid-node-stroke);
           }
           .label text, span {
             fill: hsl(var(--color-neu-900));
             color: hsl(var(--color-neu-900));
           }
           .flowchart-link {
-            stroke: hsl(var(--color-neu-500));
+            stroke: var(--mermaid-arrow);
+          }
+          .marker {
+            stroke: var(--mermaid-arrow);
+            fill: var(--mermaid-arrow);
           }
         `,
       },

src/globals.css

@@ -453,3 +453,26 @@ html:has([role="menu"][data-open]) {
     overscroll-behavior-y: none;
   }
 }
+
+.flowchart {
+  --mermaid-node-fill: hsl(var(--color-neu-100));
+  --mermaid-node-stroke: hsl(var(--color-neu-200));
+  --mermaid-arrow: hsl(var(--color-neu-500));
+
+  margin: 1.5rem auto 0 auto;
+
+  & .label text,
+  span {
+    font-size: 14px !important;
+  }
+
+  & div:has(> .nodeLabel) {
+    display: unset !important;
+  }
+}
+
+.dark .flowchart {
+  --mermaid-node-fill: hsl(var(--color-neu-50) / 0.5);
+  --mermaid-node-stroke: hsl(var(--color-neu-100));
+  --mermaid-arrow: hsl(var(--color-neu-300));
+}