Hey folks, today I want to show you how to generate flowchart diagrams in a Vue or Nuxt application using vue-mermaid-string and nuxt-mermaid-string. They both help to integrate the wonderful Mermaid library into your Vue-based projects.
Setup
Alright, let's stick to Vue for now and see later how it works for Nuxt. First we need to install the component.
There are several ways to add the component to your project. The quickest solution is via CDN like this:
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/mermaid/dist/mermaid.min.js"></script>
<script src="https://unpkg.com/vue-mermaid-string"></script>
Note that you also need to add mermaid
itself.
Alternatively, install it via a package manager:
$ npm install vue-mermaid-string
And register the component. You can do it locally:
<script>
import VueMermaidString from 'vue-mermaid-string'
export default {
components: {
VueMermaidString,
},
}
</script>
Globally:
import Vue from 'vue'
import VueMermaidString from 'vue-mermaid-string'
Vue.component('VueMermaidString', VueMermaidString)
Or as a plugin:
import Vue from 'vue'
import VueMermaidString from 'vue-mermaid-string'
Vue.use(VueMermaidString)
Let's draw some serious stuff
Alright, now let's start drawing a diagram! Since probably most of the readers are JavaScript fans, we create a little tech tree for demonstration purposes 😊.
Here is the code needed to display the diagram. We also add endent to make life easier with multi-line strings.
<template>
<div id="app">
<vue-mermaid-string :value="diagram" />
</div>
</template>
<script>
import VueMermaidString from "vue-mermaid-string";
import endent from "endent";
export default {
computed: {
diagram: () => endent`
graph TD
DateTime[Date and time]
JavaScript --> Frameworks
JavaScript --> DateTime
JavaScript --> 3D
Frameworks --> Vue.js
Frameworks --> React
DateTime --> Moment.js
DateTime --> date-fns
3D --> Three.js
3D --> Babylon.js
`,
},
components: {
VueMermaidString,
},
};
</script>
This results in the following diagram:
Great! You can also edit the diagram string (for example the node labels), and it updates the result accordingly.
As a next step we change the colors for each library type. I've used Paletton to generate a tetradic color scheme and applied the colors to the corresponding nodes.
I've put the result into a sandbox with source code, the result looks like this:
Feel free to play around with the sandbox and try out different Mermaid strings!
Usage with Nuxt
If you are a Nuxt user, it is probably more convenient to add a module to your project and then have everything available right away. There is nuxt-mermaid-string, which basically wraps the vue component.
Simply install it via npm install nuxt-mermaid-string
.
Then add it to your nuxt.config.js
like this:
export default {
modules: ['nuxt-mermaid-string'],
}
And there we go. The rest works like above!
Conclusion
In this article we had a look at diagram generation in Vue and Nuxt apps. I hope you liked it and it's of some use for you!
You help me know if people like the packages by leaving a GitHub star at vue-mermaid-string and/or nuxt-mermaid-string 🌟.
If you like what I'm doing, follow me on Twitter or check out my website. Also consider donating at Buy Me a Coffee, PayPal or Patreon. Thank you so much! ❤️
Top comments (0)