Skip to content

feat: add pan/zoom for mermaid diagrams via fullscreen modal#83

Open
quodlibetor wants to merge 1 commit into
jfernandez:mainfrom
quodlibetor:bwm/add-full-screen-pan-zoom
Open

feat: add pan/zoom for mermaid diagrams via fullscreen modal#83
quodlibetor wants to merge 1 commit into
jfernandez:mainfrom
quodlibetor:bwm/add-full-screen-pan-zoom

Conversation

@quodlibetor

Copy link
Copy Markdown

Each rendered mermaid SVG gets an expand button that opens a fullscreen modal with pan/zoom (anvaka/panzoom, served at /panzoom.min.js and gated on the existing mermaid_enabled flag). Inline diagrams stay static, so the feature never hijacks page scroll; pan/zoom is only active inside the modal.

Screen.Recording.2026-05-27.at.09.44.57.mov

Vendored dependency

static/js/panzoom.min.js is anvaka/panzoom v9.4.4 (MIT), copied verbatim from the upstream release tag.

Source:

https://raw.githubusercontent.com/anvaka/panzoom/v9.4.4/dist/panzoom.min.js

Verify the vendored copy matches upstream:

diff <(curl -fsSL https://raw.githubusercontent.com/anvaka/panzoom/v9.4.4/dist/panzoom.min.js) \
     static/js/panzoom.min.js

AI Use

Claude wrote the first draft of this, but I cleaned it up and verified it looks right although I'm not a web developer so I'm not super confident in the CSS.

Happy to fix anything, or for you to just treat this as a very detailed feature request.

Each rendered mermaid SVG gets an expand button that opens a fullscreen
modal with pan/zoom (anvaka/panzoom, served at /panzoom.min.js and
gated on the existing mermaid_enabled flag). Inline diagrams stay
static, so the feature never hijacks page scroll; pan/zoom is only
active inside the modal.

## Vendored dependency

static/js/panzoom.min.js is anvaka/panzoom v9.4.4 (MIT), copied
verbatim from the upstream release tag.

Source:

    https://raw.githubusercontent.com/anvaka/panzoom/v9.4.4/dist/panzoom.min.js

Verify the vendored copy matches upstream:

    diff <(curl -fsSL https://raw.githubusercontent.com/anvaka/panzoom/v9.4.4/dist/panzoom.min.js) \
         static/js/panzoom.min.js
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant