diff --git a/website/docs/guides/markdown-features/markdown-features-diagrams.mdx b/website/docs/guides/markdown-features/markdown-features-diagrams.mdx
index a4bbfa3d8d1d..b8d652c0a38c 100644
--- a/website/docs/guides/markdown-features/markdown-features-diagrams.mdx
+++ b/website/docs/guides/markdown-features/markdown-features-diagrams.mdx
@@ -83,3 +83,19 @@ export default {
 ```
 
 See the [Mermaid config documentation](https://mermaid-js.github.io/mermaid/#/./Setup?id=configuration) and the [Mermaid config types](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts) for the available config options.
+
+## Dynamic Mermaid Component {#component}
+
+To generate dynamic diagrams, you can use the `Mermaid` component:
+
+```mdx title="Example of dynamic Mermaid component"
+import Mermaid from '@theme/Mermaid';
+
+<Mermaid
+  value={`graph TD;
+    A-->B;
+    A-->C;
+    B-->D;
+    C-->D;`}
+/>
+```
diff --git a/website/versioned_docs/version-3.1.1/guides/markdown-features/markdown-features-diagrams.mdx b/website/versioned_docs/version-3.1.1/guides/markdown-features/markdown-features-diagrams.mdx
index a4bbfa3d8d1d..b8d652c0a38c 100644
--- a/website/versioned_docs/version-3.1.1/guides/markdown-features/markdown-features-diagrams.mdx
+++ b/website/versioned_docs/version-3.1.1/guides/markdown-features/markdown-features-diagrams.mdx
@@ -83,3 +83,19 @@ export default {
 ```
 
 See the [Mermaid config documentation](https://mermaid-js.github.io/mermaid/#/./Setup?id=configuration) and the [Mermaid config types](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts) for the available config options.
+
+## Dynamic Mermaid Component {#component}
+
+To generate dynamic diagrams, you can use the `Mermaid` component:
+
+```mdx title="Example of dynamic Mermaid component"
+import Mermaid from '@theme/Mermaid';
+
+<Mermaid
+  value={`graph TD;
+    A-->B;
+    A-->C;
+    B-->D;
+    C-->D;`}
+/>
+```