chore: backport retro compatible commits for the Docusaurus v2.2 release (#8264)

Co-authored-by: Jan Peer Stoecklmair <jan.peer.stoecklmair@dynatrace.com> Co-authored-by: Joshua Chen <sidachen2003@gmail.com> Co-authored-by: sebastienlorber <lorber.sebastien@gmail.com> Co-authored-by: Sébastien Lorber <slorber@users.noreply.github.com> Co-authored-by: LittleboyHarry <littleboyharry@qq.com> Co-authored-by: Mikey O'Toole <mikey@homotechsual.dev> Co-authored-by: Jan Peer Stöcklmair <jan.oster94@gmail.com> Co-authored-by: Nguyễn Thành Nam <namnguyenthanh.work@gmail.com> Co-authored-by: Sanjaiyan Parthipan <parthipankalayini@gmail.com> Co-authored-by: Ramazan SANCAR <ramazansancar4545@gmail.com> Co-authored-by: mturoci <64769322+mturoci@users.noreply.github.com> Co-authored-by: Adnan Hashmi <56730784+adnanhashmi09@users.noreply.github.com> Co-authored-by: Pranav Joglekar <pranav2000joglekar@gmail.com> Co-authored-by: forgeRW <20483211+forgeRW@users.noreply.github.com> Co-authored-by: Masahiko Hara <pasora@sfc.wide.ad.jp> Co-authored-by: Johan Fagerberg <johanringmann@gmail.com> Co-authored-by: John Reilly <johnny_reilly@hotmail.com> Co-authored-by: Sam Wall <oss@samuelwall.co.uk> Co-authored-by: Jeferson S. Brito <30840709+jeferson-sb@users.noreply.github.com> Co-authored-by: evan <evanmccarthy@outlook.com> Co-authored-by: Xabier Lahuerta Vazquez <xlahuerta@protonmail.com> Co-authored-by: Forresst <forresst17@gmail.com> Co-authored-by: Shanmughapriyan S <priyanshan03@gmail.com> Co-authored-by: Alexey Pyltsyn <lex61rus@gmail.com>
2025-06-13 08:12:48 +02:00 · 2022-10-29 15:13:42 +02:00 · 2022-10-29 15:13:42 +02:00 · de972142a8
commit de972142a8
parent 7743aa6307
155 changed files with 2822 additions and 563 deletions
--- a/website/docs/guides/markdown-features/markdown-features-diagrams.mdx
+++ b/website/docs/guides/markdown-features/markdown-features-diagrams.mdx
@ -0,0 +1,85 @@
+---
+id: diagrams
+title: Diagrams
+description: Writing diagrams with Mermaid
+slug: /markdown-features/diagrams
+---
+
+# Diagrams
+
+Diagrams can be rendered using [Mermaid](https://mermaid-js.github.io/mermaid/) in a code block.
+
+## Installation {#installation}
+
+```bash npm2yarn
+npm install --save @docusaurus/theme-mermaid
+```
+
+Enable Mermaid functionality by adding plugin `@docusaurus/theme-mermaid` and setting `markdown.mermaid` to `true` in your `docusaurus.config.js`.
+
+```js title="docusaurus.config.js"
+module.exports = {
+  markdown: {
+    mermaid: true,
+  },
+  themes: ['@docusaurus/theme-mermaid'],
+};
+```
+
+## Usage {#usage}
+
+Add a code block with language `mermaid`:
+
+````md title="Example Mermaid diagram"
+```mermaid
+graph TD;
+    A-->B;
+    A-->C;
+    B-->D;
+    C-->D;
+```
+````
+
+```mermaid
+graph TD;
+    A-->B;
+    A-->C;
+    B-->D;
+    C-->D;
+```
+
+See the [Mermaid syntax documentation](https://mermaid-js.github.io/mermaid/#/./n00b-syntaxReference) for more information on the Mermaid syntax.
+
+## Theming {#theming}
+
+The diagram dark and light themes can be changed by setting `mermaid.theme` values in the `themeConfig` in your `docusaurus.config.js`. You can set themes for both light and dark mode.
+
+```js title="docusaurus.config.js"
+module.exports = {
+  themeConfig: {
+    mermaid: {
+      theme: {light: 'neutral', dark: 'forest'},
+    },
+  },
+};
+```
+
+See the [Mermaid theme documentation](https://mermaid-js.github.io/mermaid/#/theming) for more information on theming Mermaid diagrams.
+
+## Mermaid Config {#configuration}
+
+Options in `mermaid.mermaidOptions` will be passed directly to `mermaid.initialize`:
+
+```js title="docusaurus.config.js"
+module.exports = {
+  themeConfig: {
+    mermaid: {
+      mermaidOptions: {
+        maxTextSize: 50,
+      },
+    },
+  },
+};
+```
+
+See the [Mermaid configuration documentation](https://mermaid-js.github.io/mermaid/#/./Setup?id=configuration) for the available config options.