Adding Mermaid Functionality

Installation

Install the package and then update the package.json file of the Docusaurus project.

npm install --save @docusaurus/theme-mermaid

The command npm install --save @docusaurus/theme-mermaid performs the following actions:

1. Installs the @docusaurus/theme-mermaid Package:

   • This package is a theme for Docusaurus that integrates Mermaid diagrams into your Docusaurus site.
   • Mermaid is a JavaScript-based diagramming and charting tool that allows you to create complex diagrams from simple text descriptions.

2. Adds the Package to dependencies in package.json:

   • The --save flag ensures that the @docusaurus/theme-mermaid package is added to the dependencies section of your package.json file. This is the default behavior for npm install in modern versions of npm (since npm v5), so the --save flag is technically optional.
   • This ensures that the package will be installed whenever someone runs npm install in your project directory.

Update docusaurus.config.js config file

Enable Mermaid functionality by adding plugin @docusaurus/theme-mermaid and setting markdown.mermaid to true in your docusaurus.config.js.

docusaurus.config.js

export default {
  markdown: {
    mermaid: true,
  },
  themes: ["@docusaurus/theme-mermaid"],
};

Usage

Add a code block with language mermaid:

Example Mermaid diagram

```mermaid
graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;
```

See the Mermaid syntax documentation for more information on the Mermaid syntax.