Panzoom for MkDocs

This plugin makes use of the panzoom (LICENCE) library by Andrei Kashcha

Live Demo

Setup

pip install mkdocs-panzoom-plugin

Add it to your mkdocs.yml:

plugins:
  - search
  - panzoom

Warning

Make sure to define the site_url otherwise it won't work!

Example:

site_url: https://playg0n.github.io/mkdocs-panzoom/

Usage

Examples and usage are available in the docs.

Config

Selectors

Mermaid and D2 are included by default, but you can add any arbitrary selector or exclude the default ones. To enable images add the img tag like below.

plugins:
  - panzoom:
      include_selectors:
        - .myClass # class in html
        - "#myId" # id in html
        - "img" # tag in html
      exclude_selectors:
        - ".mermaid"
        - ".d2"

Hint

This makes the hint on how to use it permanently visible.

plugins:
  - panzoom:
      always_show_hint: true # default false

This changes the location of the hint

plugins:
   - panzoom:
      hint_location: "top" # default bottom

Use different key

Options for activation key are:

• alt
• ctrl
• shift
• none

plugins:
  - panzoom:
      key: "ctrl" # default alt

Set Initial Zoom Level

This sets the initial zoom level for all diagrams and images.

plugins:
  - panzoom:
      initial_zoom_level: 1.5 # default 1.0

Exclude Pages

plugins:
  - panzoom:
      exclude:
        - Path/to/page.md

Enable Fullscreen

plugins:
  - panzoom:
      full_screen: True # default False

Automatic Zoom State Persistence

The plugin automatically saves the zoom level and pan position for each diagram to your browser's localStorage. This means:

• Persistent Settings: Your preferred zoom level and position for each diagram are remembered across page reloads
• Per-Diagram Memory: Each diagram on a page maintains its own zoom state independently
• Automatic Cleanup: Saved states older than 30 days are automatically cleared
• Reset Functionality: Using the reset button clears the saved state for that diagram and returns to the configured initial zoom level

This feature works automatically - no additional configuration is required. The zoom states are stored locally in your browser and are not shared between different browsers or devices.

Star History

Credits

The structure and some parts are from the enumerate-headings-plugin (LICENCE)