Generating Beautiful Flowchart Diagrams With Mermaid and Vue/Nuxt
Tags: vue, nuxt, webdev, frontend
Published: 2021-06-29 16:35:15

Hey folks, today I want to show you how to generate flowchart diagrams in a Vue or Nuxt application using [vue-mermaid-string](https://github.com/dword-design/vue-mermaid-string) and [nuxt-mermaid-string](https://github.com/dword-design/nuxt-mermaid-string). They both help to integrate the wonderful [Mermaid](https://mermaid-js.github.io/) 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:

```html
<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:

```bash
$ npm install vue-mermaid-string
```

And register the component. You can do it locally:

```js
<script>
import VueMermaidString from 'vue-mermaid-string'

export default {
  components: {
    VueMermaidString,
  },
}
</script>
```

Globally:

```js
import Vue from 'vue'
import VueMermaidString from 'vue-mermaid-string'

Vue.component('VueMermaidString', VueMermaidString)
```

Or as a plugin:

```js
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](https://github.com/indentjs/endent) to make life easier with multi-line strings.

```html
<template>
  <div id="app">
    <vue-mermaid-string :value="diagram" />
  </div>
</template>
```

```js
<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:

![Diagram with JavaScript frameworks (Vue.js, React), DateTime libraries (Moment.js, date-fns), and 3D libraries (Three.js, Babylon.js)](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ynsbhtel05e2wqxxx6ad.png)

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](https://www.paletton.com/#uid=73+1p0k2O++00++00++7n++be+Z) 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:

<p>
  {% codesandbox demo-vue-mermaid-string-e2sp4 %}
</p>

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](https://github.com/dword-design/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:

```js
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](https://github.com/dword-design/vue-mermaid-string) and/or [nuxt-mermaid-string](https://github.com/dword-design/vue-mermaid-string) 🌟.

**If you like what I'm doing, follow me on [Twitter](https://twitter.com/seblandwehr) or check out my [website](https://sebastianlandwehr.com). Also consider donating at [Buy Me a Coffee](https://www.buymeacoffee.com/dword), [PayPal](https://www.paypal.com/paypalme/SebastianLandwehr) or [Patreon](https://www.patreon.com/dworddesign). Thank you so much! ❤️**