Skip to content

Instantly share code, notes, and snippets.

@vedmalex

vedmalex/README.md

Last active February 28, 2021 01:15
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save vedmalex/88830bdf64a45b745e142eef9e5c805d to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save vedmalex/88830bdf64a45b745e142eef9e5c805d to your computer and use it in GitHub Desktop.
Download ZIP
fix: mermaid for vuePress without reject
Raw
README.md

sample mermaid project

graph TD
    A[Christmas] -->|Get money| B(Go shopping)
    B --> C{Let me think}
    C -->|One| D[Laptop]
    C -->|Two| E[iPhone]
    C -->|Three| F[Car]
Loading
Raw
mermaid.vue
<template>
</template>
<script>
export default {
mounted() {
import("mermaid/dist/mermaid").then(m => {
m.initialize({
startOnLoad: true,
});
m.init();
});
}
};
</script>
@neumayr
Copy link

neumayr commented Jun 14, 2018 •
edited
Loading

@vedmalex Is this still working? Because I couldn't get it to run with your example.

This is how I got it working on mermaid v7.1.2 and vuepress v0.14.0

// .vuepress/components/mermaid.vue

<template>
  <div class="mermaid">
    <slot></slot>
  </div>
</template>

<script>
export default {
  mounted() {
    import("mermaid/dist/mermaid").then(m => {
      m.initialize({
        startOnLoad: true
      });
      m.init();
    });
  }
};
</script>

And my README.md looks like:

### mermaid

<mermaid>
graph TD
  A[Silvester] -->|Get money| B(Go shopping)
  B --> C{Let me think}
  C -->|One| D[Laptop]
  C -->|Two| E[iPhone]
  C -->|Three| F[Car]
   
  C -->|Four| F[Mac]
</mermaid>

⚠️ Notice Blank lines are making trouble, my workaround is adding a &nbsp; after the blank line indentation   (<Space><Space><&nbsp;>)

Update Add package.json reference

// package.json
 
{
  […]
  "dependencies": {},
  "devDependencies": {
    "mermaid": "^7.1.2",
    "vuepress": "^0.14.0"
  },
  […]
}

@avimehenwal
Copy link

avimehenwal commented May 29, 2020

This is awesome, works for me 😄

vuepress/1.5.0
mermaid 8.5.1

Thankyou 🙇

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment