Skip to main content
Version: Canary 🚧

Diagrams

Diagrams can be rendered using Mermaid in a code block.

Installation​

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.

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;
```
http://localhost:3000

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

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.

docusaurus.config.js
export default {
  themeConfig: {
    mermaid: {
      theme: {light: 'neutral', dark: 'forest'},
    },
  },
};

See the Mermaid theme documentation for more information on theming Mermaid diagrams.

Mermaid Config​

Options in mermaid.options will be passed directly to mermaid.initialize:

docusaurus.config.js
export default {
  themeConfig: {
    mermaid: {
      options: {
        maxTextSize: 50,
      },
    },
  },
};

See the Mermaid config documentation and the Mermaid config types for the available config options.

Dynamic Mermaid Component​

To generate dynamic diagrams, you can use the Mermaid component:

Example of dynamic Mermaid component
import Mermaid from '@theme/Mermaid';

<Mermaid
  value={`graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;`}
/>

Layouts​

Mermaid supports different layout engines:

  • The elk layout engine is bundled and used by default for supported diagram types.
  • The dagre layout engine is also bundled and can be selected explicitly.

Site-wide layout​

To use Dagre across your site, set themeConfig.mermaid.options.layout:

docusaurus.config.js
export default {
  themeConfig: {
    mermaid: {
      options: {
        layout: 'dagre',
      },
    },
  },
};

Per-diagram layout​

To use Dagre for a single diagram, set layout: dagre in its Mermaid front matter. This overrides the site-wide layout. Use layout: elk to select ELK explicitly.

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

The same diagram rendered with each layout:

ELK (default)

http://localhost:3000

Dagre

http://localhost:3000