implement mermaid js

css/metadata.scss

@@ -131,6 +131,17 @@ $default-font-size: 22px;
             display: flex;
             flex-direction: column;
             justify-content: center;
+
+            .code-wrapper {
+                box-shadow: none;
+                margin: 0;
+
+                .mermaid {
+                    max-height: 100%;
+                    background: #ffffff;
+                    text-align: center;
+                }
+            }
         }
     }
 

index.example.html

@@ -29,6 +29,7 @@
                 updateImageUrl('{{{ imagePath }}}')
                 addCustomSlideNumber(event)
                 fitContent()
+                adjustFontSize()
                 showHideFooterAndSlideNumber('{{{ slideNumber }}}', {{ hideFooter }})
                 setFullPageBackground({{{ headingData }}}, '{{{ imagePath }}}', {{ config.pdfWidth }}, {{ config.pdfHeight }})
             })
@@ -47,7 +48,7 @@
                 hash: true,
 
                 // Learn about plugins: https://revealjs.com/plugins/
-                plugins: [RevealAwesoMD, RevealHighlight, RevealNotes],
+                plugins: [RevealAwesoMD, RevealHighlight, RevealNotes, RevealMermaid],
             })
         </script>
     </body>

js/vendor.js

@@ -3,6 +3,7 @@ const vendorScripts = [
     'node_modules/reveal.js/plugin/notes/notes.js',
     'node_modules/revealjs-awesomd/plugin/awesoMD/awesoMD.js',
     'node_modules/reveal.js/plugin/highlight/highlight.js',
+    'node_modules/reveal.js-mermaid-plugin/plugin/mermaid/mermaid.js',
 ]
 
 module.exports = vendorScripts

package.json

@@ -60,6 +60,7 @@
         "marked": "^4.3.0",
         "puppeteer": "^23.1.0",
         "reveal.js": "^5.1.0",
+        "reveal.js-mermaid-plugin": "^2.3.0",
         "sass": "^1.77.0",
         "vinyl-buffer": "^1.0.1",
         "vinyl-source-stream": "^2.0.0",

tests/unit/jest/presentation.spec.js

@@ -58,6 +58,13 @@ const getTotalSlides = async () => {
     })
 }
 
+// mermaid js generates an unique id for every svg element (e.g. id="mermaid-8iido71fowf")
+// this results in the snapshot test to fail
+// so normalizing the svg element with static id
+const normalizeSvgElement = async (pageContent) => {
+    return pageContent.replace(/mermaid-[\w-]+/g, 'mermaid-unique-id')
+}
+
 beforeAll(async () => {
     await testHelper.copyAssets()
     await startTestServer('test.md')
@@ -85,19 +92,24 @@ beforeEach(async () => {
 describe('test markdown presentation', () => {
     it('should match the total number of slides', async () => {
         const totalSlides = await getTotalSlides()
-        expect(totalSlides).toEqual(33)
+        expect(totalSlides).toEqual(34)
     })
 
     it('should render markdown presentation', async () => {
         await setScreenSize(screenWidth, screenHeight)
-        expect(beautify(await page.content())).toMatchSnapshot()
+        const verifySlideContent = async () => {
+            const pageContent = beautify(await page.content())
+            const normalizedSvgPageContent = await normalizeSvgElement(pageContent)
+            expect(normalizedSvgPageContent).toMatchSnapshot()
+        }
+        await verifySlideContent()
 
         const totalSlides = await getTotalSlides()
         for (let i = 0; i < totalSlides - 1; i++) {
             const element = await page.waitForSelector('.navigate-right')
             await element.click()
             await testHelper.waitForTransitionEnd(page, '.progress')
-            expect(beautify(await page.content())).toMatchSnapshot()
+            await verifySlideContent()
         }
     }, 60000)
 

tests/unit/testFiles/index.example.html

@@ -29,6 +29,7 @@
                 updateImageUrl('{{{ imagePath }}}')
                 addCustomSlideNumber(event)
                 fitContent()
+                adjustFontSize()
                 showHideFooterAndSlideNumber('{{{ slideNumber }}}', {{ hideFooter }})
                 setFullPageBackground({{{ headingData }}}, '{{{ imagePath }}}', {{ config.pdfWidth }}, {{ config.pdfHeight }})
             })
@@ -46,7 +47,7 @@
                 hash: true,
 
                 // Learn about plugins: https://revealjs.com/plugins/
-                plugins: [RevealAwesoMD, RevealHighlight, RevealNotes],
+                plugins: [RevealAwesoMD, RevealHighlight, RevealNotes, RevealMermaid],
             })
         </script>
     </body>

tests/unit/testFiles/markdown/test/test.md

@@ -91,3 +91,14 @@ some content
 # Section Slide for long TOC
 # Section Slide for long TOC
 # Section Slide for long TOC
+
+## Mermaid JS
+
+```mermaid
+flowchart TD
+   A[Start] --> B{Is it?};
+   B -- Yes --> C[OK];
+   C --> D[Rethink];
+   D --> B;
+   B -- No ----> E[End];
+```

utils/helper.js

@@ -78,6 +78,17 @@ function adjustFontSize() {
                         image.style.height = `${Math.floor(currentHeight * scaleFactor)}px`
                     })
                 }
+
+                // reduce chart size if font size gets smaller than minimum font size
+                const charts = wrapperElement.querySelectorAll('.mermaid')
+                if (fontSize <= fontSizeToStartReducingImage && charts.length > 0) {
+                    charts.forEach((chart) => {
+                        const chartElement = chart.querySelector('svg')
+                        const bbox = chartElement.getBBox()
+                        const chartHeight = bbox.height
+                        chartElement.style.height = `${scaleFactor * chartHeight}px`
+                    })
+                }
             })
 
         totalHeight = getTotalHeightOfChildren(content)