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?

[AntoniJakubiak]

Hi,

Try this:

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

const chartContainer = ref(null);

const initializeMermaid = async () => {
  mermaid.initialize({
    startOnLoad: false,
  });
  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;
  `;

  const renderResult = await mermaid.render("newMermaidChart", chartDefinition, chartContainer.value);
  chartContainer.value.innerHTML = renderResult.svg;

};


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

</script>