Alternative mermaid renderer

docs/.vitepress/config.js

@@ -1,10 +1,9 @@
 import languages from './languages';
-import { defineConfig } from 'vitepress';
-import { withMermaid } from "vitepress-plugin-mermaid";
+import {defineConfig} from 'vitepress';
 
 const base = '/cloud-identity-developer-guide/';
 
-export default defineConfig(withMermaid({
+export default defineConfig({
     base,
     title: 'SCI Developer Guide',
     description: 'Application development with the client libraries for SAP Cloud Identity Services',
@@ -113,4 +112,4 @@ export default defineConfig(withMermaid({
     head: [
         ['link', { rel: 'icon', href: `${base}/favicon.png`, type: 'image/png' }]
     ]
-}));
+});

docs/.vitepress/theme/custom.css

@@ -110,4 +110,39 @@
 /* Override VitePress paragraph line-height specifically for Mermaid diagrams. Other configs cause issues (text overflowing) in multi-line diagrams */
 .vp-doc .mermaid p {
   line-height: 24px !important;
+}
+
+/* vitepress-mermaid-renderer overrides:
+ * The plugin hard-codes a min-height: 20rem / max-height: 50vh container with
+ * overflow:hidden, which clips taller diagrams and makes the default view look
+ * "zoomed in". Let the container size to the diagram's natural rendered height
+ * so scale=1 shows the full diagram; the toolbar still allows zoom + pan. */
+.mermaid-container,
+.mermaid-container .diagram-wrapper {
+  min-height: 0 !important;
+  max-height: none !important;
+  height: auto !important;
+}
+
+.mermaid-container .mermaid {
+  display: block;
+  width: 100%;
+}
+
+/* Drop the VitePress code-block background that wraps the rendered diagram, so
+ * the diagram renders against the page background like other figures. */
+.mermaid-wrapper,
+div[class*="language-"]:has(> .mermaid-wrapper),
+div[class*="language-"]:has(> pre[data-mermaid-processed]) {
+  background: transparent !important;
+}
+
+.mermaid-wrapper .mermaid-container {
+  background: transparent !important;
+}
+
+/* Reserve a little space at the bottom of the diagram area so the floating
+ * zoom/pan toolbar does not overlap the bottom edge of the rendered diagram. */
+.mermaid-container .diagram-wrapper {
+  padding-bottom: 4rem;
 }

docs/.vitepress/theme/index.js

@@ -1,4 +1,70 @@
-import DefaultTheme from 'vitepress/theme'
+import {h, nextTick, watch} from "vue";
+import DefaultTheme from "vitepress/theme";
+import {useData} from "vitepress";
+import {createMermaidRenderer} from "vitepress-mermaid-renderer";
 import './custom.css'
 
-export default DefaultTheme
+export default {
+    extends: DefaultTheme,
+    Layout: () => {
+        const {isDark} = useData();
+
+        const initMermaid = () => {
+            const mermaidRenderer = createMermaidRenderer({
+                theme: isDark.value ? "dark" : "base",
+                // Make every diagram type honor the parent container width by default
+                // so the diagram is fully visible at scale=1 and the user can zoom in
+                // via the toolbar if needed.
+                flowchart: { useMaxWidth: true },
+                sequence: { useMaxWidth: true },
+                gantt: { useMaxWidth: true },
+                journey: { useMaxWidth: true },
+                class: { useMaxWidth: true },
+                state: { useMaxWidth: true },
+                er: { useMaxWidth: true },
+                pie: { useMaxWidth: true },
+                requirement: { useMaxWidth: true },
+                mindmap: { useMaxWidth: true },
+                timeline: { useMaxWidth: true },
+                gitGraph: { useMaxWidth: true },
+                c4: { useMaxWidth: true },
+                quadrantChart: { useMaxWidth: true },
+                xyChart: { useMaxWidth: true },
+                sankey: { useMaxWidth: true },
+                block: { useMaxWidth: true },
+                packet: { useMaxWidth: true },
+                architecture: { useMaxWidth: true }
+            });
+            mermaidRenderer.setToolbar({
+                showLanguageLabel: false,
+                desktop: {
+                    copyCode: "enabled",
+                    toggleFullscreen: "enabled",
+                    resetView: "enabled",
+                    zoomOut: "enabled",
+                    zoomIn: "enabled",
+                    zoomLevel: "enabled",
+                },
+                fullscreen: {
+                    copyCode: "disabled",
+                    toggleFullscreen: "enabled",
+                    resetView: "disabled",
+                    zoomLevel: "disabled",
+                },
+            });
+        };
+
+        // initial mermaid setup
+        nextTick(() => initMermaid());
+
+        // on theme change, re-render mermaid charts
+        watch(
+            () => isDark.value,
+            () => {
+                initMermaid();
+            },
+        );
+
+        return h(DefaultTheme.Layout);
+    },
+};