mermaid Plugin for VuePress

Easy diagramming in your documentation/blog/whatever. Requires VuePress 1.x

# Installation

Install it with your package manager of choice:


$ npm install --save-dev vuepress-plugin-mermaidjs


$ yarn add -D vuepress-plugin-mermaidjs

Add it to the plugin listing of your vuepress config:

// .vuepress/config.js

module.exports = {
    // ...
    plugins: [
    // ...

# Usage


If you're looking for an easier time creating your diagrams, have a look at mermaid's live editor (opens new window)!

# Options

If you want to configure Mermaid further, options given to the plugin are passed through to Mermaid:

module.exports = {
    // ...
    plugins: [
        [ 'mermaidjs', { gantt: { barHeight: 40 }}]
    // ...

# Fenced code block syntax

The plugin provides mermaidjs diagram rendering for fenced code blocks with language name 'mermaid':

``` mermaid
Alice->John: Hello John, how are you?
loop every minute
    John-->Alice: Great!

If you really don't want to use the code block syntax this plugin also supports using a tag wrapper for mermaidjs-diagrams like so:

graph lR
Documentation--with diagrams-->_[is Awesome]

yielding: graph LR Documentation--with diagrams-->_[is Awesome]


The tag-syntax can be useful if you want to attach additional CSS-classes to a diagram, e.g. for aligning it on the page.

# Known Caveats

None currently