vue mermaid例子

以下是一个使用Vue Mermaid的例子：

<template>
  <div>
    <vue-mermaid :graph-definition="graphDefinition"></vue-mermaid>
  </div>
</template>

<script>
import VueMermaid from "vue-mermaid";

export default {
 components: {
    VueMermaid,
  },
  data() {
    return {
      graphDefinition: `
        graph LR
          A[方形] -->B(圆角)
          B --> C{菱形}
          C -->|a| D[长方形]
          C -->|b| E[长方形]
          F[圆形] -->|link| G[长方形]
      `,
    };
  },
};
</script>

这个例子展示了如何在Vue中使用Vue Mermaid来绘制一个流程图。在模板中，我们使用`vue-mermaid`组件，并将`graph-definition`属性设置为我们的流程图定义。在脚本中，我们导入了`VueMermaid`组件，并将其注册为局部组件。我们还定义了一个`graphDefinition`数据属性，其中包含我们的流程图定义。最后，我们将`graphDefinition`传递给`vue-mermaid`组件的`graph-definition`属性。