From c07964844d76e5d4581a5e86b1eb7dd0e2aed433 Mon Sep 17 00:00:00 2001
From: Julien Calixte <julienc@bam.tech>
Date: Sat, 12 Jul 2025 22:31:06 +0200
Subject: [PATCH] perf: jit initialize mermaid

---
 src/components/StackedNote.vue |  6 ++----
 src/hooks/useMarkdown.hook.ts  | 13 ++++++++++++-
 2 files changed, 14 insertions(+), 5 deletions(-)

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: () =>