# MermaidItMarkdown


[中文说明文档](https://gitee.com/ericfang/markdown-it-mermaid/blob/master/readme_cn.md)

A plugin that adds **Mermaid diagram support** to [markdown-it](https://github.com/markdown-it/markdown-it).

With this plugin, you can embed Mermaid code blocks directly in your Markdown files and render flowcharts, sequence diagrams, Gantt charts, and more.



📚 **[Documentation & Live Demo](https://fangjc1986.github.io/vue3-blog-vitepress/frontend-components/mermaid-it-markdown.html)**


---

## Installation

This plugin depends on the official `mermaid` library. Install both packages:

```bash
npm install mermaid-it-markdown mermaid --save
# or
yarn add mermaid-it-markdown mermaid
```

> 💡 Note: Make sure to initialize Mermaid in your application (e.g., by calling `mermaid.initialize()` after the page loads).

---

## Usage

### With markdown-it

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

md.use(mermaidItMarkdown);
```

### With mavon-editor

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

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

### Markdown Syntax Example

Use a fenced code block with the `mermaid` language tag:

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

> 🌐 For more syntax and diagram types, visit the [Mermaid Live Editor](https://mermaid.live/).

---

Turn your Markdown into visual stories — not just text, but diagrams too!  
⭐ Star the repo if you find it useful! Contributions welcome! 💡