Diagrams

Visualize your ideas directly inside Markdown using Mermaid. Mermaid lets you create flowcharts, sequence diagrams, class diagrams, and more, using a simple text syntax.

Installation

Install the official Mermaid theme for Docusaurus:

npm install --save @docusaurus/theme-mermaid

Then enable Mermaid support by updating your docusaurus.config.js:

docusaurus.config.js

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

This configuration activates the Markdown engine to recognize mermaid code blocks.

Usage

Create a Mermaid diagram by using a fenced code block with the language set to mermaid:

Example Mermaid diagram

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

This renders as:

Check the Mermaid Syntax Reference to explore flowcharts, sequence diagrams, Gantt charts, and more.

Theming

Customize diagram colors for light and dark mode:

docusaurus.config.js

export default {
  themeConfig: {
    mermaid: {
      theme: { light: 'neutral', dark: 'forest' },
    },
  },
};

Available themes include default, forest, neutral, dark, and more. Refer to the Mermaid Theme Docs for a full list.

Mermaid Config

Pass advanced configuration directly to Mermaid:

docusaurus.config.js

export default {
  themeConfig: {
    mermaid: {
      options: {
        maxTextSize: 50,
        securityLevel: 'loose',
      },
    },
  },
};

See the Mermaid Config Reference and Type Definitions for all available options.

Dynamic Mermaid Component

For interactive or programmatically generated diagrams, you can use the Mermaid React component inside an .mdx file:

Dynamic Mermaid component

import Mermaid from '@theme/Mermaid';

<Mermaid
  value={`graph TD;
    Start-->Process;
    Process-->End;`}
/>

This is useful for rendering diagrams from data or props.

---

Layout Engines

Mermaid supports different layout engines for arranging nodes:

• dagre – default engine (no extra dependencies)
• elk – advanced layout; install with:

npm install --save @mermaid-js/layout-elk

Then specify it inside the code block frontmatter:

```mermaid
---
config:
  layout: elk
---
graph TD;
    A-->B;
    B-->C;
```