Merge pull request #105 from JankariTech/mermaid

support mermaid.js

Author: individual-it

package-common.json

@@ -15,7 +15,8 @@
   },
   "dependencies": {
     "@types/reveal.js": "^4.4.8",
-    "reveal.js": "^5.1.0"
+    "reveal.js": "^5.1.0",
+    "reveal.js-mermaid-plugin": "^11.4.1"
   },
   "devDependencies": {
     "@babel/eslint-parser": "^7.24.5",

src/App.vue

@@ -33,6 +33,7 @@ import { Resource } from '@ownclouders/web-client/src'
 import Reveal from 'reveal.js'
 import RevealMarkdown from 'reveal.js/plugin/markdown/markdown'
 import RevealHighlight from 'reveal.js/plugin/highlight/highlight'
+import RevealMermaid from 'reveal.js-mermaid-plugin/plugin/mermaid/mermaid'
 
 import 'reveal.js/dist/reveal.css'
 import 'reveal.js/plugin/highlight/monokai.css'
@@ -101,7 +102,7 @@ onMounted(async () => {
     })
 
   reveal = new Reveal(unref(revealContainer), {
-    plugins: [RevealMarkdown, RevealHighlight]
+    plugins: [RevealMarkdown, RevealHighlight, RevealMermaid]
   })
 
   await reveal.initialize({

tests/e2e/filesForUpload/test-markdown.md

@@ -52,3 +52,14 @@ We are using Triple Dash "---" as a slide separator
  # Title for slide 3
  Content of slide 3
  ```
+---
+### Flowcharts with Mermaid
+
+```mermaid
+flowchart LR
+  A[Boss tells <br>you to create <br>a presentation] --> B{Use Powerpoint or a MD file?};
+  B -- Powerpoint --> C(Frustration 😫);
+C --> D[Rethink 🤔];
+D --> B;
+B -- MD file 🧑‍💻 ----> E[Job done 👍];
+```