Support VuePress v2? about vuepress-plugin-mermaidjs

[eFrane]

I absolutely want to support Vuepress 2. I tried my hands at it a while ago, but did hit a few walls with the plugin api at the time. Until I get to this, if anyone seeing this issue wants to make an attempt I'm more than happy to help polish it for merging. (please don't read this as me not wanting to do the work, I just want to point out that contributions are welcome.)

[eFrane]

I (finally, sorry), just released v2.0.0-beta.1 with Vuepress 2 support. Please don't hesitate to open new issues regarding broken things/missing features. I'll close this one though as it only pertains to general support.

[PeppeL-G]

For those who need to use Mermaid in Vuepress 2 before this plugin starts to support it can do it this hacky way:

1. Install Mermaid: npm install mermaid
2. If you haven't added support for custom Vue components yet, do that:
   1. npm install @vuepress/plugin-register-components.
   2. In the config.js file, add the plugin in the plugins section with (for example) code like:

[
	"@vuepress/register-components",
	{
		componentsDir: path.resolve(__dirname, './components'),
	},
]

3. Create a new Vue component in your components folder called mermaid.vue. Use the following code for it:

<template>
	<div class="mermaid">
		<slot></slot>
	</div>
</template>

<script>
export default {
	mounted() {
		import("mermaid/dist/mermaid").then(m => {
			m.initialize({
				startOnLoad: true
			});
			m.init()
		})
	}
}
</script>

Then you can use Mermaid in your markdown files this hacky way:

Testing

<mermaid>
{{`
graph LR
	users["Users"]
	subgraph "Users' computers"
		webBrowser["Web Browser"]
	end
	subgraph "Web Server"
		webApp["Web Application"]
	end
	subgraph "Database Server"
		db["Database"]
	end
	users -- Use --> webBrowser
	webBrowser -- HTTP --> webApp
	webApp -- SQL --> db
`}}
</mermaid>

Testing

When this plugin supports Vuepress 2 it's of course much better to use Mermaid through this plugin.

[eFrane]

(Crossposting this for easier reference from #78)

While I want to support VuePress 2/next, I also want to keep supporting Vuepress 1.x for the time being. Unfortunately, these requirements are largely mutually exclusive on because of the massive changes in Vue 3 and the new VuePress plugin API. I'm still torn on whether to go the lerna monorepository route and publish vuepress-plugin-mermaidjs and e.g. vuepress2-plugin-mermaidjs side by side or whether "clever branching" might be a way to go. After all, the only dependency to be kept up to date on the VuePress 1.x branch would be Mermaid. Then this Library could make a major version jump and be 1.x for VuePress 1 and 2.x and onwards for VuePress 2.

[jeremycloud]

@eFrane This is still a work in progress, I have a preliminary V2 plugin working here if you are interested. https://gitlab.com/sloud/vuepress-plugin-default-theme-mermaid

[eFrane]

So, turns out I'm going to have to basically rewrite this Plugin because the Vue 3/Vuepress 2 combo feels very much like Angular 2 all over again. Anyone wanting to chip in ideas on how long I should maintain a Vuepress 1 version is welcome to do so. :)

[PeppeL-G]

@eFrane I don't have much experience of maintaining two versions like that in parallel, but I think I would go with a single repo. If I'm not mistaking, I think the official VuePress 2 plugins use that strategy; in package.json for my app using VuePress 2 I have:

    "@vuepress/plugin-git": "^2.0.0-alpha.1",
    "@vuepress/plugin-register-components": "^2.0.0-beta.24",

[eFrane]

@jeremycloud This looks awesome. Would you be okay with me borrowing (with attribution of course) a little bit from your work?

[jeremycloud]

@eFrane yeah go for it.

[MeikelLP]

@eFrane does not really work for me:

Error: Cannot find module '@vuepress/shared-utils'
Require stack:
- [...]\node_modules\vuepress-plugin-mermaidjs\src\markdownItPlugin.js

my package.json

"devDependencies": {
    "@vuepress/plugin-search": "^2.0.0-beta.37",
    "vuepress": "^2.0.0-beta.37",
    "vuepress-plugin-mermaidjs": "^2.0.0-beta.2"
}

I assume a CI would've seen this. Maybe you should fix Travis as well?

[MeikelLP]

Also the source code does not work on windows (at least for me):

npx vuepress build docs

causes the file docs/.vuepress/.temp/internal/clientAppEnhancements.js to be built. Sadly this file contains an invalid path (Windows backslash dilemma):

// other imports
import clientAppEnhance3 from 'D:/projekte/github/vuepress-plugin-mermaidjs/node_modules/@vuepress/theme-default/lib/client/clientAppEnhance.js'
import clientAppEnhance4 from 'D:\projekte\github\vuepress-plugin-mermaidjs\src\clientAppEnhance.js'

Maybe this is a vite bug. I don't know. Just wanted to mention it. The dirty fix is:

    clientAppEnhanceFiles: path.resolve(__dirname, 'clientAppEnhance.js').replace(/\\/g, '/')

in src/index.js

[kidonng]

I wrote a patch for latest VuePress 2 beta (as of now 2.0.0-beta.51): https://github.com/v2fly/v2fly-github-io/blob/991b634231afb5957fc1eef198b8b9e0f92f571e/patches/vuepress-plugin-mermaidjs%2B2.0.0-beta.2.patch