blogs/FixIt
1
0
Fork 0
mirror of https://github.com/hugo-fixit/FixIt.git synced 2026-08-24 15:28:57 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
* 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>
This commit is contained in:
Cell
2026-04-29 16:42:15 +08:00
committed by GitHub
parent 5fe681ccc5
commit e68d10d7d9
34 changed files with 1352 additions and 177 deletions
Download Patch File Download Diff File Expand all files Collapse all files
layouts/_partials/plugin/mermaid.html
+55 -8
View File
@@ -1,9 +1,56 @@
{{- /* Mermaid support for code fences extended and shortcodes. */ -}}
<div class="diagram-container">
<pre class="mermaid">{{ .Inner | safeHTML }}</pre>
<pre class="mermaid-dark">{{ .Inner | safeHTML }}</pre>
<pre class="mermaid-neutral">{{ .Inner | safeHTML }}</pre>
{{- dict "Label" "Copy Mermaid code" | partial "plugin/diagram-copy-btn.html" -}}
<template><pre>{{ .Inner | safeHTML }}</pre></template>
</div>
{{- /* EOF */ -}}
{{- $code := strings.TrimSpace .Inner -}}
{{- $wrapped := .Options.wrapper | default site.Params.mermaid.wrapper -}}
{{- if $wrapped -}}
{{- $labelDiagram := T "tabs.diagram" -}}
{{- $labelCode := T "tabs.code" -}}
{{- $labelZoomIn := T "diagram.zoomIn" -}}
{{- $labelZoomOut := T "diagram.zoomOut" -}}
{{- $labelReset := T "diagram.reset" -}}
{{- $labelDownload := T "diagram.download" -}}
{{- $filename := .Options.filename | default "mermaid.mmd" -}}
{{- $codeAttrs := printf `{copyable=true, fullscreen=true, filename="%s", class="diagram-code"}` $filename -}}
{{- $codeFence := printf "```text %s\n%s\n```" $codeAttrs $code -}}
<div class="code-tabs diagram-tabs" data-diagram="mermaid">
<div class="tabs-header">
<div class="tabs-items">
<span class="tab-item active" data-tab="diagram" title="{{ $labelDiagram }}">{{ $labelDiagram }}</span>
<span class="tab-item" data-tab="code" title="{{ $labelCode }}">{{ $labelCode }}</span>
</div>
<div class="tabs-actions">
<button type="button" class="action-btn diagram-zoom-out-btn" aria-label="{{ $labelZoomOut }}" title="{{ $labelZoomOut }}">
{{- dict "Class" "fa-solid fa-magnifying-glass-minus" | partial "plugin/icon.html" -}}
</button>
<button type="button" class="action-btn diagram-zoom-in-btn" aria-label="{{ $labelZoomIn }}" title="{{ $labelZoomIn }}">
{{- dict "Class" "fa-solid fa-magnifying-glass-plus" | partial "plugin/icon.html" -}}
</button>
<button type="button" class="action-btn diagram-reset-btn" aria-label="{{ $labelReset }}" title="{{ $labelReset }}">
{{- dict "Class" "fa-solid fa-arrows-rotate" | partial "plugin/icon.html" -}}
</button>
<button type="button" class="action-btn diagram-download-btn" aria-label="{{ $labelDownload }}" title="{{ $labelDownload }}">
{{- dict "Class" "fa-solid fa-download" | partial "plugin/icon.html" -}}
</button>
</div>
</div>
<div class="tabs-content">
<div class="code-block diagram-view active" data-filename="{{ $filename }}">
<div class="diagram-container">
<pre class="mermaid">{{ $code | safeHTML }}</pre>
<pre class="mermaid-dark">{{ $code | safeHTML }}</pre>
<pre class="mermaid-neutral">{{ $code | safeHTML }}</pre>
</div>
</div>
{{- $codeFence | page.RenderString (dict "display" "block") -}}
</div>
</div>
{{- else -}}
<div class="diagram-container">
<pre class="mermaid">{{ $code | safeHTML }}</pre>
<pre class="mermaid-dark">{{ $code | safeHTML }}</pre>
<pre class="mermaid-neutral">{{ $code | safeHTML }}</pre>
{{- dict "Label" "Copy Mermaid code" | partial "plugin/diagram-copy-btn.html" -}}
<template><pre>{{ $code | safeHTML }}</pre></template>
</div>
{{- end -}}