Diagrams

Diagrams can be rendered using Mermaid in a code block.

Instalação

npm

npm install --save @docusaurus/theme-mermaid

Yarn

yarn add @docusaurus/theme-mermaid

pnpm

pnpm add @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

module.exports = {
  markdown: {
    mermaid: true,
  },
  themes: ['@docusaurus/theme-mermaid'],
};

Utilização

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.

Temas

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

module.exports = {
  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

module.exports = {
  themeConfig: {
    mermaid: {
      options: {
        maxTextSize: 50,
      },
    },
  },
};

See the Mermaid configuration documentation for the available config options.