Skip to content

eFrane/vuepress-plugin-mermaidjs

Repository files navigation

npm version Build Status

VuePress Plugin for mermaid.js

Use mermaid.js Diagrams in VuePress

This VuePress plugin provides a global component wrapping mermaid.js. The plugin is designed to work with VuePress v1.x.

Main documentation site is at vuepress-plugin-mermaidjs.efrane.com.

Installation

VuePress 2 Support is currently in beta testing, see below.

You can install it with

yarn add -D vuepress-plugin-mermaidjs

or

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

Then you just need to register the plugin in your .vuepress/config.js:

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

Usage

The recommended usage is to place your mermaidjs diagrams inside a fenced code block with the language 'mermaid':

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

VuePress 2 Support

You can use this plugin with the upcoming (next) release of VuePress aka VuePress 2. To do so, use version 2.0.0-beta.1 or above.

About

Vuepress plugin for mermaid.js diagrams

Topics

Resources

Stars

Watchers

Forks

Sponsor this project

 

Packages

No packages published

Contributors 9