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'
    ]
    // ...
}

TIP

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

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

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

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:

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.

None currently