Diagrams with Mermaid

信息

Mermaid is default installed and enabled on this site.

Diagrams can be rendered using Mermaid in a code block.

Usage

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.

Mermaid Config

Options in mermaid.options will be passed directly to mermaid.initialize. You can set themes for both light and dark mode.

docusaurus.config.ts

export default {
  themeConfig: {
    mermaid: {
      theme: {light: 'neutral', dark: 'forest'},
      options: {
        maxTextSize: 50,
      },
    },
  },
};

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