版本：Canary 🚧

图表

图表可以在代码块中使用Mermaid来呈现。

安装

npm install --save @docusaurus/theme-mermaid

yarn add @docusaurus/theme-mermaid

pnpm add @docusaurus/theme-mermaid

通过添加插件@docusaurus/theme-mermaid并在docusaurus.config.js中设置markdown.mermaid为true来启用 Mermaid 功能。

docusaurus.config.js
module.exports = {
  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
module.exports = {
  themeConfig: {
    mermaid: {
      theme: { light: "neutral", dark: "forest" },
    },
  },
};

请参阅美人鱼主题文档了解更多关于美人鱼主题图的信息。

mermaid.options中的选项将直接传递给mermaid.initialize:

docusaurus.config.js
module.exports = {
  themeConfig: {
    mermaid: {
      options: {
        maxTextSize: 50,
      },
    },
  },
};

请参阅Mermaid 配置文档和Mermaid 配置类型以获取可用的配置选项。