Skip to main content
Version: <= 1.2.3

Tutorial

Setup mdx-mermaid in Docusaurus.

Installing​

Use your preferred package manager to install.

NPM
npm i mdx-mermaid mermaid
Yarn
yarn add mdx-mermaid mermaid
PNPM
pnpm add mdx-mermaid mermaid

Configure in Docusaurus​

Add

require('mdx-mermaid')

to remarkPlugins

docusaurus.config.js
presets: [
    [
      '@docusaurus/preset-classic',
      {
        docs: {
          remarkPlugins: [require('mdx-mermaid')],

Add a Diagram​

Add a Mermaid diagram to a .md or .mdx file.

Example Mermaid diagram
```mermaid
graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;
```

Admire your diagram​

Take the time to appreciate your diagram.