Defects/issue 3878

[MrCoder]

📑 Summary

Fixed the issue the diagrams disappear or theme does not switch on docs pages.

Resolves #3878

📏 Design Decisions

1. Clone the config and avoid mutating the original shared config;
2. Add salt to the svg code before rendering on the docs pages.

For #2, there are other ways to force the vue component (Mermaid) to update, such as this and this. Adding salt is most simple to undo and low chance to have other side effect.

📋 Tasks

Make sure you

• 📖 have read the contribution guidelines
• 💻 have added unit/e2e tests (if appropriate) (No test added)
• 🔖 targeted develop branch

[sidharthv96]

Shouldn't we handle this inside mermaid, and do a proper clone if it's a problem?
Where is this mutated at?
{...config} will only ensure that the top-level configs aren't changed, nested configs will still be mutated.

[sidharthv96]

I tried moving mermaidConfig inside the render function, so no global state is maintained.

---
 .../mermaid/src/docs/.vitepress/theme/Mermaid.vue | 15 ++++++---------
 .../mermaid/src/docs/.vitepress/theme/mermaid.ts  |  4 +---
 2 files changed, 7 insertions(+), 12 deletions(-)

diff --git a/packages/mermaid/src/docs/.vitepress/theme/Mermaid.vue b/packages/mermaid/src/docs/.vitepress/theme/Mermaid.vue
index c9914160..f0927d2a 100644
--- a/packages/mermaid/src/docs/.vitepress/theme/Mermaid.vue
+++ b/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 });
@@ -56,11 +51,13 @@ onMounted(async () => {
 onUnmounted(() => mut.disconnect());
 
 const renderChart = async () => {
-  console.log('rendering chart' + props.id + props.graph);
+  // console.log('rendering chart' + props.id + props.graph);
   const hasDarkClass = document.documentElement.classList.contains('dark');
-  mermaidConfig.theme = hasDarkClass ? 'dark' : 'default';
-
-  console.log({ mermaidConfig });
+  const mermaidConfig = {
+    securityLevel: 'loose',
+    startOnLoad: false,
+    theme: hasDarkClass ? 'dark' : 'default',
+  };
   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**.
diff --git a/packages/mermaid/src/docs/.vitepress/theme/mermaid.ts b/packages/mermaid/src/docs/.vitepress/theme/mermaid.ts
index fef090ea..b287346f 100644
--- a/packages/mermaid/src/docs/.vitepress/theme/mermaid.ts
+++ b/packages/mermaid/src/docs/.vitepress/theme/mermaid.ts
@@ -8,9 +8,7 @@ try {
 }
 
 export const render = async (id: string, code: string, config: MermaidConfig): Promise<string> => {
-  // make a clone of config, so we don't mutate the original
-  const mermaidConfig = { ...config };
-  mermaid.initialize(mermaidConfig);
+  mermaid.initialize(config);
   const svg = await mermaid.renderAsync(id, code);
   return svg;
 };
-- 

[MrCoder]

That looks better than my solution.

[sidharthv96]

Thanks for the quick fix @MrCoder :)