Skip to main content
Version: 3.7.0

图表

¥Diagrams

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

¥Diagrams can be rendered using Mermaid in a code block.

安装​

¥Installation

npm install --save @docusaurus/theme-mermaid

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

¥Enable Mermaid functionality by adding plugin @docusaurus/theme-mermaid and setting markdown.mermaid to true in your docusaurus.config.js.

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

用法​

¥Usage

添加语言 mermaid 的代码块：

¥Add a code block with language mermaid:

Example Mermaid diagram
```mermaid
graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;
```

有关 Mermaid 语法的更多信息，请参阅 Mermaid 语法文档。

¥See the Mermaid syntax documentation for more information on the Mermaid syntax.

主题化​

¥Theming

图表的深色和浅色主题可以通过在 docusaurus.config.js 中的 themeConfig 中设置 mermaid.theme 值来更改。你可以为浅色和夜间模式设置主题。

¥The diagram dark and light themes can be changed by setting mermaid.theme values in the themeConfig in your docusaurus.config.js. You can set themes for both light and dark mode.

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

有关 Mermaid 图主题的更多信息，请参阅 Mermaid 主题文档。

¥See the Mermaid theme documentation for more information on theming Mermaid diagrams.

Mermaid 配置​

¥Mermaid Config

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

¥Options in mermaid.options will be passed directly to mermaid.initialize:

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

请参阅 Mermaid 配置文档 和 Mermaid 配置类型 了解可用的配置选项。

¥See the Mermaid config documentation and the Mermaid config types for the available config options.

动态 Mermaid 组件​

¥Dynamic Mermaid Component

要生成动态图，你可以使用 Mermaid 组件：

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