Skip to main content

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;
```