在 vue 组件中加载美人鱼（webpack）答案

【问题标题】：Loading mermaid in a vue component (webpack)在 vue 组件中加载美人鱼（webpack）
【发布时间】：2020-12-22 12:03:17
【问题描述】：

我正在将一个使用美人鱼的 vue 项目从 CDN 迁移到 webpack。我对它完全陌生。我在项目文件夹上做了 npm install save mermaid。

如果我将美人鱼 cdn 加载为静态 js（在 /public/index.html 中），它会因某些图形而崩溃（显示炸弹图标，表示语法错误）

如果在 webpack 中，它不会显示任何美人鱼图，但似乎加载为空（使用浏览器工具检查生成的 html）。没有控制台错误

<svg id="mermaidChart0" width="100%" xmlns="http://www.w3.org/2000/svg"><g><g class="output"><g class="clusters"></g><g class="edgePaths"></g><g class="edgeLabels"></g><g class="nodes"></g></g></g></svg>

试过了： //package.json

...
  "dependencies": {
    "axios": "^0.21.0",
    "core-js": "^3.6.5",
    "mermaid": "^8.8.2",

在component.vue中

<template>
...
      <div class="mermaid m-5">
        graph LR

        B(dsfgdsfgsd <br>) --> Bo(gdfshfghfdh <br>)
...


<script>

    import mermaid from 'mermaid'
    
    export default {
      data: function() {
        return {}
      },
      mounted() {
        this.init();
      },
      methods: {
        init: function() {
          mermaid.initialize({
            theme: 'forest',
    
            htmlLabels: true,
            //startOnLoad: true
          });
          console.log(mermaid);
          mermaid.init(undefined, document.querySelectorAll('.mermaid'));
        }
      }
    }

【问题讨论】：

这种情况只发生在图 LR 而不是 stateDiagram-v2 类型...

标签： vue.js webpack mermaid

【解决方案1】：

如果你想要一个现成的解决方案，你可以使用我的组件vue-mermaid-string。它为您完成内部工作。

通过 NPM 安装它，然后通过 CDN 脚本或添加组件将其添加到您的项目中，然后像这样使用它：

<template>
  <vue-mermaid-string :value="diagram" />
</template>

<script>
export default {
  computed: {
    diagram: () => 'graph TD\n  A --> B',
  },
}
</script>

【讨论】：