vue3+ts中使用Mermaid组件

在 Vue 3 结合 TypeScript 的项目中，引入 Mermaid 组件主要是为了在页面上动态生成流程图、序列图等图表。首先，你需要安装相关的依赖：

npm install @vue/apollo-composable @vue/cli-plugin-vuex mermaid --save

然后，在 Vue 文件中，你可以通过插件如 `vue-mermaid` 来渲染 Mermaid 语法：

1. 首先，在 main.ts 或 main.js 中导入并配置 Mermaid:

import { createApp } from 'vue'
import App from './App.vue'
import MermaidVue from 'vue-mermaid'

// 如果需要配置 Mermaid 全局路径，例如从 CDN 加载
const isProduction = process.env.NODE_ENV === 'production'
const mermaidConfig = {
  ...({ offline: true, theme: 'default' }), // 本地运行开启离线模式
  /* 如果使用CDN，配置如下 */
  /* html: function (content) {
     return '<div class="mermaid">' + content + '</div>';
   }*/
}

createApp(App)
  .use(MermaidVue, { mermaidOptions: mermaidConfig })
  .mount('#app')

2. 在模板中使用 Mermaid 组件：

<template>
  <div>
    <mermaid :source='yourDiagramCode'></mermaid> <!-- 这里是你的 Mermaid 代码 -->
  </div>
</template>

<script lang="ts">
import { ref } from 'vue';

export default {
  setup() {
    const yourDiagramCode = ref(`
      graph TD;
        A --> B;
        B --> C;
    `);

    return {
      yourDiagramCode,
    };
  },
};
</script>

在上述例子中，`yourDiagramCode` 变量保存了你要展示的 Mermaid 代码，通过 `<mermaid>` 组件将其渲染成图表。