Merge pull request #165 from jannis-baum/issue/132-mermaid-support

Mermaid Support
jannis-baum · Aug 27, 2024 · 9c5f1ff · 9c5f1ff
2 parents 3a001bc + d3a77ec
commit 9c5f1ff
Show file tree

Hide file tree

Showing 71 changed files with 595 additions and 4 deletions.
diff --git a/README.md b/README.md
@@ -28,6 +28,7 @@ issue](https://github.com/jannis-baum/vivify/issues/new/choose) or
   [extended](https://www.markdownguide.org/extended-syntax/) syntax support
 - [KaTeX math](https://katex.org)
 - [graphviz/dot graphs](https://graphviz.org/doc/info/lang.html)
+- [Mermaid diagrams & charts](https://mermaid.js.org)
 - [GitHub alert
   blocks](https://docs.github.com/en/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax#alerts)
 - links to other files: [relative links like in

diff --git a/package.json b/package.json
@@ -33,6 +33,7 @@
     "markdown-it-table-of-contents": "^0.6.0",
     "markdown-it-task-lists": "^2.1.1",
     "markdown-it-texmath": "^1.0.0",
+    "mermaid": "^11.0.2",
     "node-stream-zip": "^1.15.0",
     "open": "^10.1.0",
     "tmp": "^0.2.3",

diff --git a/src/parser/markdown.ts b/src/parser/markdown.ts
@@ -2,6 +2,7 @@ import MarkdownIt from 'markdown-it';
 import anchor from 'markdown-it-anchor';
 import highlight from './highlight.js';
 import graphviz from './dot.js';
+import mermaid from './mermaid.js';
 import githubAlerts from 'markdown-it-github-alerts';
 import config from '../config.js';
 import { Renderer } from './parser.js';
@@ -66,6 +67,7 @@ mdit.use(anchor, {
 });
 mdit.use(graphviz);
 mdit.use(githubAlerts);
+mdit.use(mermaid);
 
 const renderMarkdown: Renderer = (content: string) => {
     return mdit.render(content);

diff --git a/src/parser/mermaid.ts b/src/parser/mermaid.ts
@@ -0,0 +1,12 @@
+import MarkdownIt from 'markdown-it';
+
+export default function mermaid(md: MarkdownIt) {
+    const defaultRender = md.renderer.rules.fence!;
+    md.renderer.rules.fence = (tokens, idx, options, env, self) => {
+        const token = tokens[idx];
+        if (token.info === 'mermaid') {
+            return `<pre class="mermaid">${token.content}</pre>`;
+        }
+        return defaultRender(tokens, idx, options, env, self);
+    };
+}
diff --git a/src/routes/static.ts b/src/routes/static.ts
@@ -42,6 +42,7 @@ class StaticProvider {
     static mime(path: string): string {
         if (path.endsWith('.css')) return 'text/css';
         if (path.endsWith('.js')) return 'text/javascript';
+        if (path.endsWith('.mjs')) return 'text/javascript';
         if (path.endsWith('.ttf')) return 'font/ttf';
         if (path.endsWith('.woff2')) return 'font/woff2';
         throw new Error('Unknown MIME type');

diff --git a/src/routes/viewer.ts b/src/routes/viewer.ts
@@ -85,7 +85,23 @@ router.get(/.*/, async (req: Request, res: Response) => {
                 window.VIV_PORT = "${config.port}";
                 window.VIV_PATH = "${urlToPath(req.path)}";
             </script>
+
             ${config.scripts ? `<script type="text/javascript">${config.scripts}</script>` : ''}
+
+            <script type="module">
+                import mermaid from '/static/mermaid/mermaid.esm.min.mjs';
+                const darkModePreference = window.matchMedia("(prefers-color-scheme: dark)");
+                mermaid.initialize({ startOnLoad: true, theme: darkModePreference.matches ? 'dark' : 'default' })
+
+                function updateTheme() {
+                    if (document.getElementsByClassName('mermaid').length > 0) {
+                        window.location.reload()
+                    }
+                }
+                darkModePreference.addEventListener("change", () => updateTheme());
+                // deprecated method for backward compatibility
+                darkModePreference.addEventListener(() => updateTheme());
+            </script>
             <script type="text/javascript" src="/static/client.js"></script>
         </html>
     `);

diff --git a/static/katex b/static/katex
@@ -0,0 +1 @@
+../node_modules/katex/dist
diff --git a/static/katex/fonts/KaTeX_AMS-Regular.ttf b/static/katex/fonts/KaTeX_AMS-Regular.ttf
diff --git a/static/katex/fonts/KaTeX_AMS-Regular.woff b/static/katex/fonts/KaTeX_AMS-Regular.woff
diff --git a/static/katex/fonts/KaTeX_AMS-Regular.woff2 b/static/katex/fonts/KaTeX_AMS-Regular.woff2
diff --git a/static/katex/fonts/KaTeX_Caligraphic-Bold.ttf b/static/katex/fonts/KaTeX_Caligraphic-Bold.ttf
diff --git a/static/katex/fonts/KaTeX_Caligraphic-Bold.woff b/static/katex/fonts/KaTeX_Caligraphic-Bold.woff
diff --git a/static/katex/fonts/KaTeX_Caligraphic-Bold.woff2 b/static/katex/fonts/KaTeX_Caligraphic-Bold.woff2
diff --git a/static/katex/fonts/KaTeX_Caligraphic-Regular.ttf b/static/katex/fonts/KaTeX_Caligraphic-Regular.ttf
diff --git a/static/katex/fonts/KaTeX_Caligraphic-Regular.woff b/static/katex/fonts/KaTeX_Caligraphic-Regular.woff
diff --git a/static/katex/fonts/KaTeX_Caligraphic-Regular.woff2 b/static/katex/fonts/KaTeX_Caligraphic-Regular.woff2
diff --git a/static/katex/fonts/KaTeX_Fraktur-Bold.ttf b/static/katex/fonts/KaTeX_Fraktur-Bold.ttf
diff --git a/static/katex/fonts/KaTeX_Fraktur-Bold.woff b/static/katex/fonts/KaTeX_Fraktur-Bold.woff
diff --git a/static/katex/fonts/KaTeX_Fraktur-Bold.woff2 b/static/katex/fonts/KaTeX_Fraktur-Bold.woff2
diff --git a/static/katex/fonts/KaTeX_Fraktur-Regular.ttf b/static/katex/fonts/KaTeX_Fraktur-Regular.ttf
diff --git a/static/katex/fonts/KaTeX_Fraktur-Regular.woff b/static/katex/fonts/KaTeX_Fraktur-Regular.woff
diff --git a/static/katex/fonts/KaTeX_Fraktur-Regular.woff2 b/static/katex/fonts/KaTeX_Fraktur-Regular.woff2
diff --git a/static/katex/fonts/KaTeX_Main-Bold.ttf b/static/katex/fonts/KaTeX_Main-Bold.ttf
diff --git a/static/katex/fonts/KaTeX_Main-Bold.woff b/static/katex/fonts/KaTeX_Main-Bold.woff
diff --git a/static/katex/fonts/KaTeX_Main-Bold.woff2 b/static/katex/fonts/KaTeX_Main-Bold.woff2
diff --git a/static/katex/fonts/KaTeX_Main-BoldItalic.ttf b/static/katex/fonts/KaTeX_Main-BoldItalic.ttf
diff --git a/static/katex/fonts/KaTeX_Main-BoldItalic.woff b/static/katex/fonts/KaTeX_Main-BoldItalic.woff
diff --git a/static/katex/fonts/KaTeX_Main-BoldItalic.woff2 b/static/katex/fonts/KaTeX_Main-BoldItalic.woff2
diff --git a/static/katex/fonts/KaTeX_Main-Italic.ttf b/static/katex/fonts/KaTeX_Main-Italic.ttf
diff --git a/static/katex/fonts/KaTeX_Main-Italic.woff b/static/katex/fonts/KaTeX_Main-Italic.woff
diff --git a/static/katex/fonts/KaTeX_Main-Italic.woff2 b/static/katex/fonts/KaTeX_Main-Italic.woff2
diff --git a/static/katex/fonts/KaTeX_Main-Regular.ttf b/static/katex/fonts/KaTeX_Main-Regular.ttf
diff --git a/static/katex/fonts/KaTeX_Main-Regular.woff b/static/katex/fonts/KaTeX_Main-Regular.woff
diff --git a/static/katex/fonts/KaTeX_Main-Regular.woff2 b/static/katex/fonts/KaTeX_Main-Regular.woff2
diff --git a/static/katex/fonts/KaTeX_Math-BoldItalic.ttf b/static/katex/fonts/KaTeX_Math-BoldItalic.ttf
diff --git a/static/katex/fonts/KaTeX_Math-BoldItalic.woff b/static/katex/fonts/KaTeX_Math-BoldItalic.woff
diff --git a/static/katex/fonts/KaTeX_Math-BoldItalic.woff2 b/static/katex/fonts/KaTeX_Math-BoldItalic.woff2
diff --git a/static/katex/fonts/KaTeX_Math-Italic.ttf b/static/katex/fonts/KaTeX_Math-Italic.ttf
diff --git a/static/katex/fonts/KaTeX_Math-Italic.woff b/static/katex/fonts/KaTeX_Math-Italic.woff
diff --git a/static/katex/fonts/KaTeX_Math-Italic.woff2 b/static/katex/fonts/KaTeX_Math-Italic.woff2
diff --git a/static/katex/fonts/KaTeX_SansSerif-Bold.ttf b/static/katex/fonts/KaTeX_SansSerif-Bold.ttf
diff --git a/static/katex/fonts/KaTeX_SansSerif-Bold.woff b/static/katex/fonts/KaTeX_SansSerif-Bold.woff
diff --git a/static/katex/fonts/KaTeX_SansSerif-Bold.woff2 b/static/katex/fonts/KaTeX_SansSerif-Bold.woff2
diff --git a/static/katex/fonts/KaTeX_SansSerif-Italic.ttf b/static/katex/fonts/KaTeX_SansSerif-Italic.ttf
diff --git a/static/katex/fonts/KaTeX_SansSerif-Italic.woff b/static/katex/fonts/KaTeX_SansSerif-Italic.woff
diff --git a/static/katex/fonts/KaTeX_SansSerif-Italic.woff2 b/static/katex/fonts/KaTeX_SansSerif-Italic.woff2
diff --git a/static/katex/fonts/KaTeX_SansSerif-Regular.ttf b/static/katex/fonts/KaTeX_SansSerif-Regular.ttf
diff --git a/static/katex/fonts/KaTeX_SansSerif-Regular.woff b/static/katex/fonts/KaTeX_SansSerif-Regular.woff
diff --git a/static/katex/fonts/KaTeX_SansSerif-Regular.woff2 b/static/katex/fonts/KaTeX_SansSerif-Regular.woff2
diff --git a/static/katex/fonts/KaTeX_Script-Regular.ttf b/static/katex/fonts/KaTeX_Script-Regular.ttf
diff --git a/static/katex/fonts/KaTeX_Script-Regular.woff b/static/katex/fonts/KaTeX_Script-Regular.woff
diff --git a/static/katex/fonts/KaTeX_Script-Regular.woff2 b/static/katex/fonts/KaTeX_Script-Regular.woff2
diff --git a/static/katex/fonts/KaTeX_Size1-Regular.ttf b/static/katex/fonts/KaTeX_Size1-Regular.ttf
diff --git a/static/katex/fonts/KaTeX_Size1-Regular.woff b/static/katex/fonts/KaTeX_Size1-Regular.woff
diff --git a/static/katex/fonts/KaTeX_Size1-Regular.woff2 b/static/katex/fonts/KaTeX_Size1-Regular.woff2
diff --git a/static/katex/fonts/KaTeX_Size2-Regular.ttf b/static/katex/fonts/KaTeX_Size2-Regular.ttf
diff --git a/static/katex/fonts/KaTeX_Size2-Regular.woff b/static/katex/fonts/KaTeX_Size2-Regular.woff
diff --git a/static/katex/fonts/KaTeX_Size2-Regular.woff2 b/static/katex/fonts/KaTeX_Size2-Regular.woff2
diff --git a/static/katex/fonts/KaTeX_Size3-Regular.ttf b/static/katex/fonts/KaTeX_Size3-Regular.ttf
diff --git a/static/katex/fonts/KaTeX_Size3-Regular.woff b/static/katex/fonts/KaTeX_Size3-Regular.woff
diff --git a/static/katex/fonts/KaTeX_Size3-Regular.woff2 b/static/katex/fonts/KaTeX_Size3-Regular.woff2
diff --git a/static/katex/fonts/KaTeX_Size4-Regular.ttf b/static/katex/fonts/KaTeX_Size4-Regular.ttf
diff --git a/static/katex/fonts/KaTeX_Size4-Regular.woff b/static/katex/fonts/KaTeX_Size4-Regular.woff
diff --git a/static/katex/fonts/KaTeX_Size4-Regular.woff2 b/static/katex/fonts/KaTeX_Size4-Regular.woff2
diff --git a/static/katex/fonts/KaTeX_Typewriter-Regular.ttf b/static/katex/fonts/KaTeX_Typewriter-Regular.ttf
diff --git a/static/katex/fonts/KaTeX_Typewriter-Regular.woff b/static/katex/fonts/KaTeX_Typewriter-Regular.woff
diff --git a/static/katex/fonts/KaTeX_Typewriter-Regular.woff2 b/static/katex/fonts/KaTeX_Typewriter-Regular.woff2
diff --git a/static/katex/katex.css b/static/katex/katex.css
diff --git a/static/mermaid b/static/mermaid
@@ -0,0 +1 @@
+../node_modules/mermaid/dist
diff --git a/tests/rendering/markdown-additional.md b/tests/rendering/markdown-additional.md
@@ -25,6 +25,17 @@ digraph {
 }
 ```
 
+## Mermaid
+
+```mermaid
+flowchart LR
+
+A[Hard] -->|Text| B(Round)
+B --> C{Decision}
+C -->|One| D[Result 1]
+C -->|Two| E[Result 2]
+```
+
 ## \<kbd> tag
 
 While not a markdown syntax, this has a default style: