MermaidItMarkdown

中文说明文档

A plugin that adds Mermaid diagram support to 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

Installation

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

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

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

md.use(mermaidItMarkdown);

With mavon-editor

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:

```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.

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