markdown-features-diagrams.mdx

id	title	description	slug
diagrams	Diagrams	Writing diagrams with Mermaid	/markdown-features/diagrams

Diagrams

Diagrams can be rendered using Mermaid in a code block.

Installation {#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.

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

Usage {#usage}

Add a code block with language mermaid:

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

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

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

Theming {#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.

module.exports = {
  themeConfig: {
    mermaid: {
      theme: {light: 'neutral', dark: 'forest'},
    },
  },
};

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

Mermaid Config {#configuration}

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

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

See the Mermaid configuration documentation for the available config options.