# How to use mermaid on Vuepress

The following explanation is based on the topic of Has anyone gotten mermaid working? #111 (opens new window), , briefly as follows:

  1. Add mermaid to the project.
  2. Add initialization code of mermaid.
  3. Write diagram of mermaid on the .md file.

# 1. Add mermaid to the project

npm install -D mermaid

# 2. Add initialization code of mermaid.

# eject of the default theme

Use the following command to eject the default theme definition files under docs / theme (when the root of vuepress is docs)

vuepress eject docs

In case "command not found", add an eject command to package.json in the same way as adding a vuepress build command,

  "scripts": {
    "docs:dev": "vuepress dev docs",
    "docs:build": "vuepress build docs",
    "docs:eject": "vuepress eject docs"
  },

Take place eject as follows

npm run docs:eject

# Add initialization code to the ejected Page.vue file

On hte basis of the post (opens new window) by blurab (opens new window), add mounted() and updated () on the docs/.vuepress/theme/components/Page.vue as follows:




 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 



export default {
  props: ['sidebarItems'],

  mounted() {
  
    import("mermaid/dist/mermaid").then(m => {
      m.initialize({
        startOnLoad: true
      });
      m.init();
    });
  },
  updated () {
      
    import("mermaid/dist/mermaid").then(m => {
      m.initialize({
        startOnLoad: true
      });
      m.init();
    });
  },

  computed: {

# 3. Write diagram of mermaid on the .md file

Write diagram on your .md file as follow:

<mermaid/>
<div class="mermaid">
graph LR
    A[溝の口] --- B[二子玉川]
    B-->|田園都市線|C[渋谷]
    B-->|大井町線|D(大井町);
</div>

Then, you can see as follows:


# Reference


Last Updated: 2/28/2021, 4:31:52 AM