메인 컨텐츠로 이동
버전: 불안정 🚧

다이어그램

코드 블록 내에서 Mermaid를 사용해 다이어그램을 작성할 수 있습니다.

설치​

npm install --save @docusaurus/theme-mermaid

@docusaurus/theme-mermaid 플러그인을 추가하고 docusaurus.config.js에서 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 syntax documentation을 참고하세요.

테마​

다어이그램에 어두운 테마와 밝은 테마를 적용하려면 docusaurus.config.js의 themeConfig 내에서 mermaid.theme 값을 설정해 변경할 수 있습니다. 어두운 테마와 밝은 테마를 아래와 같이 설정할 수 있습니다.

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

Mermaid 다이어그램에 테마를 적용하는 방법과 관련된 좀 더 자세한 내용은 Mermaid syntax documentation을 참고하세요.

Mermaid 구성 옵션​

mermaid.options에서 설정한 옵션값은 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;`}
/>

Layouts​

Mermaid supports different layout engines:

  • The dagre layout engine is supported by default in Docusaurus.
  • The elk layout engine is heavier and can be enabled by installing the optional @mermaid-js/layout-elk dependency.
```mermaid
---
config:
  layout: elk
---
graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;
```