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:

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

yarn:

$ yarn add -D vuepress-plugin-mermaidjs

Add it to the plugin listing of your vuepress config:

// .vuepress/config.js

module.exports = {
    // ...
    plugins: [
        'mermaidjs'
    ]
    // ...
}

# Usage

TIP

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

# Fenced code block syntax

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

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

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:

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

yielding:

undefined

TIP

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

  • Hot-Reloading does not work all-to-well with the rendering engine. If you have any ideas, please open a Pull Request!
  • Some VuePress configurations don't seem to work well with a minified version of mermaid, there is an issue for ideas.