跳到主要内容

图表

在代码块中使用 Mermaid，可以渲染图表。

安装​

npm install --save @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: '默认主题', dark: '暗色主题'},
      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;`}
/>