圖表

圖表可以在程式碼區塊中使用 Mermaid 繪製。

安裝

npm

npm install --save @docusaurus/theme-mermaid

Yarn

yarn add @docusaurus/theme-mermaid

pnpm

pnpm add @docusaurus/theme-mermaid

在 docusaurus.config.js 中新增外掛程式 @docusaurus/theme-mermaid，並將 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;`}
/>