MarkBind · tlylt · Dec 10, 2022 · Dec 10, 2022 · Dec 13, 2022 · Dec 13, 2022
diff --git a/docs/site.json b/docs/site.json
@@ -23,7 +23,8 @@
   ],
   "plugins" : [
     "filterTags",
-    "mathDelimiters"
+    "mathDelimiters",
+    "mermaid"
   ],
   "pluginsContext" : {
     "filterTags" : {

diff --git a/docs/userGuide/plugins/mermaid.md b/docs/userGuide/plugins/mermaid.md
@@ -0,0 +1,94 @@
+### Plugin: Mermaid 
+
+This plugin allows you to utilize <tooltip content="Mermaid lets you create diagrams and visualizations using text and code">Mermaid</tooltip> by automatically importing the library and initializing the rendering of the diagrams.
+
+> Mermaid is a JavaScript based diagramming and charting tool that renders Markdown-inspired text definitions to create and modify diagrams dynamically.
+
+<box type="info">
+
+All supported diagrams and detailed configurations are available in [the mermaid official documentation](https://mermaid-js.github.io/mermaid/).
+
+</box>
+
+To enable this plugin, add `mermaid` to your site's plugins. Optionally, you can specify alternative URL (e.g. to use another CDN or another version) or 
+any custom configurations in the plugin context.
+
+```js {heading="site.json"}
+{
+  ...
+  "plugins": [
+    "mermaid"
+  ],
+  "pluginsContext" : {
+    "mermaid" : { // can be omitted if no changes to the following default settings are required
+      "address": "https://unpkg.com/mermaid@9/dist/mermaid.esm.min.mjs", // replace with URL of your choice
+      "config": {
+        "startOnLoad": "true", // add or modify mermaid configurations
+      }
+    }
+  },
+}
+```
+
+{{ icon_example }} Pie Chart:
+
+<include src="codeAndOutput.md" boilerplate >
+<variable name="highlightStyle">html</variable>
+<variable name="code">
+<mermaid>
+pie title Pets adopted by volunteers
+    "Dogs" : 386
+    "Cats" : 85
+    "Rats" : 15
+</mermaid>
+</variable>
+</include>
+
+{{ icon_example }} Flowchart:
+
+<include src="codeAndOutput.md" boilerplate >
+<variable name="highlightStyle">html</variable>
+<variable name="code">
+<mermaid>
+flowchart TD
+    A[Start] --> B{Is it?}
+    B -->|Yes| C[OK]
+    C --> D[Rethink]
+    D --> B
+    B ---->|No| E[End]
+</mermaid>
+</variable>
+</include>
+
+{{ icon_example }} User Journey Diagram:
+
+<include src="codeAndOutput.md" boilerplate >
+<variable name="highlightStyle">html</variable>
+<variable name="code">
+<mermaid>
+journey
+    title My working day
+    section Go to work
+      Make tea: 5: Me
+      Go upstairs: 3: Me
+      Do work: 1: Me, Cat
+</mermaid>
+</variable>
+</include>
+
+{{ icon_example }} Gitgraph Diagram:
+
+<include src="codeAndOutput.md" boilerplate >
+<variable name="highlightStyle">html</variable>
+<variable name="code">
+<mermaid>
+gitGraph
+    commit
+    branch develop
+    checkout develop
+    commit
+    checkout main
+    merge develop
+</mermaid>
+</variable>
+</include>
diff --git a/docs/userGuide/syntax/diagrams.md b/docs/userGuide/syntax/diagrams.md
@@ -147,6 +147,11 @@ name | `string` | The name of the output file.
 src | `string` | The URL of the diagram if your diagram is in another `.puml` file.<br>The URL can be specified as absolute or relative references. More info in: _[Intra-Site Links]({{baseUrl}}/userGuide/formattingContents.html#intraSiteLinks)_
 width | `string` | The width of the diagram in pixels.<br>If both width and height are specified, width takes priority over height. It is to maintain the diagram's aspect ratio.
 
+<box type="tip">
+
+It's also possible to utilize JavaScript diagram libraries such as [Mermaid](https://mermaid-js.github.io/mermaid/) via the [Mermaid plugin](../usingPlugins.html#plugin-mermaid).
+</box>
+
 <div id="short" class="d-none">
 
 ```

diff --git a/docs/userGuide/usingPlugins.md b/docs/userGuide/usingPlugins.md
@@ -63,6 +63,7 @@ MarkBind has a set of built-in plugins that can be used immediately without inst
 <include src="plugins/googleAnalytics.md" />
 <include src="plugins/disqus.md" />
 <include src="plugins/mathDelimiters.md" />
+<include src="plugins/mermaid.md" />
 
 ## Using External Plugins
 

diff --git a/packages/cli/test/functional/test_site/expected/bugs/index.html b/packages/cli/test/functional/test_site/expected/bugs/index.html
@@ -247,5 +247,9 @@ <h1 id="heading-in-footer-should-not-be-indexed"><span id="heading-in-footer-sho
 
       gtag('config', 'TRACKING-ID');
     </script>
+<script type="module">
+import mermaid from 'https://unpkg.com/mermaid@9/dist/mermaid.esm.min.mjs';
+mermaid.initialize({"startOnLoad":true,"theme":"forest"});
+</script>
 
 </html>
diff --git a/packages/cli/test/functional/test_site/expected/index.html b/packages/cli/test/functional/test_site/expected/index.html
@@ -820,5 +820,9 @@ <h1 id="heading-in-footer-should-not-be-indexed"><span id="heading-in-footer-sho
 
       gtag('config', 'TRACKING-ID');
     </script>
+<script type="module">
+import mermaid from 'https://unpkg.com/mermaid@9/dist/mermaid.esm.min.mjs';
+mermaid.initialize({"startOnLoad":true,"theme":"forest"});
+</script>
 
 </html>
diff --git a/packages/cli/test/functional/test_site/expected/siteData.json b/packages/cli/test/functional/test_site/expected/siteData.json
@@ -353,6 +353,12 @@
       "title": "page nav with title added",
       "headings": {},
       "headingKeywords": {}
+    },
+    {
+      "src": "testMermaid.md",
+      "title": "Rendering of diagrams via mermaid-js",
+      "headings": {},
+      "headingKeywords": {}
     }
   ]
 }
diff --git a/packages/cli/test/functional/test_site/expected/sub_site/index.html b/packages/cli/test/functional/test_site/expected/sub_site/index.html
@@ -255,5 +255,9 @@ <h1 id="heading-in-footer-should-not-be-indexed"><span id="heading-in-footer-sho
 
       gtag('config', 'TRACKING-ID');
     </script>
+<script type="module">
+import mermaid from 'https://unpkg.com/mermaid@9/dist/mermaid.esm.min.mjs';
+mermaid.initialize({"startOnLoad":true,"theme":"forest"});
+</script>
 
 </html>
diff --git a/packages/cli/test/functional/test_site/expected/sub_site/nested_sub_site/index.html b/packages/cli/test/functional/test_site/expected/sub_site/nested_sub_site/index.html
@@ -246,5 +246,9 @@ <h1 id="heading-in-footer-should-not-be-indexed"><span id="heading-in-footer-sho
 
       gtag('config', 'TRACKING-ID');
     </script>
+<script type="module">
+import mermaid from 'https://unpkg.com/mermaid@9/dist/mermaid.esm.min.mjs';
+mermaid.initialize({"startOnLoad":true,"theme":"forest"});
+</script>
 
 </html>
diff --git a/...est/functional/test_site/expected/sub_site/nested_sub_site/testNunjucksPathResolving.html b/...est/functional/test_site/expected/sub_site/nested_sub_site/testNunjucksPathResolving.html
@@ -251,5 +251,9 @@ <h1 id="heading-in-footer-should-not-be-indexed"><span id="heading-in-footer-sho
 
       gtag('config', 'TRACKING-ID');
     </script>
+<script type="module">
+import mermaid from 'https://unpkg.com/mermaid@9/dist/mermaid.esm.min.mjs';
+mermaid.initialize({"startOnLoad":true,"theme":"forest"});
+</script>
 
 </html>
diff --git a/packages/cli/test/functional/test_site/expected/sub_site/testNunjucksPathResolving.html b/packages/cli/test/functional/test_site/expected/sub_site/testNunjucksPathResolving.html
@@ -251,5 +251,9 @@ <h1 id="heading-in-footer-should-not-be-indexed"><span id="heading-in-footer-sho
 
       gtag('config', 'TRACKING-ID');
     </script>
+<script type="module">
+import mermaid from 'https://unpkg.com/mermaid@9/dist/mermaid.esm.min.mjs';
+mermaid.initialize({"startOnLoad":true,"theme":"forest"});
+</script>
 
 </html>
diff --git a/packages/cli/test/functional/test_site/expected/testAnchorGeneration.html b/packages/cli/test/functional/test_site/expected/testAnchorGeneration.html
@@ -313,5 +313,9 @@ <h1 id="heading-in-footer-should-not-be-indexed"><span id="heading-in-footer-sho
 
       gtag('config', 'TRACKING-ID');
     </script>
+<script type="module">
+import mermaid from 'https://unpkg.com/mermaid@9/dist/mermaid.esm.min.mjs';
+mermaid.initialize({"startOnLoad":true,"theme":"forest"});
+</script>
 
 </html>
diff --git a/packages/cli/test/functional/test_site/expected/testAnnotate.html b/packages/cli/test/functional/test_site/expected/testAnnotate.html
@@ -300,5 +300,9 @@ <h1 id="heading-in-footer-should-not-be-indexed"><span id="heading-in-footer-sho
 
       gtag('config', 'TRACKING-ID');
     </script>
+<script type="module">
+import mermaid from 'https://unpkg.com/mermaid@9/dist/mermaid.esm.min.mjs';
+mermaid.initialize({"startOnLoad":true,"theme":"forest"});
+</script>
 
 </html>
diff --git a/packages/cli/test/functional/test_site/expected/testAntiFOUCStyles.html b/packages/cli/test/functional/test_site/expected/testAntiFOUCStyles.html
@@ -268,5 +268,9 @@ <h1 id="heading-in-footer-should-not-be-indexed"><span id="heading-in-footer-sho
 
       gtag('config', 'TRACKING-ID');
     </script>
+<script type="module">
+import mermaid from 'https://unpkg.com/mermaid@9/dist/mermaid.esm.min.mjs';
+mermaid.initialize({"startOnLoad":true,"theme":"forest"});
+</script>
 
 </html>
diff --git a/packages/cli/test/functional/test_site/expected/testCenterText.html b/packages/cli/test/functional/test_site/expected/testCenterText.html
@@ -244,5 +244,9 @@ <h1 id="heading-in-footer-should-not-be-indexed"><span id="heading-in-footer-sho
 
       gtag('config', 'TRACKING-ID');
     </script>
+<script type="module">
+import mermaid from 'https://unpkg.com/mermaid@9/dist/mermaid.esm.min.mjs';
+mermaid.initialize({"startOnLoad":true,"theme":"forest"});
+</script>
 
 </html>
diff --git a/packages/cli/test/functional/test_site/expected/testCodeBlocks.html b/packages/cli/test/functional/test_site/expected/testCodeBlocks.html
@@ -436,5 +436,9 @@ <h1 id="heading-in-footer-should-not-be-indexed"><span id="heading-in-footer-sho
 
       gtag('config', 'TRACKING-ID');
     </script>
+<script type="module">
+import mermaid from 'https://unpkg.com/mermaid@9/dist/mermaid.esm.min.mjs';
+mermaid.initialize({"startOnLoad":true,"theme":"forest"});
+</script>
 
 </html>
diff --git a/packages/cli/test/functional/test_site/expected/testDates.html b/packages/cli/test/functional/test_site/expected/testDates.html
@@ -250,5 +250,9 @@ <h1 id="heading-in-footer-should-not-be-indexed"><span id="heading-in-footer-sho
 
       gtag('config', 'TRACKING-ID');
     </script>
+<script type="module">
+import mermaid from 'https://unpkg.com/mermaid@9/dist/mermaid.esm.min.mjs';
+mermaid.initialize({"startOnLoad":true,"theme":"forest"});
+</script>
 
 </html>
diff --git a/packages/cli/test/functional/test_site/expected/testEmptyFrontmatter.html b/packages/cli/test/functional/test_site/expected/testEmptyFrontmatter.html
@@ -251,5 +251,9 @@ <h1 id="heading-in-footer-should-not-be-indexed"><span id="heading-in-footer-sho
 
       gtag('config', 'TRACKING-ID');
     </script>
+<script type="module">
+import mermaid from 'https://unpkg.com/mermaid@9/dist/mermaid.esm.min.mjs';
+mermaid.initialize({"startOnLoad":true,"theme":"forest"});
+</script>
 
 </html>
diff --git a/packages/cli/test/functional/test_site/expected/testExternalScripts.html b/packages/cli/test/functional/test_site/expected/testExternalScripts.html
@@ -255,5 +255,9 @@ <h1 id="heading-in-footer-should-not-be-indexed"><span id="heading-in-footer-sho
 
       gtag('config', 'TRACKING-ID');
     </script>
+<script type="module">
+import mermaid from 'https://unpkg.com/mermaid@9/dist/mermaid.esm.min.mjs';
+mermaid.initialize({"startOnLoad":true,"theme":"forest"});
+</script>
 
 </html>
diff --git a/packages/cli/test/functional/test_site/expected/testHr.html b/packages/cli/test/functional/test_site/expected/testHr.html
@@ -253,5 +253,9 @@ <h1 id="heading-in-footer-should-not-be-indexed"><span id="heading-in-footer-sho
 
       gtag('config', 'TRACKING-ID');
     </script>
+<script type="module">
+import mermaid from 'https://unpkg.com/mermaid@9/dist/mermaid.esm.min.mjs';
+mermaid.initialize({"startOnLoad":true,"theme":"forest"});
+</script>
 
 </html>
diff --git a/packages/cli/test/functional/test_site/expected/testImages.html b/packages/cli/test/functional/test_site/expected/testImages.html
@@ -251,5 +251,9 @@ <h1 id="heading-in-footer-should-not-be-indexed"><span id="heading-in-footer-sho
 
       gtag('config', 'TRACKING-ID');
     </script>
+<script type="module">
+import mermaid from 'https://unpkg.com/mermaid@9/dist/mermaid.esm.min.mjs';
+mermaid.initialize({"startOnLoad":true,"theme":"forest"});
+</script>
 
 </html>
diff --git a/packages/cli/test/functional/test_site/expected/testIncludeBoilerplate.html b/packages/cli/test/functional/test_site/expected/testIncludeBoilerplate.html
@@ -335,5 +335,9 @@ <h1 id="heading-in-footer-should-not-be-indexed"><span id="heading-in-footer-sho
 
       gtag('config', 'TRACKING-ID');
     </script>
+<script type="module">
+import mermaid from 'https://unpkg.com/mermaid@9/dist/mermaid.esm.min.mjs';
+mermaid.initialize({"startOnLoad":true,"theme":"forest"});
+</script>
 
 </html>
diff --git a/packages/cli/test/functional/test_site/expected/testIncludeMultipleModals.html b/packages/cli/test/functional/test_site/expected/testIncludeMultipleModals.html
@@ -250,5 +250,9 @@ <h1 id="heading-in-footer-should-not-be-indexed"><span id="heading-in-footer-sho
 
       gtag('config', 'TRACKING-ID');
     </script>
+<script type="module">
+import mermaid from 'https://unpkg.com/mermaid@9/dist/mermaid.esm.min.mjs';
+mermaid.initialize({"startOnLoad":true,"theme":"forest"});
+</script>
 
 </html>
diff --git a/packages/cli/test/functional/test_site/expected/testIncludePluginsRendered.html b/packages/cli/test/functional/test_site/expected/testIncludePluginsRendered.html
@@ -245,5 +245,9 @@ <h1 id="heading-in-footer-should-not-be-indexed"><span id="heading-in-footer-sho
 
       gtag('config', 'TRACKING-ID');
     </script>
+<script type="module">
+import mermaid from 'https://unpkg.com/mermaid@9/dist/mermaid.esm.min.mjs';
+mermaid.initialize({"startOnLoad":true,"theme":"forest"});
+</script>
 
 </html>
diff --git a/packages/cli/test/functional/test_site/expected/testLayouts.html b/packages/cli/test/functional/test_site/expected/testLayouts.html
@@ -251,5 +251,9 @@ <h1 id="heading-in-footer-should-not-be-indexed"><span id="heading-in-footer-sho
 
       gtag('config', 'TRACKING-ID');
     </script>
+<script type="module">
+import mermaid from 'https://unpkg.com/mermaid@9/dist/mermaid.esm.min.mjs';
+mermaid.initialize({"startOnLoad":true,"theme":"forest"});
+</script>
 
 </html>
diff --git a/packages/cli/test/functional/test_site/expected/testLayoutsOverride.html b/packages/cli/test/functional/test_site/expected/testLayoutsOverride.html
@@ -251,5 +251,9 @@ <h1 id="heading-in-footer-should-not-be-indexed"><span id="heading-in-footer-sho
 
       gtag('config', 'TRACKING-ID');
     </script>
+<script type="module">
+import mermaid from 'https://unpkg.com/mermaid@9/dist/mermaid.esm.min.mjs';
+mermaid.initialize({"startOnLoad":true,"theme":"forest"});
+</script>
 
 </html>
diff --git a/packages/cli/test/functional/test_site/expected/testLinks.html b/packages/cli/test/functional/test_site/expected/testLinks.html
@@ -254,5 +254,9 @@ <h1 id="heading-in-footer-should-not-be-indexed"><span id="heading-in-footer-sho
 
       gtag('config', 'TRACKING-ID');
     </script>
+<script type="module">
+import mermaid from 'https://unpkg.com/mermaid@9/dist/mermaid.esm.min.mjs';
+mermaid.initialize({"startOnLoad":true,"theme":"forest"});
+</script>
 
 </html>
diff --git a/packages/cli/test/functional/test_site/expected/testMath.html b/packages/cli/test/functional/test_site/expected/testMath.html
@@ -510,5 +510,9 @@ <h1 id="heading-in-footer-should-not-be-indexed"><span id="heading-in-footer-sho
 
       gtag('config', 'TRACKING-ID');
     </script>
+<script type="module">
+import mermaid from 'https://unpkg.com/mermaid@9/dist/mermaid.esm.min.mjs';
+mermaid.initialize({"startOnLoad":true,"theme":"forest"});
+</script>
 
 </html>