diff --git a/docs/site.json b/docs/site.json
index 57220942e7..320570f55b 100644
--- 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
new file mode 100644
index 0000000000..1f7d5a0099
--- /dev/null
+++ b/docs/userGuide/plugins/mermaid.md
@@ -0,0 +1,94 @@
+### Plugin: Mermaid
+
+This plugin allows you to utilize 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.
+
+
+
+All supported diagrams and detailed configurations are available in [the mermaid official documentation](https://mermaid-js.github.io/mermaid/).
+
+
+
+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:
+
+
+html
+
+
+pie title Pets adopted by volunteers
+ "Dogs" : 386
+ "Cats" : 85
+ "Rats" : 15
+
+
+
+
+{{ icon_example }} Flowchart:
+
+
+html
+
+
+flowchart TD
+ A[Start] --> B{Is it?}
+ B -->|Yes| C[OK]
+ C --> D[Rethink]
+ D --> B
+ B ---->|No| E[End]
+
+
+
+
+{{ icon_example }} User Journey Diagram:
+
+
+html
+
+
+journey
+ title My working day
+ section Go to work
+ Make tea: 5: Me
+ Go upstairs: 3: Me
+ Do work: 1: Me, Cat
+
+
+
+
+{{ icon_example }} Gitgraph Diagram:
+
+
+html
+
+
+gitGraph
+ commit
+ branch develop
+ checkout develop
+ commit
+ checkout main
+ merge develop
+
+
+
diff --git a/docs/userGuide/syntax/diagrams.md b/docs/userGuide/syntax/diagrams.md
index d36e8b713e..bd84e2c8ae 100644
--- 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.
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.
If both width and height are specified, width takes priority over height. It is to maintain the diagram's aspect ratio.
+
+
+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).
+
+
```
diff --git a/docs/userGuide/usingPlugins.md b/docs/userGuide/usingPlugins.md
index dc268b4f7a..789fdbe82b 100644
--- 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
+
## 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
index b624d60088..33ab7a4c5a 100644
--- 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 @@