# markdown-it-mermaid

**Repository Path**: ericfang/markdown-it-mermaid

## Basic Information

- **Project Name**: markdown-it-mermaid
- **Description**: 一个将让 markdown-it 支持 mermaid 语法的插件
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2024-01-24
- **Last Updated**: 2025-12-03

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# MermaidItMarkdown

一个为 [markdown-it](https://github.com/markdown-it/markdown-it) 提供 **Mermaid 图表支持** 的插件。

通过本插件，你可以在 Markdown 中直接使用 ```mermaid 代码块，渲染出流程图、时序图、甘特图等丰富的可视化图表。

📚 **[查看说明文档与在线 Demo](https://fangjc1986.github.io/vue3-blog-vitepress/frontend-components/mermaid-it-markdown.html)**

---

## 安装

本插件依赖官方的 `mermaid` 库，请一并安装：

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

> 💡 注意：确保你的项目中已正确引入并初始化 `mermaid`（例如在页面加载后调用 `mermaid.initialize()`）。

---

## 使用方式

### 在 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.getMarkdownIt();
markdownIt.use(mermaidItMarkdown);
```

### Markdown 语法示例

在你的 Markdown 文件中，使用如下语法即可嵌入 Mermaid 图表：

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

> 🌐 更多 Mermaid 语法与图表类型，请参考 [Mermaid 官方在线编辑器](https://mermaid.live/)。

---

让 Markdown 不仅能写文字，还能“画”出逻辑！欢迎 Star ⭐ 和贡献 💡！