Add Mermaid diagrams to slides with proper rendering#1
Merged
Conversation
- Add network architecture diagram showing Pi-hole placement - Add DNS query flow sequence diagram (blocked vs allowed) - Add demo flow diagram - Enhance key takeaways and add questions slide with resources - Add http-server as dev dependency on port 8001 - Add 'serve' and 'preview' npm scripts for local browsing
- Add marp.config.js with Mermaid configuration - Create inject-mermaid.mjs post-build script to load mermaid.js CDN - Update build.mjs to run Mermaid injection after Marp build - Diagrams now render properly in browser
There was a problem hiding this comment.
Pull request overview
This PR updates the Marp-based slide deck build pipeline so Mermaid diagrams render correctly by post-processing the generated HTML and injecting Mermaid.js, and it expands the deck content with several Mermaid diagrams.
Changes:
- Added an HTML post-processing script (
scripts/inject-mermaid.mjs) that converts Marp’scode.language-mermaidblocks intopre.mermaidblocks and injects Mermaid.js initialization. - Updated the build pipeline to run Marp with
marp.config.jsand then run the Mermaid injection step. - Added Mermaid diagrams to
slides.mdand introducedhttp-server-based preview scripts.
Reviewed changes
Copilot reviewed 5 out of 6 changed files in this pull request and generated 4 comments.
Show a summary per file
| File | Description |
|---|---|
| slides.md | Adds Mermaid-based diagrams and updates slide content/structure. |
| scripts/inject-mermaid.mjs | Implements JSDOM-based HTML transformation + Mermaid.js injection. |
| scripts/build.mjs | Runs Marp with a config file and executes the Mermaid injection step after build. |
| package.json | Adds jsdom + http-server and introduces serve/preview scripts. |
| marp.config.js | Enables HTML/markdown HTML and adds Mermaid configuration. |
| pnpm-lock.yaml | Locks new dependencies (jsdom, http-server, transitive deps). |
Files not reviewed (1)
- pnpm-lock.yaml: Language not supported
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| "@marp-team/marp-cli": "^4.1.0" | ||
| "@marp-team/marp-cli": "^4.1.0", | ||
| "http-server": "^14.1.0", | ||
| "jsdom": "^29.1.1" |
Comment on lines
+34
to
+37
| if (!html.includes('mermaid.min.js')) { | ||
| const mermaidScript = `<script src="https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js"><\/script> | ||
| <script>mermaid.initialize({ startOnLoad: true, theme: 'default' }); mermaid.contentLoaded();<\/script> | ||
| </body>`; |
Comment on lines
+34
to
+43
| if (!html.includes('mermaid.min.js')) { | ||
| const mermaidScript = `<script src="https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js"><\/script> | ||
| <script>mermaid.initialize({ startOnLoad: true, theme: 'default' }); mermaid.contentLoaded();<\/script> | ||
| </body>`; | ||
|
|
||
| html = html.replace('</body>', mermaidScript); | ||
| } | ||
|
|
||
| writeFileSync(outputFile, html, 'utf-8'); | ||
| console.log(`✓ Transformed ${codeBlocks.length} mermaid code block(s) and injected library`); |
Comment on lines
9
to
14
| "scripts": { | ||
| "dev": "pnpm exec marp slides.md --server --allow-local-files", | ||
| "build": "node scripts/build.mjs", | ||
| "serve": "http-server dist -p 8001 -o", | ||
| "preview": "pnpm build && pnpm serve", | ||
| "export": "pnpm exec marp slides.md --pdf --allow-local-files --output dist/slides.pdf", |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Fixes Mermaid diagram rendering by properly transforming code blocks from Marp's
language-mermaidformat to themermaidclass format that Mermaid.js expects.Changes
<code class="language-mermaid">blocks to<pre class="mermaid">elementsjsdomas a dev dependency for HTML parsingProblem & Solution
Marp was rendering fenced code blocks with mermaid language as
<code class="language-mermaid">inside<pre>tags, but Mermaid.js looks for elements with themermaidclass directly. The injection script now:language-mermaidcode blocks<pre class="mermaid">elementsTesting
pnpm buildto verify transformation messagepnpm serveand check http://127.0.0.1:8001 to see rendered diagrams