mermaid-it-markdown/README.md

一个markdown-it的插件，用于支持mermaid语法的渲染

# MermaidItMarkdown

一个将让 markdown-it 支持 mermaid 语法的插件

##  [说明文档与DEMO](https://fangjc1986.github.io/vue3-blog-vitepress/frontend-components/mermaid-it-markdown.html)

## 安装

本插件依赖 `mermaid` 库，所以同时需要安装 `mermaid` 库

```bash
npm install mermaid-it-markdown mermaid --save

# or

yarn add mermaid-it-markdown mermaid
```


## 使用 

- 在 markdown-it 中使用

```js
const md = require('markdown-it')()
const mermaidItMarkdown = require('mermaid-it-markdown')
md.use(mermaidItMarkdown)
```

- 在 mavon-editor 中使用

```js
import MavonEditor from 'mavon-editor'
import 'mavon-editor/dist/css/index.css'
import mermaidItMarkdown from 'mermaid-it-markdown'

const markdownIt = MavonEditor.mavonEditor.getMarkdownIt();
markdownIt.use(mermaidItMarkdown)
```

- markdown 语法

```markdown
    ```mermaid
    flowchart TD
        A[Hard] -->|Text| B(Round)
        B --> C{Decision}
        C -->|One| D[Result 1]
        C -->|Two| E[Result 2]
    ```
```

**更多语法请参考 [mermaid在线示例](https://mermaid.live/)**