Skip to main content

Install Mermaid

Mermaid is a JavaScript-based tool that lets you create diagrams and flowcharts using simple text-based syntax. It's widely used for visualizing complex processes, data flows, and system architectures directly in your documentation.

This document shows how to install and configure Mermaid in your Docusaurus project.

Install Mermaid​

npm install --save @docusaurus/theme-mermaid

Configure Mermaid​

To use Mermaid in your documents, add the following configuration to your docusaurus.config.js:

docusaurus.config.js
...
const mermaid = require('mermaid')
...
const config = {
  ...
    markdown: {
      mermaid: true,
    },
    themes: ['@docusaurus/theme-mermaid'],
};

Usage example​

To see how Mermaid renders, add the following code block to your document

Example Mermaid diagram
```mermaid
graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;
```

Now you have Mermaid installed and configured, and you can start creating diagrams and flowcharts.

For details about markdown syntax, in Mermaid's official documentation, see Syntax and Configuration.