diff --git a/src/components/StackedNote.vue b/src/components/StackedNote.vue index 3051141..a4f2ea7 100644 --- a/src/components/StackedNote.vue +++ b/src/components/StackedNote.vue @@ -21,7 +21,7 @@ import { encodeUTF8ToBase64 } from "@/utils/decodeBase64ToUTF8" import { filenameToNoteTitle } from "@/utils/noteTitle" import { generateTweets } from "@/utils/twitter" import mermaid from "mermaid" -import { useShikiji } from "@/hooks/useMarkdown.hook" +import { runMermaid, useShikiji } from "@/hooks/useMarkdown.hook" const LinkedNotes = defineAsyncComponent( () => import("@/components/LinkedNotes.vue"), @@ -95,9 +95,7 @@ watch([content, mode], () => { } if (rawContent.value.includes("```mermaid")) { - mermaid.run({ - querySelector: `.note-${sha.value} .mermaid`, - }) + runMermaid(`.note-${sha.value} .mermaid`) } if (rawContent.value.includes("```")) { diff --git a/src/hooks/useMarkdown.hook.ts b/src/hooks/useMarkdown.hook.ts index 4c9f5a3..63cb1f8 100644 --- a/src/hooks/useMarkdown.hook.ts +++ b/src/hooks/useMarkdown.hook.ts @@ -102,7 +102,18 @@ export const useShikiji = async () => { ) } -mermaid.initialize({ startOnLoad: false, flowchart: { curve: "natural" } }) +let mermaidInitialized = false + +export const runMermaid = (querySelector: string) => { + if (!mermaidInitialized) { + mermaidInitialized = true + mermaid.initialize({ startOnLoad: false, flowchart: { curve: "natural" } }) + } + + mermaid.run({ + querySelector, + }) +} const rules: Renderer.RenderRuleRecord = { table_open: () =>