本文へスキップ
バージョン: 3.5.2

図表

図表は、コードブロック内でMermaidを使用してレンダリングできます。

インストール​

npm install --save @docusaurus/theme-mermaid

プラグイン@docusaurus/theme-mermaidを追加し、docusaurus.config.jsでmarkdown.mermaidをtrueに設定して、Mermaid機能を有効にします。

docusaurus.config.js
export default {
  markdown: {
    mermaid: true,
  },
  themes: ['@docusaurus/theme-mermaid'],
};

使用方法​

言語がmermaidであるコードブロックを追加します。

Mermaid図の例
```mermaid
graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;
```

Mermaid構文の詳細については、Mermaid構文ドキュメントを参照してください。

テーマ​

図表のダークテーマとライトテーマは、docusaurus.config.jsのthemeConfigでmermaid.themeの値を設定することで変更できます。ライトモードとダークモードの両方にテーマを設定できます。

docusaurus.config.js
export default {
  themeConfig: {
    mermaid: {
      theme: {light: 'neutral', dark: 'forest'},
    },
  },
};

Mermaid図のテーマ設定の詳細については、Mermaidテーマドキュメントを参照してください。

Mermaid設定​

mermaid.optionsのオプションは、mermaid.initializeに直接渡されます。

docusaurus.config.js
export default {
  themeConfig: {
    mermaid: {
      options: {
        maxTextSize: 50,
      },
    },
  },
};

使用可能な設定オプションについては、Mermaid設定ドキュメントとMermaid設定タイプを参照してください。

動的Mermaidコンポーネント​

動的な図表を生成するには、Mermaidコンポーネントを使用できます。

動的Mermaidコンポーネントの例
import Mermaid from '@theme/Mermaid';

<Mermaid
  value={`graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;`}
/>