Mermaid Support

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

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",

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);

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);
+    };
+}

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');

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>
     `);

static/katex

@@ -0,0 +1 @@
+../node_modules/katex/dist

static/mermaid

@@ -0,0 +1 @@
+../node_modules/mermaid/dist

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: