diff --git a/docs/superpowers/specs/2026-05-10-mermaid-pipeline-design.md b/docs/superpowers/specs/2026-05-10-mermaid-pipeline-design.md new file mode 100644 index 0000000..00cbbc2 --- /dev/null +++ b/docs/superpowers/specs/2026-05-10-mermaid-pipeline-design.md @@ -0,0 +1,63 @@ +# Mermaid + Marp Pipeline Design + +**Date:** 2026-05-10 +**Status:** Approved + +## Goal + +Enable Mermaid diagrams in Marp presentations without any per-file manual steps for authors. A push to the repo triggers the existing webhook CI, which builds the slides and serves them at `slides.makerfloss.eu`. + +## Context + +- Webhook CI is live: `push → build-slides.sh → slides/` served at `slides.makerfloss.eu` +- `build-slides.sh` already passes `--html` to marp (raw HTML in markdown is allowed) +- Marp emits fenced mermaid blocks as `
…`
+- A previous attempt (`2459b4c`) used a custom `marp.config.mjs` but failed: it overrode `rules.code` instead of `rules.fence`, so mermaid blocks were never transformed. That approach also required `npm install` on the server. It was reverted.
+
+## Approach: HTML post-processing in `build-slides.sh`
+
+After the marp build, loop over every `slides/*.html`. For each file that contains `class="language-mermaid"`, inject the following snippet before `