다이어그램
Diagrams can be rendered using Mermaid in a code block.
Installation
- npm
- Yarn
- pnpm
npm install --save @docusaurus/theme-mermaid
yarn add @docusaurus/theme-mermaid
pnpm add @docusaurus/theme-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
Add a code block with language mermaid
:
Example Mermaid diagram
```mermaid
graph TD;
A-->B;
A-->C;
B-->D;
C-->D;
```
See the Mermaid syntax documentation for more information on the Mermaid syntax.
Theming
The diagram dark and light themes can be changed by setting mermaid.theme
values in the themeConfig
in your docusaurus.config.js
. 어두운 테마와 밝은 테마를 아래와 같이 설정할 수 있습니다.
docusaurus.config.js
export default {
themeConfig: {
mermaid: {
theme: {light: 'neutral', dark: 'forest'},
},
},
};
See the Mermaid theme documentation for more information on theming Mermaid diagrams.
Mermaid Config
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.