Skip to main content

図

図は、コードブロック内の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に設定した次のようなコードブロックを追加します。

Example Mermaid diagram
```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設定型を参照してください。

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