Skip to main content

図

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;
```

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 dagre layout engine is supported by default in Docusaurus.
  • The elk layout engine is heavier and can be enabled by installing the optional @mermaid-js/layout-elk dependency.
```mermaid
---
config:
  layout: elk
---
graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;
```