1. vuepress-plugin-mermaidjs
A Vuepress plugin providing easy MermaidJS diagramming
vuepress-plugin-mermaidjs
Package: vuepress-plugin-mermaidjs
Created by: eFrane
Last modified: Mon, 23 May 2022 22:12:22 GMT
Version: 2.0.0-beta.2
License: MIT
Downloads: 3,164
Repository: https://github.com/eFrane/vuepress-plugin-mermaidjs

Install

npm install vuepress-plugin-mermaidjs
yarn add vuepress-plugin-mermaidjs

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.

Dependencies

RELATED POST

Enhancing Vue.js Development: Harnessing the Potential of Vue-Loader

Enhancing Vue.js Development: Harnessing the Potential of Vue-Loader

Simplify Data Validation in Vue.js: A Step-by-Step Guide to Using Regex

Simplify Data Validation in Vue.js: A Step-by-Step Guide to Using Regex

Troubleshooting Made Easy: Common Issues and Solutions with vue-loader Without vue-cli

Troubleshooting Made Easy: Common Issues and Solutions with vue-loader Without vue-cli

Optimizing Webpack 4 with Vue CLI 3: Disabling the Cache-Loader

Optimizing Webpack 4 with Vue CLI 3: Disabling the Cache-Loader

Step-by-Step Guide: How to Add a Function to Your Vuex Plugin

Step-by-Step Guide: How to Add a Function to Your Vuex Plugin