Diagrams
你可以在代码块中使用 Mermaid 来渲染图表。
安装流程
- npm
- Yarn
- pnpm
npm install --save @docusaurus/theme-mermaid
yarn add @docusaurus/theme-mermaid
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
的代码块:
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 配置
Options in mermaid.options
will be passed directly to mermaid.initialize
:
docusaurus.config.js
export default {
themeConfig: {
mermaid: {
options: {
maxTextSize: 50,
},
},
},
};
See the Mermaid config documentation and the Mermaid config types for the available config options.
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;`}
/>