添加mermaid支持

本文介绍如何在Markdown中添加mermaid支持，请注意，本文的基础是Docusaurus，此方法仅在Docusaurus中可用。

如何添加mermaid支持

官方文档地址：

• https://docusaurus.io/docs/api/themes/@docusaurus/theme-mermaid
• https://docusaurus.io/docs/markdown-features/diagrams

如果想要您的Markdown文章支持mermaid绘图。需要添加theme-mermaid支持。

npm install --save @docusaurus/theme-mermaid

shell

配置

docusaurus.config.ts

export default {
  themes: ['@docusaurus/theme-mermaid'],
  // In order for Mermaid code blocks in Markdown to work,
  // you also need to enable the Remark plugin with this option
  markdown: {
    mermaid: true,
  },
};

ts

效果

```mermaid
sequenceDiagram
    Alice->>John: Hello John, how are you?
    John-->>Alice: Great!
    Alice-)John: See you later!
```