trying to get mermaid diagrams to work

build-slides.sh

@@ -19,7 +19,11 @@ fi
 echo "Found ${#SLIDES[@]} presentation(s):"
 printf '  %s\n' "${SLIDES[@]}"
 
-if command -v marp &>/dev/null; then
+CONFIG="$REPO_ROOT/marp.config.mjs"
+
+if command -v npx &>/dev/null && [ -f "$CONFIG" ]; then
+  npx @marp-team/marp-cli --config "$CONFIG" --html --output "$OUTPUT_DIR/" "${SLIDES[@]}"
+elif command -v marp &>/dev/null; then
   marp --html --output "$OUTPUT_DIR/" "${SLIDES[@]}"
 else
   echo "marp not found locally — using Docker (marpteam/marp-cli)..."

docs/infrastruktur/labdesign.md

@@ -1,8 +1,15 @@
 ---
 marp: true
-pagination: true
+theme: gaia
+class: invert
+paginate: true
 ---
 
+<script type="module">
+import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs';
+mermaid.initialize({ startOnLoad: true, theme: 'dark' });
+</script>
+
 # Introduction
 
 This is assorted notes on what could go into the MakerFLOSS lab
@@ -127,7 +134,7 @@ graph TB
     Firewall --> BackupSrv
 ```
 
-ß---
+---
 
 ## Long term
 

marp.config.mjs

@@ -0,0 +1,21 @@
+import { Marp } from '@marp-team/marp-core'
+
+// Custom Marp engine with Mermaid support via HTML injection
+export default {
+  html: true,
+  engine: (constructorOptions) => {
+    const marp = new Marp(constructorOptions)
+
+    // Transform mermaid code blocks to divs that mermaid.js can render
+    const { code } = marp.markdown.renderer.rules
+    marp.markdown.renderer.rules.code = (tokens, idx, options, env, self) => {
+      const token = tokens[idx]
+      if (token.info.trim() === 'mermaid') {
+        return `<div class="mermaid">${token.content}</div>`
+      }
+      return code(tokens, idx, options, env, self)
+    }
+
+    return marp
+  }
+}

package.json

@@ -0,0 +1,12 @@
+{
+  "name": "makerfloss-slides",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "build": "./build-slides.sh"
+  },
+  "devDependencies": {
+    "@marp-team/marp-cli": "^4.1.0",
+    "@marp-team/marp-core": "^4.1.0"
+  }
+}