Introduce built-in opt-in Mermaid feature (diagrams/charts)

webpro · webpro · commit 4452607272c1 · 2024-02-03T10:58:14.000+01:00
diff --git a/demo-mermaid/mermaid.md b/demo-mermaid/mermaid.md
@@ -0,0 +1,33 @@
+---
+mermaid:
+  themeVariables:
+    lineColor: '#fff'
+---
+
+Foo
+
+```mermaid
+graph TD
+A[Client] --> B[Load Balancer]
+B --> C[Server01]
+B --> D[Server02]
+```
+
+```js
+const x = 1;
+```
+
+---
+
+Bar
+
+```mermaid
+graph TD
+A[Client] --> B[LB]
+B --> C[Server01]
+B --> D[Server02]
+```
+
+```js
+const x = 2;
+```
diff --git a/demo-mermaid/reveal-md.json b/demo-mermaid/reveal-md.json
@@ -0,0 +1,8 @@
+{
+  "mermaid": {
+    "theme": "base",
+    "themeVariables": {
+      "primaryColor": "#0f0"
+    }
+  }
+}
diff --git a/lib/config.js b/lib/config.js
@@ -14,6 +14,7 @@ const __dirname = path.dirname(url.fileURLToPath(import.meta.url));
 
 export const defaults = loadJSON(path.join(__dirname, 'defaults.json'));
 export const revealBasePath = path.join(require.resolve('reveal.js'), '..', '..');
+export const mermaidBasePath = path.join(require.resolve('mermaid'), '..', '..');
 export const highlightThemePath = path.resolve(require.resolve('highlight.js'), '..', '..', 'styles');
 
 const localConfig = tryReadJson5Configs(
@@ -66,7 +67,7 @@ export const getFilesGlob = () => mergedConfig.glob;
 export const getOptions = () => mergedConfig;
 
 export const getSlideOptions = options => {
-  return _.defaults({}, cliConfig, options, localConfig, defaults);
+  return _.defaultsDeep({}, cliConfig, options, localConfig, defaults);
 };
 
 export const getRevealOptions = options => {
diff --git a/lib/defaults.json b/lib/defaults.json
@@ -14,5 +14,6 @@
   "theme": "black",
   "title": "reveal-md",
   "verticalSeparator": "\r?\n----\r?\n",
-  "glob": "**/*.md"
+  "glob": "**/*.md",
+  "mermaid": null
 }
diff --git a/lib/render.js b/lib/render.js
@@ -69,6 +69,7 @@ export const render = async (fullMarkdown, extraOptions = {}) => {
     scriptPaths,
     cssPaths,
     revealOptionsStr: JSON.stringify(revealOptions),
+    mermaidOptionsStr: JSON.stringify(options.mermaid),
     watch: getWatch()
   });
   const markup = Mustache.render(template, context);
diff --git a/lib/server.js b/lib/server.js
@@ -13,6 +13,7 @@ import {
   getWatch,
   getFaviconPath,
   revealBasePath,
+  mermaidBasePath,
   highlightThemePath
 } from './config.js';
 
@@ -32,10 +33,11 @@ export default async () => {
   const faviconPath = await getFaviconPath();
   app.use(favicon(faviconPath));
 
-  ['plugin', 'dist'].forEach(dir => {
-    app.use('/' + dir, staticDir(path.join(revealBasePath, dir)));
-    console.log(`Serving reveal.js ${dir} from ${revealBasePath}`);
-  });
+  app.use('/plugin', staticDir(path.join(revealBasePath, 'plugin')));
+  app.use('/dist', staticDir(path.join(revealBasePath, 'dist')));
+  console.log(`Serving reveal.js from ${revealBasePath}`);
+
+  app.use('/mermaid', staticDir(path.join(mermaidBasePath)));
 
   app.use('/css/highlight', staticDir(highlightThemePath));
 
diff --git a/lib/template/reveal.html b/lib/template/reveal.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="utf-8" />
@@ -19,9 +19,7 @@
 
     {{#cssPaths}}
     <link rel="stylesheet" href="{{{.}}}" />
-    {{/cssPaths}}
-
-    {{#watch}}
+    {{/cssPaths}} {{#watch}}
 
     <script>
       document.write(
@@ -46,6 +44,10 @@
 
     <script src="{{{base}}}/dist/reveal.js"></script>
 
+    {{#mermaidOptionsStr}}
+    <script src="{{{base}}}/mermaid/dist/mermaid.min.js"></script>
+    {{/mermaidOptionsStr}}
+
     <script src="{{{base}}}/plugin/markdown/markdown.js"></script>
     <script src="{{{base}}}/plugin/highlight/highlight.js"></script>
     <script src="{{{base}}}/plugin/zoom/zoom.js"></script>
@@ -73,6 +75,9 @@
         center: true,
         transition: 'default', // none/fade/slide/convex/concave/zoom
         slideNumber: true,
+        highlight: {
+          highlightOnLoad: false
+        },
         plugins: [
           RevealMarkdown,
           RevealHighlight,
@@ -94,6 +99,18 @@
 
     <script>
       Reveal.initialize(options);
+      // var mermaidOptions = extend({ startOnLoad: true }, {{{revealOptionsStr}}}, queryOptions);
+      Reveal.addEventListener('ready', function (event) {
+        const blocks = Reveal.getRevealElement().querySelectorAll('pre code:not(.mermaid)');
+        const hlp = Reveal.getPlugin('highlight');
+        blocks.forEach(hlp.highlightBlock);
+      });
+    </script>
+
+    {{#mermaidOptionsStr}}
+    <script>
+      mermaid.initialize({{{mermaidOptionsStr}}});
     </script>
+    {{/mermaidOptionsStr}}
   </body>
 </html>
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
diff --git a/test/render.spec.js b/test/render.spec.js

Original file line number	Diff line number	Diff line change
`@@ -14,5 +14,6 @@`
`14`	`14`	`"theme": "black",`
`15`	`15`	`"title": "reveal-md",`
`16`	`16`	`"verticalSeparator": "\r?\n----\r?\n",`
`17`		`- "glob": "*/.md"`
	`17`	`+ "glob": "*/.md",`
	`18`	`+ "mermaid": null`
`18`	`19`	`}`