Merge pull request #3880 from ZenUml/defects/issue-3878

Defects/issue 3878

packages/mermaid/src/docs/.vitepress/theme/Mermaid.vue

@@ -20,11 +20,6 @@ const props = defineProps({
 const svg = ref(null);
 let mut = null;
 
-const mermaidConfig = {
-  securityLevel: 'loose',
-  startOnLoad: false,
-};
-
 onMounted(async () => {
   mut = new MutationObserver(() => renderChart());
   mut.observe(document.documentElement, { attributes: true });
@@ -58,9 +53,20 @@ onUnmounted(() => mut.disconnect());
 const renderChart = async () => {
   console.log('rendering chart' + props.id + props.graph);
   const hasDarkClass = document.documentElement.classList.contains('dark');
-  mermaidConfig.theme = hasDarkClass ? 'dark' : 'default';
+  const mermaidConfig = {
+        securityLevel: 'loose',
+        startOnLoad: false,
+        theme: hasDarkClass ? 'dark' : 'default',
+      };
 
   console.log({ mermaidConfig });
-  svg.value = await render(props.id, decodeURIComponent(props.graph), mermaidConfig);
+  let svgCode = await render(props.id, decodeURIComponent(props.graph), mermaidConfig);
+  // This is a hack to force v-html to re-render, otherwise the diagram disappears
+  // when **switching themes** or **reloading the page**.
+  // The cause is that the diagram is deleted during rendering (out of Vue's knowledge).
+  // Because svgCode does NOT change, v-html does not re-render.
+  // This is not required for all diagrams, but it is required for c4c, mindmap and zenuml.
+  const salt = Math.random().toString(36).substring(7);
+  svg.value = `${svgCode} <span style="display: none">${salt}</span>`;
 };
 </script>