跳到主要内容

添加mermaid支持

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

如何添加mermaid支持

官方文档地址:

如果想要您的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!
```