AV1技术学习：Transform Coding

一、安装Mermaid

首先，你需要在你的项目中安装Mermaid。可以通过npm或yarn来安装：

npm install mermaid --save
# 或者
yarn add mermaid

结果如图：

二、Vue

方法一：使用pre标签

使用ref属性可以帮助你在Vue组件中访问DOM元素

<template>
  <div class="screen-contanier" id="workstation">

    <pre class="mermaid" ref="mermaid">
      flowchart TD
      A[Start] --> B{Is it?}
      B -- Yes --> C[OK]
      C --> D[Rethink]
      D --> B
      B -- No ----> E[End]
    </pre>
  </div>
</template>
<script>
  import * as mermaid from 'mermaid';
</script>

方法二：使用div标签

<template>
  <div class="screen-contanier" id="workstation">

    <div class="mermaid" ref="mermaidGraph">
      flowchart TD
      A[Start] --> B{Is it?}
      B -- Yes --> C[OK]
      C --> D[Rethink]
      D --> B
      B -- No ----> E[End]
    </div>
  </div>
</template>
<script>
  import * as mermaid from 'mermaid';

  export default {
  name: 'MermaidExample',
  mounted() {
    mermaid.initialize({ startOnLoad: true });
    this.renderMermaid();
  },
  methods: {
    renderMermaid() {
      mermaid.init(undefined, this.$refs.mermaidGraph);
    },
  },
};
</script>

<style scoped>
  .mermaid {
  /* 确保有足够空间显示图表 */
      /* 样式 */
  height: 400px;
}
</style>

三、展示

 了解mermaid

可以参考之前的文章：

markdown的mermaid用法及例子_markdown mermaid-CSDN博客