From a1e4ffb3f08e38bb02945e33f02b7992c3f99a2c Mon Sep 17 00:00:00 2001 From: MrCoder Date: Sat, 3 Dec 2022 19:30:09 +1100 Subject: [PATCH] Fixed an issue that diagrams disappear from docs pages when switching themes or reloading pages --- packages/mermaid/src/docs/.vitepress/theme/Mermaid.vue | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/packages/mermaid/src/docs/.vitepress/theme/Mermaid.vue b/packages/mermaid/src/docs/.vitepress/theme/Mermaid.vue index 9ae9c9f3b..c99141601 100644 --- a/packages/mermaid/src/docs/.vitepress/theme/Mermaid.vue +++ b/packages/mermaid/src/docs/.vitepress/theme/Mermaid.vue @@ -61,6 +61,13 @@ const renderChart = async () => { mermaidConfig.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} ${salt}`; };