{"id":4120,"library":"mkdocs-panzoom-plugin","title":"MkDocs PanZoom Plugin","description":"The MkDocs PanZoom Plugin is an active MkDocs plugin, currently at version 0.5.2, designed to add pan and zoom functionality to images and Mermaid/D2 diagrams within your MkDocs generated documentation. It enhances user interaction with visual content by allowing navigation and magnification, and it maintains a steady release cadence with recent updates improving performance and features.","status":"active","version":"0.5.2","language":"en","source_language":"en","source_url":"https://github.com/PLAYG0N/mkdocs-panzoom.git","tags":["mkdocs","zoom","pan","plugin","mermaid","images","documentation"],"install":[{"cmd":"pip install mkdocs-panzoom-plugin","lang":"bash","label":"Install package"}],"dependencies":[{"reason":"Core dependency for any MkDocs plugin.","package":"mkdocs","optional":false},{"reason":"Required for proper rendering and panzoom functionality of Mermaid and D2 diagrams since v0.4.0.","package":"pymdownx-superfences","optional":true}],"imports":[],"quickstart":{"code":"plugins:\n  - search\n  - panzoom:\n      # Enable pan/zoom for images\n      include_selectors:\n        - \"img\"\n      # Optional: always show the hint (default: false)\n      always_show_hint: true\n      # Optional: set initial zoom level (default: 1.0)\n      initial_zoom_level: 1.2\n      # Optional: enable fullscreen (still in development)\n      full_screen: False\n\n# Required for Mermaid/D2 diagrams with panzoom since v0.4.0\nmarkdown_extensions:\n  - pymdownx.superfences:\n      custom_fences:\n        - name: mermaid\n          class: mermaid\n          format: !!python/name:pymdownx.superfences.fence_code_format\n\nsite_url: https://example.com/your-docs/","lang":"yaml","description":"To activate the plugin, add `panzoom` to your `plugins` list in `mkdocs.yml`. For Mermaid and D2 diagrams to work correctly with pan/zoom since version 0.4.0, you must also configure `pymdownx.superfences` under `markdown_extensions` and define your `site_url`. The example demonstrates enabling pan/zoom for images, showing the hint permanently, setting an initial zoom, and configuring `pymdownx.superfences`."},"warnings":[{"fix":"Add `markdown_extensions` for `pymdownx.superfences` as shown in the quickstart, ensure `site_url` is set, and use the `pz-ignore` class for individual exclusions instead of `exclude` pages option.","message":"As of version 0.4.0, the plugin requires explicit configuration of `pymdownx.superfences` for Mermaid/D2 diagrams to work, and the `site_url` must be defined in `mkdocs.yml`. Additionally, the `exclude` (pages) configuration option was removed.","severity":"breaking","affected_versions":">=0.4.0"},{"fix":"Ensure `site_url: https://your-domain.com/your-docs/` is present and correctly configured in your `mkdocs.yml`.","message":"The `site_url` parameter in `mkdocs.yml` must be defined for the plugin to function correctly, particularly with diagram and image handling.","severity":"gotcha","affected_versions":">=0.4.0"},{"fix":"For specific item exclusion, apply the `pz-ignore` class directly to the HTML element or Markdown that generates it. E.g., `![Alt text](image.png){.pz-ignore}`.","message":"The `exclude_selectors` option in the plugin configuration is intended only to disable the *default* selectors (e.g., '.mermaid', '.d2'). To exclude a *specific item* (image or diagram) from pan/zoom, you must add the CSS class `pz-ignore` to that item in your Markdown.","severity":"gotcha","affected_versions":"All"}],"env_vars":null,"last_verified":"2026-04-11T00:00:00.000Z","next_check":"2026-07-10T00:00:00.000Z"}