Skip to main content
版本：Canary 🚧

Diagrams

Diagrams can be rendered using Mermaid in a code block.

安装流程​

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'],
};

用法​

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.

高亮主题​

The diagram dark and light themes can be changed by setting mermaid.theme values in the themeConfig in your docusaurus.config.js. 你可以同时为亮色和暗色模式指定图表的主题。

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 配置​

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