refactor(mermaid): performance optimization and support pan and zoom etc. (#737)

* perf(mermaid): optimize rendering by deferring non-critical tasks and enhancing viewport observation

* feat(mermaid): add panzoom and download svg actions for mermaid

* feat(mermaid): enhance diagram controls and add fullscreen action for code tabs

* feat(i18n): update translation keys for diagram and tab actions in multiple languages

* fix(mermaid): move mermaid-neutral inside diagram-container in wrapper mode

Agent-Logs-Url: https://github.com/hugo-fixit/FixIt/sessions/e79e837e-be0b-445c-8bd3-8c03cdce2651

Co-authored-by: Lruihao <33419593+Lruihao@users.noreply.github.com>

* fix(mermaid): update download filename for SVG export in diagram controls

* refactor(mermaid): refactor rendering logic and enhance task queue for improved performance

---------

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>

i18n/de.toml

@@ -105,8 +105,9 @@ toggleLineNumbers = "Zeilennummern umschalten"
 toggleLineWrap = "Zeilenumbruch umschalten"
 toggleCodeEditable = "Codeblock editierbar umschalten"
 downloadCode = "Code herunterladen"
-toggleCodeFullscreen = "Codeblock-Vollbild umschalten"
 expandCode = "Codeblock erweitern oder reduzieren"
+fullscreen = "Vollbild"
+exitFullscreen = "Vollbild verlassen"
 cookieconsentMessage = "Diese Website verwendet Cookies, um Ihre Erfahrung zu verbessern."
 cookieconsentDismiss = "Zustimmen"
 cookieconsentLink = "Erfahren Sie mehr"
@@ -236,3 +237,17 @@ changed = "GEÄNDERT"
 deleted = "GELÖSCHT"
 deprecated = "VERALTET"
 # === shortcodes/version.html ===
+
+# === diagram actions ===
+[diagram]
+zoomIn = "Vergrößern"
+zoomOut = "Verkleinern"
+reset = "Zurücksetzen"
+download = "SVG herunterladen"
+# === diagram actions ===
+
+# === tabs related ===
+[tabs]
+diagram = "Diagramm"
+code = "Code"
+# === tabs related ===

i18n/en.toml

@@ -105,8 +105,9 @@ toggleLineNumbers = "Toggle line numbers"
 toggleLineWrap = "Toggle code wrap"
 toggleCodeEditable = "Toggle code block editable"
 downloadCode = "Download code"
-toggleCodeFullscreen = "Toggle code block fullscreen"
 expandCode = "Expand or collapse code block"
+fullscreen = "Fullscreen"
+exitFullscreen = "Exit fullscreen"
 cookieconsentMessage = "This website uses Cookies to improve your experience."
 cookieconsentDismiss = "Got it!"
 cookieconsentLink = "Learn more"
@@ -236,3 +237,17 @@ changed = "CHANGED"
 deleted = "DELETED"
 deprecated = "DEPRECATED"
 # === shortcodes/version.html ===
+
+# === diagram actions ===
+[diagram]
+zoomIn = "Zoom in"
+zoomOut = "Zoom out"
+reset = "Reset"
+download = "Download SVG"
+# === diagram actions ===
+
+# === tabs related ===
+[tabs]
+diagram = "Diagram"
+code = "Code"
+# === tabs related ===

i18n/es.toml

@@ -105,8 +105,9 @@ toggleLineNumbers = "Alternar números de línea"
 toggleLineWrap = "Alternar ajuste de línea"
 toggleCodeEditable = "Alternar bloque de código editable"
 downloadCode = "Descargar código"
-toggleCodeFullscreen = "Alternar pantalla completa del bloque de código"
 expandCode = "Expandir o contraer bloque de código"
+fullscreen = "Pantalla completa"
+exitFullscreen = "Salir de pantalla completa"
 cookieconsentMessage = "Este sitio web utiliza Cookies para mejorar su experiencia."
 cookieconsentDismiss = "De acuerdo"
 cookieconsentLink = "Aprende más"
@@ -236,3 +237,17 @@ changed = "MODIFICADO"
 deleted = "ELIMINADO"
 deprecated = "OBSOLETO"
 # === shortcodes/version.html ===
+
+# === diagram actions ===
+[diagram]
+zoomIn = "Acercar"
+zoomOut = "Alejar"
+reset = "Restablecer"
+download = "Descargar SVG"
+# === diagram actions ===
+
+# === tabs related ===
+[tabs]
+diagram = "Diagrama"
+code = "Código"
+# === tabs related ===

i18n/fr.toml

@@ -105,8 +105,9 @@ toggleLineNumbers = "Basculer les numéros de ligne"
 toggleLineWrap = "Basculer le retour à la ligne"
 toggleCodeEditable = "Basculer le bloc de code modifiable"
 downloadCode = "Télécharger le code"
-toggleCodeFullscreen = "Basculer le plein écran du bloc de code"
 expandCode = "Développer ou réduire le bloc de code"
+fullscreen = "Plein écran"
+exitFullscreen = "Quitter le plein écran"
 cookieconsentMessage = "Ce site Web utilise des Cookies pour améliorer votre expérience."
 cookieconsentDismiss = "J'ai compris !"
 cookieconsentLink = "En apprendre plus"
@@ -236,3 +237,17 @@ changed = "MODIFIÉ"
 deleted = "SUPPRIMÉ"
 deprecated = "OBSOLÈTE"
 # === shortcodes/version.html ===
+
+# === diagram actions ===
+[diagram]
+zoomIn = "Zoom avant"
+zoomOut = "Zoom arrière"
+reset = "Réinitialiser"
+download = "Télécharger le SVG"
+# === diagram actions ===
+
+# === tabs related ===
+[tabs]
+diagram = "Diagramme"
+code = "Code"
+# === tabs related ===

i18n/hi.toml

@@ -106,8 +106,9 @@ toggleLineNumbers = "लाइन नंबर टॉगल करें"
 toggleLineWrap = "लाइन रैप टॉगल करें"
 toggleCodeEditable = "कोड ब्लॉक संपादन योग्य टॉगल करें"
 downloadCode = "कोड डाउनलोड करें"
-toggleCodeFullscreen = "कोड ब्लॉक फ़ुलस्क्रीन टॉगल करें"
 expandCode = "कोड ब्लॉक का विस्तार या संकुचित करें"
+fullscreen = "पूर्ण स्क्रीन"
+exitFullscreen = "पूर्ण स्क्रीन से बाहर निकलें"
 cookieconsentMessage = "यह वेबसाइट आपके अनुभव को बेहतर बनाने के लिए कुकीज़ का उपयोग करती है।"
 cookieconsentDismiss = "समझ गया!"
 cookieconsentLink = "और अधिक जानें"
@@ -237,3 +238,17 @@ changed = "बदला हुआ"
 deleted = "हटाए गए"
 deprecated = "अप्रचलित"
 # === shortcodes/version.html ===
+
+# === diagram actions ===
+[diagram]
+zoomIn = "ज़ूम इन"
+zoomOut = "ज़ूम आउट"
+reset = "रीसेट"
+download = "SVG डाउनलोड करें"
+# === diagram actions ===
+
+# === tabs related ===
+[tabs]
+diagram = "आरेख"
+code = "कोड"
+# === tabs related ===

i18n/it.toml

@@ -105,8 +105,9 @@ toggleLineNumbers = "Attiva/disattiva i numeri di linea"
 toggleLineWrap = "Attiva/disattiva il ritorno a capo del codice"
 toggleCodeEditable = "Attiva/disattiva la modifica del blocco di codice"
 downloadCode = "Scarica codice"
-toggleCodeFullscreen = "Attiva/disattiva schermo intero del blocco di codice"
 expandCode = "Espandi o riduci il blocco di codice"
+fullscreen = "Schermo intero"
+exitFullscreen = "Esci da schermo intero"
 cookieconsentMessage = "Questo sito Web utilizza i Cookies per migliorare la tua esperienza."
 cookieconsentDismiss = "Essere d'accordo"
 cookieconsentLink = "Per saperne di più"
@@ -236,3 +237,17 @@ changed = "CAMBIATO"
 deleted = "CANCELLATO"
 deprecated = "DEPRECATO"
 # === shortcodes/version.html ===
+
+# === diagram actions ===
+[diagram]
+zoomIn = "Zoom avanti"
+zoomOut = "Zoom indietro"
+reset = "Reimposta"
+download = "Scarica SVG"
+# === diagram actions ===
+
+# === tabs related ===
+[tabs]
+diagram = "Diagramma"
+code = "Codice"
+# === tabs related ===

i18n/ja.toml

@@ -103,8 +103,9 @@ toggleLineNumbers = "行番号の切り替え"
 toggleLineWrap = "自動折り返しの切り替え"
 toggleCodeEditable = "コードブロックの編集切り替え"
 downloadCode = "コードをダウンロード"
-toggleCodeFullscreen = "コードブロックの全画面表示を切り替え"
 expandCode = "コードブロックの展開/折りたたみ"
+fullscreen = "全画面"
+exitFullscreen = "全画面を終了"
 cookieconsentMessage = "このウェブサイトはクッキーを使用して体験を向上させます。"
 cookieconsentDismiss = "同意する"
 cookieconsentLink = "詳細はこちら"
@@ -232,3 +233,17 @@ changed = "変更"
 deleted = "削除"
 deprecated = "非推奨"
 # === shortcodes/version.html ===
+
+# === diagram actions ===
+[diagram]
+zoomIn = "拡大"
+zoomOut = "縮小"
+reset = "リセット"
+download = "SVG をダウンロード"
+# === diagram actions ===
+
+# === tabs related ===
+[tabs]
+diagram = "図"
+code = "コード"
+# === tabs related ===

i18n/ko.toml

@@ -103,8 +103,9 @@ toggleLineNumbers = "줄 번호 전환"
 toggleLineWrap = "자동 줄 바꿈 전환"
 toggleCodeEditable = "코드 블록 편집 전환"
 downloadCode = "코드 다운로드"
-toggleCodeFullscreen = "코드 블록 전체 화면 전환"
 expandCode = "코드 블록 확장/축소"
+fullscreen = "전체 화면"
+exitFullscreen = "전체 화면 종료"
 cookieconsentMessage = "이 웹사이트는 쿠키를 사용하여 경험을 향상시킵니다."
 cookieconsentDismiss = "동의"
 cookieconsentLink = "자세히 알아보기"
@@ -232,3 +233,17 @@ changed = "변경됨"
 deleted = "삭제됨"
 deprecated = "더 이상 사용되지 않음"
 # === shortcodes/version.html ===
+
+# === diagram actions ===
+[diagram]
+zoomIn = "확대"
+zoomOut = "축소"
+reset = "재설정"
+download = "SVG 다운로드"
+# === diagram actions ===
+
+# === tabs related ===
+[tabs]
+diagram = "다이어그램"
+code = "코드"
+# === tabs related ===

i18n/pl.toml

@@ -105,8 +105,9 @@ toggleLineNumbers = "Przełącz numery linii"
 toggleLineWrap = "Przełącz zawijanie linii"
 toggleCodeEditable = "Przełącz edytowalny blok kodu"
 downloadCode = "Pobierz kod"
-toggleCodeFullscreen = "Przełącz pełny ekran bloku kodu"
 expandCode = "Rozwiń lub zwiń blok kodu"
+fullscreen = "Pełny ekran"
+exitFullscreen = "Wyjdź z pełnego ekranu"
 cookieconsentMessage = "Ta strona korzysta z plików Cookies, aby poprawić komfort użytkowania."
 cookieconsentDismiss = "Zgodzić się"
 cookieconsentLink = "Ucz się więcej"
@@ -236,3 +237,17 @@ changed = "Zmieniono"
 deleted = "Usunięte"
 deprecated = "Przestarzałe"
 # === shortcodes/version.html ===
+
+# === diagram actions ===
+[diagram]
+zoomIn = "Powiększ"
+zoomOut = "Pomniejsz"
+reset = "Resetuj"
+download = "Pobierz SVG"
+# === diagram actions ===
+
+# === tabs related ===
+[tabs]
+diagram = "Diagram"
+code = "Kod"
+# === tabs related ===

i18n/pt-BR.toml

@@ -106,8 +106,9 @@ toggleLineNumbers = "Alternar números de linha"
 toggleLineWrap = "Alternar quebra de linha"
 toggleCodeEditable = "Alternar bloco de código editável"
 downloadCode = "Baixar código"
-toggleCodeFullscreen = "Alternar tela cheia do bloco de código"
 expandCode = "Expandir ou recolher bloco de código"
+fullscreen = "Tela cheia"
+exitFullscreen = "Sair da tela cheia"
 cookieconsentMessage = "Este site usa Cookies para melhorar sua experiência."
 cookieconsentDismiss = "Aceitar"
 cookieconsentLink = "Saber mais"
@@ -237,3 +238,17 @@ changed = "ALTERADO"
 deleted = "EXCLUÍDO"
 deprecated = "OBSOLETO"
 # === shortcodes/version.html ===
+
+# === diagram actions ===
+[diagram]
+zoomIn = "Ampliar"
+zoomOut = "Reduzir"
+reset = "Redefinir"
+download = "Baixar SVG"
+# === diagram actions ===
+
+# === tabs related ===
+[tabs]
+diagram = "Diagrama"
+code = "Código"
+# === tabs related ===

i18n/ro.toml

@@ -105,8 +105,9 @@ toggleLineNumbers = "Comută numerele de linie"
 toggleLineWrap = "Comută înfășurarea liniei"
 toggleCodeEditable = "Comută blocul de cod editabil"
 downloadCode = "Descarcă codul"
-toggleCodeFullscreen = "Comută ecran complet pentru blocul de cod"
 expandCode = "Extinde sau restrânge blocul de cod"
+fullscreen = "Ecran complet"
+exitFullscreen = "Ieși din ecran complet"
 cookieconsentMessage = "Acest site web utilizează Cookies pentru a vă îmbunătăți experiența."
 cookieconsentDismiss = "De acord"
 cookieconsentLink = "Aflați mai multe"
@@ -236,3 +237,17 @@ changed = "SCHIMBAT"
 deleted = "ȘTERS"
 deprecated = "DEPRECIAȚI"
 # === shortcodes/version.html ===
+
+# === diagram actions ===
+[diagram]
+zoomIn = "Mărește"
+zoomOut = "Micșorează"
+reset = "Resetează"
+download = "Descarcă SVG"
+# === diagram actions ===
+
+# === tabs related ===
+[tabs]
+diagram = "Diagramă"
+code = "Cod"
+# === tabs related ===

i18n/ru.toml

@@ -105,8 +105,9 @@ toggleLineNumbers = "Переключить номера строк"
 toggleLineWrap = "Переключить перенос строк"
 toggleCodeEditable = "Переключить редактируемый блок кода"
 downloadCode = "Скачать код"
-toggleCodeFullscreen = "Переключить полноэкранный режим блока кода"
 expandCode = "Развернуть или свернуть блок кода"
+fullscreen = "Полный экран"
+exitFullscreen = "Выйти из полного экрана"
 cookieconsentMessage = "Этот сайт использует Cookies для улучшения вашего опыта."
 cookieconsentDismiss = "Согласен"
 cookieconsentLink = "Учить больше"
@@ -236,3 +237,17 @@ changed = "ИЗМЕНЕН"
 deleted = "УДАЛЕН"
 deprecated = "УСТАРЕЛ"
 # === shortcodes/version.html ===
+
+# === diagram actions ===
+[diagram]
+zoomIn = "Увеличить"
+zoomOut = "Уменьшить"
+reset = "Сбросить"
+download = "Скачать SVG"
+# === diagram actions ===
+
+# === tabs related ===
+[tabs]
+diagram = "Диаграмма"
+code = "Код"
+# === tabs related ===

i18n/sr.toml

@@ -105,8 +105,9 @@ toggleLineNumbers = "Прекидач за бројеве линија"
 toggleLineWrap = "Прекидач за оматање линија"
 toggleCodeEditable = "Пребаци уређивање блока кода"
 downloadCode = "Преузми код"
-toggleCodeFullscreen = "Пребаци цео екран блока кода"
 expandCode = "Прошири или смањи блок кода"
+fullscreen = "Цео екран"
+exitFullscreen = "Изађи из целог екрана"
 cookieconsentMessage = "Ова веб локација користи Cookies да би побољшала ваше искуство."
 cookieconsentDismiss = "Договорити се"
 cookieconsentLink = "Сазнајте више"
@@ -236,3 +237,17 @@ changed = "ПРОМЕЊЕНО"
 deleted = "ОБРИСАНО"
 deprecated = "ЗАСТАРЕЛО"
 # === shortcodes/version.html ===
+
+# === diagram actions ===
+[diagram]
+zoomIn = "Увећај"
+zoomOut = "Умањи"
+reset = "Ресетуј"
+download = "Преузми SVG"
+# === diagram actions ===
+
+# === tabs related ===
+[tabs]
+diagram = "Дијаграм"
+code = "Код"
+# === tabs related ===

i18n/vi.toml

@@ -104,8 +104,9 @@ toggleLineNumbers = "Chuyển đổi số dòng"
 toggleLineWrap = "Chuyển đổi xuống dòng"
 toggleCodeEditable = "Chuyển đổi khối mã có thể chỉnh sửa"
 downloadCode = "Tải mã"
-toggleCodeFullscreen = "Chuyển đổi toàn màn hình khối mã"
 expandCode = "Mở rộng hoặc thu gọn khối mã"
+fullscreen = "Toàn màn hình"
+exitFullscreen = "Thoát toàn màn hình"
 cookieconsentMessage = "Trang web này sử dụng Cookies để cải thiện trải nghiệm của bạn."
 cookieconsentDismiss = "Đã hiểu!"
 cookieconsentLink = "Tìm hiểu thêm"
@@ -235,3 +236,17 @@ changed = "THAY ĐỔI"
 deleted = "XOÁ"
 deprecated = "KHÔNG CÒN SỬ DỤNG"
 # === shortcodes/version.html ===
+
+# === diagram actions ===
+[diagram]
+zoomIn = "Phóng to"
+zoomOut = "Thu nhỏ"
+reset = "Đặt lại"
+download = "Tải SVG"
+# === diagram actions ===
+
+# === tabs related ===
+[tabs]
+diagram = "Sơ đồ"
+code = "Mã"
+# === tabs related ===

i18n/zh-CN.toml

@@ -103,8 +103,9 @@ toggleLineNumbers = "切换行号"
 toggleLineWrap = "切换自动换行"
 toggleCodeEditable = "切换可编辑代码块"
 downloadCode = "下载代码"
-toggleCodeFullscreen = "切换代码块全屏"
 expandCode = "展开或折叠代码块"
+fullscreen = "全屏"
+exitFullscreen = "退出全屏"
 cookieconsentMessage = "本网站使用 Cookies 来改善你的浏览体验。"
 cookieconsentDismiss = "同意"
 cookieconsentLink = "了解更多"
@@ -232,3 +233,17 @@ changed = "更改"
 deleted = "删除"
 deprecated = "弃用"
 # === shortcodes/version.html ===
+
+# === diagram actions ===
+[diagram]
+zoomIn = "放大"
+zoomOut = "缩小"
+reset = "重置"
+download = "下载 SVG"
+# === diagram actions ===
+
+# === tabs related ===
+[tabs]
+diagram = "图表"
+code = "代码"
+# === tabs related ===

i18n/zh-TW.toml

@@ -103,8 +103,9 @@ toggleLineNumbers = "切換行號"
 toggleLineWrap = "切換自動換行"
 toggleCodeEditable = "切換可編輯程式碼區塊"
 downloadCode = "下載程式碼"
-toggleCodeFullscreen = "切換程式碼區塊全螢幕"
 expandCode = "展開或摺疊程式碼區塊"
+fullscreen = "全螢幕"
+exitFullscreen = "退出全螢幕"
 cookieconsentMessage = "本網站使用 Cookies 來改善你的流覽體驗。"
 cookieconsentDismiss = "同意"
 cookieconsentLink = "瞭解更多"
@@ -232,3 +233,17 @@ changed = "更改"
 deleted = "刪除"
 deprecated = "棄用"
 # === shortcodes/version.html ===
+
+# === diagram actions ===
+[diagram]
+zoomIn = "放大"
+zoomOut = "縮小"
+reset = "重置"
+download = "下載 SVG"
+# === diagram actions ===
+
+# === tabs related ===
+[tabs]
+diagram = "圖表"
+code = "程式碼"
+# === tabs related ===