efrane / vuepress-plugin-mermaidjs Goto Github PK
View Code? Open in Web Editor NEWVuepress plugin for mermaid.js diagrams
Home Page: https://vuepress-plugin-mermaidjs.efrane.com
Vuepress plugin for mermaid.js diagrams
Home Page: https://vuepress-plugin-mermaidjs.efrane.com
Large diagrams are hard to read, a fullscreen mode with overflow scrolling should be added.
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).
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.
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)
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)
Do you have any plans to support VuePress v2 (which one in beta now)?
This release is currently blocked by DNS propagation for the new documentation
website.
Actual changes in this release are:
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.
What version of vuepress does this plugin work with? I tried it with 0.14.8 but doesn't seem to be working.
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!
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/
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
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
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.
I ran npm install --save-dev vuepress-plugin-mermaidjs
to install plugin-mermaidjs. My config.js is below:
module.exports = {
markdown: {
extractHeaders: ['h2', 'h3', 'h4', 'h5', 'h6'],
lineNumbers: true,
},
plugins: {
'one-click-copy': {
copySelector: ['div[class*="language-"] pre', 'div[class*="aside-code"] aside'],
copyMessage: 'Copied successfully!',
toolTipMessage: 'Copy to clipboard',
duration: 300,
},
'vuepress-plugin-mathjax': {
packages: ['algorithm', 'algorithmic', 'base', 'ams'],
showError: true,
target: 'svg',
},
'vuepress-plugin-element-tabs': {},
'vuepress-plugin-mermaidjs': {},
}
};
I ran vuepress build docs
in git bash and I had this problem:
tip Apply plugin @vuepress/search (i.e. "@vuepress/plugin-search") ...
tip Apply plugin @vuepress/nprogress (i.e. "@vuepress/plugin-nprogress") ...
tip Apply plugin one-click-copy (i.e. "vuepress-plugin-one-click-copy") ...
tip Apply plugin @vssue/vssue (i.e. "@vssue/vuepress-plugin-vssue") ...
tip Apply plugin mathjax (i.e. "vuepress-plugin-mathjax") ...
tip Apply plugin element-tabs (i.e. "vuepress-plugin-element-tabs") ...
tip Apply plugin md-enhance (i.e. "vuepress-plugin-md-enhance") ...
tip Apply plugin mermaidjs (i.e. "vuepress-plugin-mermaidjs") ...
i Compiling Client
i Compiling Server
√ Server: Compiled with some errors in 14.08s
√ Client: Compiled with some errors in 18.84s
(undefined) ./node_modules/mermaid/dist/mermaid.min.js 6:13181
Module parse failed: Unexpected token (6:13181)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
(Source code omitted for this binary file)
@ ./node_modules/vuepress-plugin-mermaidjs/src/mermaid.js 43:4-38
@ ./node_modules/@vuepress/core/.temp/app-enhancers/7.js
@ ./node_modules/@vuepress/core/.temp/internal/app-enhancers.js
@ ./node_modules/@vuepress/core/lib/client/app.js
@ ./node_modules/@vuepress/core/lib/client/clientEntry.js
@ multi ./node_modules/@vuepress/core/lib/client/clientEntry.js
(undefined) ./node_modules/mermaid/dist/mermaid.min.js 6:13181
Module parse failed: Unexpected token (6:13181)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
(Source code omitted for this binary file)
@ ./node_modules/vuepress-plugin-mermaidjs/src/mermaid.js 43:4-38
@ ./node_modules/@vuepress/core/.temp/app-enhancers/7.js
@ ./node_modules/@vuepress/core/.temp/internal/app-enhancers.js
@ ./node_modules/@vuepress/core/lib/client/app.js
@ ./node_modules/@vuepress/core/lib/client/serverEntry.js
@ multi ./node_modules/@vuepress/core/lib/client/serverEntry.js
Error: Failed to compile with errors.
at D:\dyqProjects\blog\node_modules\@vuepress\core\lib\node\build\index.js:190:16
at finalCallback (D:\dyqProjects\blog\node_modules\webpack\lib\MultiCompiler.js:254:12)
at D:\dyqProjects\blog\node_modules\webpack\lib\MultiCompiler.js:277:6
at done (D:\dyqProjects\blog\node_modules\neo-async\async.js:2931:13)
at runCompilers (D:\dyqProjects\blog\node_modules\webpack\lib\MultiCompiler.js:181:48)
at D:\dyqProjects\blog\node_modules\webpack\lib\MultiCompiler.js:188:7
at D:\dyqProjects\blog\node_modules\webpack\lib\MultiCompiler.js:270:7
at finalCallback (D:\dyqProjects\blog\node_modules\webpack\lib\Compiler.js:257:39)
at D:\dyqProjects\blog\node_modules\webpack\lib\Compiler.js:273:13
at AsyncSeriesHook.eval [as callAsync] (eval at create (D:\dyqProjects\blog\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:33:1)
at AsyncSeriesHook.lazyCompileHook (D:\dyqProjects\blog\node_modules\tapable\lib\Hook.js:154:20)
at onCompiled (D:\dyqProjects\blog\node_modules\webpack\lib\Compiler.js:271:21)
at D:\dyqProjects\blog\node_modules\webpack\lib\Compiler.js:681:15
at AsyncSeriesHook.eval [as callAsync] (eval at create (D:\dyqProjects\blog\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:6:1)
at AsyncSeriesHook.lazyCompileHook (D:\dyqProjects\blog\node_modules\tapable\lib\Hook.js:154:20)
at D:\dyqProjects\blog\node_modules\webpack\lib\Compiler.js:678:31
at AsyncSeriesHook.eval [as callAsync] (eval at create (D:\dyqProjects\blog\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:9:1)
at AsyncSeriesHook.lazyCompileHook (D:\dyqProjects\blog\node_modules\tapable\lib\Hook.js:154:20)
at D:\dyqProjects\blog\node_modules\webpack\lib\Compilation.js:1423:35
at AsyncSeriesHook.eval [as callAsync] (eval at create (D:\dyqProjects\blog\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:9:1)
at AsyncSeriesHook.lazyCompileHook (D:\dyqProjects\blog\node_modules\tapable\lib\Hook.js:154:20)
at D:\dyqProjects\blog\node_modules\webpack\lib\Compilation.js:1414:32
at eval (eval at create (D:\dyqProjects\blog\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:17:1)
at D:\dyqProjects\blog\node_modules\terser-webpack-plugin\dist\index.js:321:9
at step (D:\dyqProjects\blog\node_modules\terser-webpack-plugin\dist\TaskRunner.js:87:9)
at done (D:\dyqProjects\blog\node_modules\terser-webpack-plugin\dist\TaskRunner.js:98:30)
at tryCatcher (D:\dyqProjects\blog\node_modules\bluebird\js\release\util.js:16:23)
at Promise._settlePromiseFromHandler (D:\dyqProjects\blog\node_modules\bluebird\js\release\promise.js:547:31)
at Promise._settlePromise (D:\dyqProjects\blog\node_modules\bluebird\js\release\promise.js:604:18)
at Promise._settlePromise0 (D:\dyqProjects\blog\node_modules\bluebird\js\release\promise.js:649:10)
at Promise._settlePromises (D:\dyqProjects\blog\node_modules\bluebird\js\release\promise.js:729:18)
at Promise._fulfill (D:\dyqProjects\blog\node_modules\bluebird\js\release\promise.js:673:18)
at Promise._resolveCallback (D:\dyqProjects\blog\node_modules\bluebird\js\release\promise.js:466:57)
at Promise._settlePromiseFromHandler (D:\dyqProjects\blog\node_modules\bluebird\js\release\promise.js:559:17)
at Promise._settlePromise (D:\dyqProjects\blog\node_modules\bluebird\js\release\promise.js:604:18)
at Promise._settlePromise0 (D:\dyqProjects\blog\node_modules\bluebird\js\release\promise.js:649:10)
at Promise._settlePromises (D:\dyqProjects\blog\node_modules\bluebird\js\release\promise.js:729:18)
at Promise._fulfill (D:\dyqProjects\blog\node_modules\bluebird\js\release\promise.js:673:18)
at Promise._resolveCallback (D:\dyqProjects\blog\node_modules\bluebird\js\release\promise.js:466:57)
at Promise._settlePromiseFromHandler (D:\dyqProjects\blog\node_modules\bluebird\js\release\promise.js:559:17)
at Promise._settlePromise (D:\dyqProjects\blog\node_modules\bluebird\js\release\promise.js:604:18)
at Promise._settlePromise0 (D:\dyqProjects\blog\node_modules\bluebird\js\release\promise.js:649:10)
at Promise._settlePromises (D:\dyqProjects\blog\node_modules\bluebird\js\release\promise.js:729:18)
at Promise._fulfill (D:\dyqProjects\blog\node_modules\bluebird\js\release\promise.js:673:18)
at Promise._settlePromise (D:\dyqProjects\blog\node_modules\bluebird\js\release\promise.js:617:21)
at Promise._settlePromise0 (D:\dyqProjects\blog\node_modules\bluebird\js\release\promise.js:649:10)
at Promise._settlePromises (D:\dyqProjects\blog\node_modules\bluebird\js\release\promise.js:729:18)
at Promise._fulfill (D:\dyqProjects\blog\node_modules\bluebird\js\release\promise.js:673:18)
at Promise._resolveCallback (D:\dyqProjects\blog\node_modules\bluebird\js\release\promise.js:489:14)
at Promise._settlePromiseFromHandler (D:\dyqProjects\blog\node_modules\bluebird\js\release\promise.js:559:17)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] build: `vuepress build docs`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
vuepress version is :
$ vuepress -v
cli.js/1.9.10 win32-x64 node-v14.16.1
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!
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:
%% 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.
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
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
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:
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
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
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.