From 2459b4c680408271dd39ec95e1ac28baf51a9e56 Mon Sep 17 00:00:00 2001
From: Lars Rossen <lars@hrossen.dk>
Date: Sun, 10 May 2026 12:18:02 +0200
Subject: [PATCH] trying to get mermaid diagrams to work

---
 build-slides.sh                 |  6 +++++-
 docs/infrastruktur/labdesign.md | 11 +++++++++--
 marp.config.mjs                 | 21 +++++++++++++++++++++
 package.json                    | 12 ++++++++++++
 4 files changed, 47 insertions(+), 3 deletions(-)
 create mode 100644 marp.config.mjs
 create mode 100644 package.json

diff --git a/build-slides.sh b/build-slides.sh
index 41a05ac..42d4281 100755
--- a/build-slides.sh
+++ b/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)..."
diff --git a/docs/infrastruktur/labdesign.md b/docs/infrastruktur/labdesign.md
index a284548..c741dc1 100644
--- a/docs/infrastruktur/labdesign.md
+++ b/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
 
diff --git a/marp.config.mjs b/marp.config.mjs
new file mode 100644
index 0000000..21f911d
--- /dev/null
+++ b/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
+  }
+}
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..c53adde
--- /dev/null
+++ b/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"
+  }
+}