https://github.com/efrane/vuepress-plugin-mermaidjs

Vuepress plugin for mermaid.js diagrams
https://github.com/efrane/vuepress-plugin-mermaidjs

mermaid mermaid-diagrams plugin vuepress

Last synced: about 2 months ago
JSON representation

Vuepress plugin for mermaid.js diagrams

• Host: GitHub
• URL: https://github.com/efrane/vuepress-plugin-mermaidjs
• Owner: eFrane
• Created: 2019-10-15T12:20:56.000Z (about 5 years ago)
• Default Branch: main
• Last Pushed: 2023-03-03T03:57:37.000Z (almost 2 years ago)
• Last Synced: 2024-11-05T01:51:24.324Z (about 2 months ago)
• Topics: mermaid, mermaid-diagrams, plugin, vuepress
• Language: JavaScript
• Homepage: https://vuepress-plugin-mermaidjs.efrane.com
• Size: 1.09 MB
• Stars: 74
• Watchers: 4
• Forks: 21
• Open Issues: 18
• Metadata Files:
  • Readme: README.md
  • Changelog: Changelog.md

Awesome Lists containing this project

README

        
[![npm version](https://badge.fury.io/js/vuepress-plugin-mermaidjs.svg)](https://badge.fury.io/js/vuepress-plugin-mermaidjs)

[![Build Status](https://travis-ci.com/eFrane/vuepress-plugin-mermaidjs.svg?branch=master)](https://travis-ci.com/eFrane/vuepress-plugin-mermaidjs)

# VuePress Plugin for mermaid.js

> Use mermaid.js Diagrams in VuePress

This [VuePress][1] plugin provides a global component wrapping [mermaid.js][2].

The plugin is designed to work with VuePress v1.x.

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

## Installation

**VuePress 2 Support is currently in beta testing, see [below](#vuepress-2-support).**

You can install it with

``` shell

yarn add -D vuepress-plugin-mermaidjs

```

or

``` shell

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

```

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

``` 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. 

[1]: https://vuepress.vuejs.org

[2]: https://mermaidjs.github.io

[3]: https://vuepress-plugin-mermaidjs.efrane.com