From cb2f31a72c36e8b518b21851e5981554b91565a4 Mon Sep 17 00:00:00 2001
From: irof <irof.ocean@gmail.com>
Date: Sun, 8 Feb 2026 19:11:15 +0900
Subject: [PATCH] =?UTF-8?q?fix(usecase):=20Mermaid=E5=9B=B3=E3=82=92?=
 =?UTF-8?q?=E9=81=85=E5=BB=B6=E6=8F=8F=E7=94=BB=E3=81=AB=E5=A4=89=E6=9B=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

対象のシーケンスが多い場合に表示に時間がかかるため

JIG-DOCUMENT: UsecaseSummary
---
 .../main/resources/templates/assets/jig.js    | 34 +++++++++++++++++++
 1 file changed, 34 insertions(+)

diff --git a/jig-core/src/main/resources/templates/assets/jig.js b/jig-core/src/main/resources/templates/assets/jig.js
index 76c63edbc..2c9e30c8b 100644
--- a/jig-core/src/main/resources/templates/assets/jig.js
+++ b/jig-core/src/main/resources/templates/assets/jig.js
@@ -122,3 +122,37 @@ document.addEventListener("DOMContentLoaded", function () {
         setupSortableTables();
     }
 });
+
+function setupLazyMermaidRender() {
+    if (!window.mermaid) return;
+    if (document.body.classList.contains("package-list")) return;
+
+    const diagrams = Array.from(document.querySelectorAll(".mermaid"));
+    if (diagrams.length === 0) return;
+
+    mermaid.initialize({startOnLoad: false, securityLevel: "loose"});
+
+    const renderDiagram = (diagram) => {
+        if (!diagram || diagram.getAttribute("data-processed") === "true") return;
+        mermaid.run({nodes: [diagram]});
+    };
+
+    if (!("IntersectionObserver" in window)) {
+        diagrams.forEach(renderDiagram);
+        return;
+    }
+
+    const observer = new IntersectionObserver((entries, currentObserver) => {
+        entries.forEach(entry => {
+            if (!entry.isIntersecting) return;
+            renderDiagram(entry.target);
+            currentObserver.unobserve(entry.target);
+        });
+    }, {rootMargin: "200px 0px"});
+
+    diagrams.forEach(diagram => observer.observe(diagram));
+}
+
+document.addEventListener("DOMContentLoaded", function () {
+    setupLazyMermaidRender();
+});