Add Mermaid Plugin

docs/site.json

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

docs/userGuide/plugins/mermaid.md

@@ -0,0 +1,96 @@
+### Plugin: Mermaid
+
+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 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 an alternative URL to load the Mermaid code in the plugin context.
+
+```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
+    }
+  }
+}
+```
+
+If no `address` is specified in the plugin context, the default CDN address (`https://unpkg.com/mermaid@10/dist/mermaid.esm.min.mjs`) will be used.
+
+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.

docs/userGuide/syntax/diagrams.md

@@ -142,6 +142,11 @@ name   | `string` | The name of the output file.<br>Avoid using the same name fo
 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">
 
 ```

docs/userGuide/usingPlugins.md

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

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

@@ -279,5 +279,17 @@ <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', () => {
+      Vue.directive('mermaid', {
+        inserted: function(el) {
+          mermaid.run({
+            nodes: [el]
+          });
+        }
+      });
+    });
+  </script>
 
 </html>

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

@@ -934,5 +934,17 @@ <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', () => {
+      Vue.directive('mermaid', {
+        inserted: function(el) {
+          mermaid.run({
+            nodes: [el]
+          });
+        }
+      });
+    });
+  </script>
 
 </html>

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

@@ -462,6 +462,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,17 @@ <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', () => {
+      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,17 @@ <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', () => {
+      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,17 @@ <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', () => {
+      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,17 @@ <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', () => {
+      Vue.directive('mermaid', {
+        inserted: function(el) {
+          mermaid.run({
+            nodes: [el]
+          });
+        }
+      });
+    });
+  </script>
 
 </html>

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

@@ -277,5 +277,17 @@ <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', () => {
+      Vue.directive('mermaid', {
+        inserted: function(el) {
+          mermaid.run({
+            nodes: [el]
+          });
+        }
+      });
+    });
+  </script>
 
 </html>

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

@@ -276,5 +276,17 @@ <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', () => {
+      Vue.directive('mermaid', {
+        inserted: function(el) {
+          mermaid.run({
+            nodes: [el]
+          });
+        }
+      });
+    });
+  </script>
 
 </html>

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

@@ -345,5 +345,17 @@ <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', () => {
+      Vue.directive('mermaid', {
+        inserted: function(el) {
+          mermaid.run({
+            nodes: [el]
+          });
+        }
+      });
+    });
+  </script>
 
 </html>

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

@@ -456,5 +456,17 @@ <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', () => {
+      Vue.directive('mermaid', {
+        inserted: function(el) {
+          mermaid.run({
+            nodes: [el]
+          });
+        }
+      });
+    });
+  </script>
 
 </html>

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

@@ -300,5 +300,17 @@ <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', () => {
+      Vue.directive('mermaid', {
+        inserted: function(el) {
+          mermaid.run({
+            nodes: [el]
+          });
+        }
+      });
+    });
+  </script>
 
 </html>

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

@@ -276,5 +276,17 @@ <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', () => {
+      Vue.directive('mermaid', {
+        inserted: function(el) {
+          mermaid.run({
+            nodes: [el]
+          });
+        }
+      });
+    });
+  </script>
 
 </html>

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

@@ -499,5 +499,17 @@ <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', () => {
+      Vue.directive('mermaid', {
+        inserted: function(el) {
+          mermaid.run({
+            nodes: [el]
+          });
+        }
+      });
+    });
+  </script>
 
 </html>