efrane / vuepress-plugin-mermaidjs

Vuepress plugin for mermaid.js diagrams

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.

vuepress-plugin-mermaidjs's Issues

Missing dependencies

Hi,

i'm using vuepress version vuepress/1.3.1 darwin-x64 node-v12.14.1 with vuepress-plugin-mermaidjs ^1.5.1.

However i get many compilation errors like:

error vuepress-plugin-mermaidjs apply chainMarkdown failed.
Error: Cannot find module '@vuepress/shared-utils'
Require stack:
- /Users/blabla/node_modules/vuepress-plugin-mermaidjs/src/markdownItPlugin.js
- /Users/blabla/node_modules/vuepress-plugin-mermaidjs/src/index.js
- /Users/blabla/.nvm/versions/node/v12.14.1/lib/node_modules/vuepress/node_modules/@vuepress/shared-utils/lib/moduleLoader.js
- /Users/blabla/.nvm/versions/node/v12.14.1/lib/node_modules/vuepress/node_modules/@vuepress/shared-utils/lib/index.js

I couldn't help myself but add the missing dependencies myself in package.json:

"devDependencies": {
    "@vue/component-compiler-utils": "^3.1.2",
    "@vuepress/shared-utils": "^1.4.1",
    "lru-cache": "^5.1.1",
    "markdown-it-emoji": "^1.4.0",
    "toml": "^3.0.0",
    "vuepress-plugin-mermaidjs": "^1.5.1"
  },

Why did i have to do this, is anything here unsupported or weird about my setup?

Anyways thanks for the amazing plugin, saves me a lot of time and makes maintaining docs easy.

EDIT I'm using mermaid 8.4.8 (8.5.0 doesn't seem to work)

More graphs

Again thanks for this great plugin and for updating to latest mermaid! .. I have been looking at more types of graph support than mermaidjs offers in vuepress and found markvis that also works inside markdown. See below:

What would be the best way to support this - could this plugin be made to support multiple engines ? (preferable I think that with multiple plugins that are doing almost the same integration to vuepress).

P.S: For feature completeness, there is of cause also GraphViz as shown below:

Font awesome not working

I have tried using the standard font awesome tags but I can't get them to work. Is there a way to make this work?
1("There is more info here fa:fa-info-circle") --> 2

flowchart TD

    1("There is more info here fa:fa-info-circle") --> 2

npm WARN deprecated @braintree/[email protected]: Potential XSS vulnerability patched in v6.0.0.

npm install -D "vuepress-plugin-mermaidjs"

npm WARN deprecated @braintree/[email protected]: Potential XSS vulnerability patched in v6.0.0.

The sanitize-url should be updated.

Fullscreen mode

Large diagrams are hard to read, a fullscreen mode with overflow scrolling should be added.

Diagrams not created if built inside docker container

First of all thanks for the plugin, it's very easy to set up and works well, except in the following case:

I noticed that when building the docs inside a docker container, the diagrams are not created. Instead, the regular text is shown. I checked the HTML files and it looks like there is no svg but just the plain HTML:

When building the same project outside of the docker container, it works flawlessly. (To clarify, inside the docker both the dev and prod build don't work, outside both work).

I was not able to see any errors, but it's my first time working with vuepress, so I'm not sure if they are turned off by default.

The project I'm working on is open source, so if you have time you can take a look and reproduce it.

Docs: http://docs.walletbeacon.io/
Github: https://github.com/airgap-it/beacon-sdk

I tried to solve the issue myself before opening this ticket, the only thing I noticed in other docker containers related to mermaid is that they install phantomjs. I tried that, but it still didn't work.

BTW, the dockerfile I used is in that repo, I've set it up to use it with the VSCode Remote Development plugin. https://code.visualstudio.com/docs/remote/containers

Make mermaid a peer dependency so it can easily be upgraded

First of all, thanks for this wonderfull vuepres plugin for mermaid. Nice work!

The current plugin depends on an older mermaid version as a dependency and I would like to upgrade to the newest mermaid version 8.6.0. Instead of having to continuously update the plugin for each new version of mermaid, it seems to me it would be better to change the dependency to a peer dependency. This way, the user can update mermaid him/her-self without having to update this plugin (exception: unless something changes in mermaid in a way that is not backward compatible).

Cypress Tests are inconsistent

I cannot quite pin this down but the Cypress test(s) don't always return the same result. This is related to fixing #46, as I've been trying to reproduce the failure in a test case to not have it be a regression one day once fixed. That test case fails sometimes and works sometimes on my machine.

disclosure: As that is a broken state where I don't have a clue why it is broken, I don't currently want to push the changes to GH.

Are there plans to support VuePress 2.x ?

Error in hook extendsMarkdown on Vuepress 2 for [email protected]

It's looking for '@vuepress/shared-utils'. This doesn't seem to exist on Vuepress 2. I tried installing it but the chain of missing dependencies just goes on. Are the users expected to install these?

Click events on graph elements are not working

Binding click events to nodes as described in the mermaidjs docs seems to be either broken or not implemented. As this requires securityLevel at least to be set to loose, i registered the plugin in config.js with:

plugins: [
   [
     'mermaidjs',
     {
       securityLevel: 'loose'
     }
   ]
]

Anyway the click events are not triggered.

Support VuePress v2?

Do you have any plans to support VuePress v2 (which one in beta now)?

Not compatible with VuePress 2.0.0-beta.51

VuePress 2.0.0-beta 50 has a breaking change where it is now only using ES modules. This is causing the following error:

Error [ERR_REQUIRE_ESM]: require() of ES Module ...node_modules/@vuepress/utils/dist/index.js from .../node_modules/vuepress-plugin-mermaidjs2/src/index.js not supported

Duplicated code blocks

Hi, I'm seeing a bug where duplicated code blocks are appearing when there is no space before the block in the markdown. It's easily remedied by adding a new line before the code block, but thought it was a bit odd.

I removed your plugin and the duplicates in my example disappear, so it looks like something weird with the plugin perhaps or more likely the markdown rendering in Mermaid itself.

Please see example repo here and here

Example rendering can be seen at https://vuepress-bug.onrender.com/guide/

gitGraph doesn't work

The following mermaid produces an empty box:

<mermaid>
gitGraph
    commit
    commit
    commit
</mermaid>

It works perfectly fine on live editor: https://mermaid.live/edit#pako:eNp9izEOwjAMRa-C_twTZAZxAFYvVmJaC5xUxhlQ1buTSrDyp6ev9zbkVgQJs8bVeV2onsZyM9P4z5hg4sZaRr4dHyEWMSGkgYX9QaC6D6-vhUMuRaM50p2fL5nAPdrtXTNSeJefdFaene1r7R80YjU7

Compatible with vuepress 0.14?

What version of vuepress does this plugin work with? I tried it with 0.14.8 but doesn't seem to be working.

[Feature Request] Add a class name to the "div" that wraps the mermaid diagram

Thanks for your repo!
Could you help add a class name like "mermaid-container" or another name to the "div" that wraps the mermaid diagram like the following image shows?

Motivation: We can add a custom style according to the class name.

Release v.1.1.2

This release is currently blocked by DNS propagation for the new documentation
website.

Actual changes in this release are:

• moved code files to /src (does not break backwards compatibility and not introduce new features)
• added a documentation mini-site which uses this plugin to show how it works

Use minified version of mermaid.js

Currently, using the minified version results in things breaking
some of the time. Especially in repositories which have a local VuePress
but also use BabelJS for transpilation and have a .babelrc sometimes
things seem to break.

As the unminified version of mermaid is pretty big this is not really
desirable. Help is much appreciated!

extra large margin around diagram.

The plugin works great, but adds a large space above/below the sequence diagram.
I think this padding is proportional to the number of sequence lines (arrows/note-over)

Plugin not working after `vuepress build`

Hi! Your plugin works brilliantly when I run vuepress dev docs, however when I run vuepress build docs to prepare for deployment, the static site that is built no longer shows the diagrams. Instead, the spinner is shown.

I can't see any errors in the console or any other reason for it not working.

Here is my list of devDependencies:

  "devDependencies": {
    "@vuepress/plugin-pwa": "1.7.1",
    "vuepress": "1.7.1",
    "vuepress-plugin-mermaidjs": "1.8.0"
  },

Any ideas what I'm doing wrong? Or where I can look to find out more information on why it's not working?

Thanks!

The generated svg size doesn't match the mobile device

Please consider add "style:100%" to the svg element.

Doesn't work with vuepress 2

package.json

"devDependencies": {
    "@vue/component-compiler-utils": "^3.3.0",
    "@vuepress/shared-utils": "^1.9.7",
    "lru-cache": "^7.7.3",
    "vuepress": "^2.0.0-beta.36",
    "vuepress-plugin-mermaidjs": "^2.0.0-beta.2",
    "webpack": "^5.71.0"
  }

Error in browser console

Uncaught (in promise) TypeError: mermaid.initialize is not a function
    at mermaid.js:39:29

Show a loading indicator while the diagrams are parsing

There seems to be a problem with the order in which the subgraphs are rendered

This is the result of the rendering of the mermaid plugin in vscode

This is the result rendered with the vuepress-plugin-mermaidjs plugin

envinfo：

 System:
    OS: Windows 10 10.0.19043
    CPU: (4) x64 Intel(R) Core(TM) i3-8100 CPU @ 3.60GHz
    Memory: 1.84 GB / 15.83 GB
  Binaries:
    Node: 14.17.6 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.19 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 6.14.15 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: 109.0.5414.75
    Edge: Spartan (44.19041.1266.0), Chromium (109.0.1518.69)
    Internet Explorer: 11.0.19041.1566

plugin versions：
vuepress-plugin-mermaidjs version: v1.9.1
vuepresss: v1.9.7

Add support for custom diagram styles via diagram comments

Since the component default-slot syntax is deprecated in 2.x,
support for using custom styling should be re-added.

There are two ways to go here:

1. add argumentsto the fenced-block language descriptor, e.g. ``` mermaid [style={css;rules;here;}]
2. parse the mermaid content for a special comment syntax, e.g. %% style css: rule;

I currently tend towards going the second route as it seems more robust
and also wouldn't destroy anything if the code blocks were copied
into any other system.