marked-mermaid-flowchart

Marked extension for rendering Mermaid flowchart diagrams as SVG.

Installation

npm install marked-mermaid-flowchart mermaid-flowchart marked

Or install from GitHub:

{
  "dependencies": {
    "marked-mermaid-flowchart": "github:iafan/marked-mermaid-flowchart",
    "mermaid-flowchart": "github:iafan/mermaid-flowchart"
  }
}

Usage

import { marked } from 'marked'
import { mermaidExtension, renderMermaidDiagrams } from 'marked-mermaid-flowchart'

// Register the extension
marked.use({ extensions: [mermaidExtension] })

// Parse markdown
const html = marked.parse(markdown)

// Insert into DOM
document.body.innerHTML = html

// Post-process to render mermaid diagrams
renderMermaidDiagrams()

How It Works

The extension intercepts code blocks marked with ```mermaid and renders them as placeholders. After the markdown is inserted into the DOM, call renderMermaidDiagrams() to convert placeholders to SVG diagrams.

Currently only flowchart diagrams are supported.

API

mermaidExtension

Marked extension object. Use with marked.use({ extensions: [mermaidExtension] }).

renderMermaidDiagrams(): void

Post-processes the DOM to convert mermaid placeholders to SVG diagrams.

Styling

See mermaid-flowchart for CSS variable documentation.

Container Classes

| Class | Description | |-------|-------------| | .mermaid-container | Container for mermaid diagrams | | .mermaid-rendered | Added after successful rendering | | .mermaid-unsupported | Wrapper for unsupported diagram types | | .mermaid-error | Wrapper when rendering fails |

License

This is free and unencumbered software released into the public domain (Unlicense).