How to use mermaid on Vuepress

The following explanation is based on the topic of Has anyone gotten mermaid working? #111, , 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 by blurab, 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: 4/9/2020, 10:08:34 AM