diff --git a/README.md b/README.md
index f629c12e..28670981 100644
--- 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
index 417cf006..f9c204d2 100644
--- 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
index 3768a728..20eaafcc 100644
--- 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
new file mode 100644
index 00000000..58690af3
--- /dev/null
+++ 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 `${token.content}`;
+ }
+ return defaultRender(tokens, idx, options, env, self);
+ };
+}
diff --git a/src/routes/static.ts b/src/routes/static.ts
index 5b2d8e9b..4f1e7ae7 100644
--- 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
index 2085421d..2c4f8df9 100644
--- 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)}";
+
${config.scripts ? `` : ''}
+
+