using mermaid in vue3[svgElem.node(...).getBBox]

[ToBeNiceMan]

my project like this

  <div style="width: 100%; height: 100%;">
    <div ref="chartContainer" id="mermaidChart" class="chartClass">
    </div>
  </div>
</template>
<script setup>
import { ref, onMounted } from 'vue';
import mermaid from 'mermaid';
import { convertToMermaid } from '@/utils/convertToMermaid.js';

const props = defineProps({
  nodes: Array,
  edges: Array
});

const chartContainer = ref(null);

const initializeMermaid = () => {
  const config = {
    "startOnLoad": true,
}
  mermaid.initialize(config);

};

const setupMermaidGraphs = () => {

  // const chartDefinition = convertToMermaid(props.nodes, props.edges);
  const chartDefinition = `graph TD
    A[Enter Chart Definition] --> B(Preview)
    B --> C{decide}
    C --> D[Keep]
    C --> E[Edit Definition]
    E --> B
    D --> F[Save Image and Code]
    F --> B`;
  console.log('chartDefinition', chartDefinition);
  console.log('mermaid', mermaid);

  // mermaid.render("chartContainer", chartDefinition)
  // 异步方法
  mermaid.mermaidAPI.render("mermaidChart", chartDefinition, chartContainer.value)

}

onMounted(async () => {
  await initializeMermaid();
  setupMermaidGraphs();
});

</script>

<style scoped>
.chartClass {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
}
</style>

browser console err with chunk-5EJBOFBL.js?v=f39a814a:14270 Uncaught (in promise) TypeError: svgElem.node(...).getBBox is not a function

and webpage display with

how to fix?