Add Mermaid Plugin

docs/site.json

@@ -26,7 +26,8 @@
     "codeBlockWrapButtons",
     "web3Form",
     "codeBlockCopyButtons",
-    "dataTable"
+    "dataTable",
+    "mermaid"
   ],
   "pluginsContext" : {
     "filterTags" : {

docs/userGuide/plugins/mermaid.md

@@ -0,0 +1,112 @@
+### Plugin: Mermaid
+
+<div id="content">
+
+This plugin allows you to utilize [Mermaid](https://mermaid-js.github.io/mermaid/) 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 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.
+
+```js {heading="site.json"}
+{
+  ...
+  "plugins": [
+    "mermaid"
+  ]
+}
+```
+
+<panel header="Optional: Specify an alternative URL to load the Mermaid code">
+
+By default, the plugin loads the Mermaid code from a CDN URL. However, you can optionally specify an alternative URL to load the Mermaid code from a different source.
+
+```js {heading="site.json"}
+{
+  ...
+  "plugins": [
+    "mermaid"
+  ],
+  "pluginsContext": {
+    "mermaid": {
+      "address": "https://unpkg.com/mermaid@10/dist/mermaid.esm.min.mjs" // replace with URL of your choice
+    }
+  }
+}
+```
+
+</panel>
+
+To create a Mermaid diagram, use the `<mermaid>` tag and provide the diagram definition within the tag.
+
+{{ 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>
+
+The plugin automatically converts the `<mermaid>` tags into appropriate `<div>` elements with the necessary classes and attributes for rendering the diagrams using the Mermaid library.
+<div>

docs/userGuide/syntax/diagrams.md

@@ -1,5 +1,6 @@
 ## Diagrams
 
+### PlantUML Diagrams
 You can use the [PlantUML](http://plantuml.com/) syntax to add diagrams.
 
 <box type="warning">
@@ -159,3 +160,7 @@ bob -> bob ++ : self call
 <include src="diagrams.md#puml-examples" />
 
 </div>
+
+### Mermaid Diagrams
+
+<include src="{{ baseUrl }}/userGuide/plugins/mermaid.md#content" />

docs/userGuide/usingPlugins.md

@@ -65,6 +65,7 @@ MarkBind has a set of built-in plugins that can be used immediately without inst
 <include src="plugins/mathDelimiters.md" />
 <include src="plugins/web3Form.md" />
 <include src="plugins/dataTable.md" />
+<include src="plugins/mermaid.md" />
 
 ## Using External Plugins
 

packages/cli/test/functional/test_site/expected/bugs/index.html

@@ -279,5 +279,18 @@ <h1 id="heading-in-footer-should-not-be-indexed">Heading in footer should not be
             })
         }
     </script>
+<script type="module">
+    import mermaid from 'https://unpkg.com/mermaid@10/dist/mermaid.esm.min.mjs';
+    document.addEventListener('DOMContentLoaded', () => {
+      mermaid.initialize({});
+      Vue.directive('mermaid', {
+        inserted: function(el) {
+          mermaid.run({
+            nodes: [el]
+          });
+        }
+      });
+    });
+  </script>
 
 </html>

packages/cli/test/functional/test_site/expected/index.html

@@ -945,5 +945,18 @@ <h1 id="heading-in-footer-should-not-be-indexed">Heading in footer should not be
             })
         }
     </script>
+<script type="module">
+    import mermaid from 'https://unpkg.com/mermaid@10/dist/mermaid.esm.min.mjs';
+    document.addEventListener('DOMContentLoaded', () => {
+      mermaid.initialize({});
+      Vue.directive('mermaid', {
+        inserted: function(el) {
+          mermaid.run({
+            nodes: [el]
+          });
+        }
+      });
+    });
+  </script>
 
 </html>

packages/cli/test/functional/test_site/expected/siteData.json

@@ -468,6 +468,12 @@
         "h1-text": "\n\n\n  h1 text\n  \n"
       },
       "headingKeywords": {}
+    },
+    {
+      "src": "testMermaid.md",
+      "title": "Rendering of diagrams via mermaid-js",
+      "headings": {},
+      "headingKeywords": {}
     }
   ]
 }

packages/cli/test/functional/test_site/expected/sub_site/index.html

@@ -286,5 +286,18 @@ <h1 id="heading-in-footer-should-not-be-indexed">Heading in footer should not be
             })
         }
     </script>
+<script type="module">
+    import mermaid from 'https://unpkg.com/mermaid@10/dist/mermaid.esm.min.mjs';
+    document.addEventListener('DOMContentLoaded', () => {
+      mermaid.initialize({});
+      Vue.directive('mermaid', {
+        inserted: function(el) {
+          mermaid.run({
+            nodes: [el]
+          });
+        }
+      });
+    });
+  </script>
 
 </html>

packages/cli/test/functional/test_site/expected/sub_site/nested_sub_site/index.html

@@ -277,5 +277,18 @@ <h1 id="heading-in-footer-should-not-be-indexed">Heading in footer should not be
             })
         }
     </script>
+<script type="module">
+    import mermaid from 'https://unpkg.com/mermaid@10/dist/mermaid.esm.min.mjs';
+    document.addEventListener('DOMContentLoaded', () => {
+      mermaid.initialize({});
+      Vue.directive('mermaid', {
+        inserted: function(el) {
+          mermaid.run({
+            nodes: [el]
+          });
+        }
+      });
+    });
+  </script>
 
 </html>

packages/cli/test/functional/test_site/expected/sub_site/nested_sub_site/testNunjucksPathResolving.html

@@ -283,5 +283,18 @@ <h1 id="heading-in-footer-should-not-be-indexed">Heading in footer should not be
             })
         }
     </script>
+<script type="module">
+    import mermaid from 'https://unpkg.com/mermaid@10/dist/mermaid.esm.min.mjs';
+    document.addEventListener('DOMContentLoaded', () => {
+      mermaid.initialize({});
+      Vue.directive('mermaid', {
+        inserted: function(el) {
+          mermaid.run({
+            nodes: [el]
+          });
+        }
+      });
+    });
+  </script>
 
 </html>

packages/cli/test/functional/test_site/expected/sub_site/testNunjucksPathResolving.html

@@ -283,5 +283,18 @@ <h1 id="heading-in-footer-should-not-be-indexed">Heading in footer should not be
             })
         }
     </script>
+<script type="module">
+    import mermaid from 'https://unpkg.com/mermaid@10/dist/mermaid.esm.min.mjs';
+    document.addEventListener('DOMContentLoaded', () => {
+      mermaid.initialize({});
+      Vue.directive('mermaid', {
+        inserted: function(el) {
+          mermaid.run({
+            nodes: [el]
+          });
+        }
+      });
+    });
+  </script>
 
 </html>

packages/cli/test/functional/test_site/expected/testAltFrontMatterInvalidKeyValue.html

@@ -277,5 +277,18 @@ <h1 id="heading-in-footer-should-not-be-indexed">Heading in footer should not be
             })
         }
     </script>
+<script type="module">
+    import mermaid from 'https://unpkg.com/mermaid@10/dist/mermaid.esm.min.mjs';
+    document.addEventListener('DOMContentLoaded', () => {
+      mermaid.initialize({});
+      Vue.directive('mermaid', {
+        inserted: function(el) {
+          mermaid.run({
+            nodes: [el]
+          });
+        }
+      });
+    });
+  </script>
 
 </html>

packages/cli/test/functional/test_site/expected/testAltFrontMatterParsing.html

@@ -276,5 +276,18 @@ <h1 id="heading-in-footer-should-not-be-indexed">Heading in footer should not be
             })
         }
     </script>
+<script type="module">
+    import mermaid from 'https://unpkg.com/mermaid@10/dist/mermaid.esm.min.mjs';
+    document.addEventListener('DOMContentLoaded', () => {
+      mermaid.initialize({});
+      Vue.directive('mermaid', {
+        inserted: function(el) {
+          mermaid.run({
+            nodes: [el]
+          });
+        }
+      });
+    });
+  </script>
 
 </html>

packages/cli/test/functional/test_site/expected/testAnchorGeneration.html

@@ -345,5 +345,18 @@ <h1 id="heading-in-footer-should-not-be-indexed">Heading in footer should not be
             })
         }
     </script>
+<script type="module">
+    import mermaid from 'https://unpkg.com/mermaid@10/dist/mermaid.esm.min.mjs';
+    document.addEventListener('DOMContentLoaded', () => {
+      mermaid.initialize({});
+      Vue.directive('mermaid', {
+        inserted: function(el) {
+          mermaid.run({
+            nodes: [el]
+          });
+        }
+      });
+    });
+  </script>
 
 </html>

packages/cli/test/functional/test_site/expected/testAnnotate.html

@@ -456,5 +456,18 @@ <h1 id="heading-in-footer-should-not-be-indexed">Heading in footer should not be
             })
         }
     </script>
+<script type="module">
+    import mermaid from 'https://unpkg.com/mermaid@10/dist/mermaid.esm.min.mjs';
+    document.addEventListener('DOMContentLoaded', () => {
+      mermaid.initialize({});
+      Vue.directive('mermaid', {
+        inserted: function(el) {
+          mermaid.run({
+            nodes: [el]
+          });
+        }
+      });
+    });
+  </script>
 
 </html>

packages/cli/test/functional/test_site/expected/testAntiFOUCStyles.html

@@ -300,5 +300,18 @@ <h1 id="heading-in-footer-should-not-be-indexed">Heading in footer should not be
             })
         }
     </script>
+<script type="module">
+    import mermaid from 'https://unpkg.com/mermaid@10/dist/mermaid.esm.min.mjs';
+    document.addEventListener('DOMContentLoaded', () => {
+      mermaid.initialize({});
+      Vue.directive('mermaid', {
+        inserted: function(el) {
+          mermaid.run({
+            nodes: [el]
+          });
+        }
+      });
+    });
+  </script>
 
 </html>

packages/cli/test/functional/test_site/expected/testBootstrapIconInPage.html

@@ -115,5 +115,18 @@
             })
         }
     </script>
+<script type="module">
+    import mermaid from 'https://unpkg.com/mermaid@10/dist/mermaid.esm.min.mjs';
+    document.addEventListener('DOMContentLoaded', () => {
+      mermaid.initialize({});
+      Vue.directive('mermaid', {
+        inserted: function(el) {
+          mermaid.run({
+            nodes: [el]
+          });
+        }
+      });
+    });
+  </script>
 
 </html>