# Panzoom for MkDocs
This plugin makes use of the [panzoom](https://github.com/anvaka/panzoom) ([LICENCE](./mkdocs_panzoom_plugin/panzoom/LICENCE)) library by [Andrei Kashcha](https://github.com/anvaka)
> [Live Demo](https://playg0n.github.io/mkdocs-panzoom/)
## Setup
`pip install mkdocs-panzoom-plugin`
Add it to your `mkdocs.yml`:
```yml
plugins:
- search
- panzoom
```
> [!WARNING]
>Make sure to define the `site_url` otherwise it won't work!
>
>**Example**:
>
>```yaml
>site_url: https://playg0n.github.io/mkdocs-panzoom/
>```
## Usage
Examples and usage are available in the [docs](https://playg0n.github.io/mkdocs-panzoom/).
## 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.
```yaml
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.
```yaml
plugins:
- panzoom:
always_show_hint: true # default false
```
This changes the location of the hint
```yaml
plugins:
- panzoom:
hint_location: "top" # default bottom
```
### Use different key
Options for activation key are:
- alt
- ctrl
- shift
- none
```yaml
plugins:
- panzoom:
key: "ctrl" # default alt
```
### Set Initial Zoom Level
This sets the initial zoom level for all diagrams and images.
```yaml
plugins:
- panzoom:
initial_zoom_level: 1.5 # default 1.0
```
### Exclude Pages
```yml
plugins:
- panzoom:
exclude:
- Path/to/page.md
```
### Enable Fullscreen
```yml
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
[](https://www.star-history.com/#PLAYG0N/mkdocs-panzoom&Date)
## Credits
The structure and some parts are from the [enumerate-headings-plugin](https://github.com/timvink/mkdocs-enumerate-headings-plugin) ([LICENCE](./licences/enumerate-headings-plugin))
Raw data
{
"_id": null,
"home_page": "https://github.com/PLAYG0N/mkdocs-panzoom.git",
"name": "mkdocs-panzoom-plugin",
"maintainer": null,
"docs_url": null,
"requires_python": ">=3.7",
"maintainer_email": null,
"keywords": "mkdocs zoom pan plugin mermaid images",
"author": "PLAYG0N",
"author_email": "playg0nofficial@gmail.com",
"download_url": "https://files.pythonhosted.org/packages/89/5a/601d022eebad1d0111300c5f29b55544f85d0402a97a72299f19c7667543/mkdocs_panzoom_plugin-0.3.0.tar.gz",
"platform": null,
"description": "# Panzoom for MkDocs\n\nThis plugin makes use of the [panzoom](https://github.com/anvaka/panzoom) ([LICENCE](./mkdocs_panzoom_plugin/panzoom/LICENCE)) library by [Andrei Kashcha](https://github.com/anvaka)\n\n> [Live Demo](https://playg0n.github.io/mkdocs-panzoom/)\n\n## Setup\n\n`pip install mkdocs-panzoom-plugin`\n\nAdd it to your `mkdocs.yml`:\n\n```yml\nplugins:\n - search\n - panzoom\n\n```\n\n> [!WARNING]\n>Make sure to define the `site_url` otherwise it won't work!\n>\n>**Example**:\n>\n>```yaml\n>site_url: https://playg0n.github.io/mkdocs-panzoom/\n>```\n\n## Usage\n\nExamples and usage are available in the [docs](https://playg0n.github.io/mkdocs-panzoom/).\n\n## Config\n\n### Selectors\n\nMermaid and D2 are included by default, but you can add any arbitrary selector or exclude the default ones.\nTo enable images add the `img` tag like below.\n\n```yaml\nplugins:\n - panzoom:\n include_selectors:\n - .myClass # class in html\n - \"#myId\" # id in html\n - \"img\" # tag in html\n exclude_selectors:\n - \".mermaid\"\n - \".d2\"\n```\n\n### Hint\n\nThis makes the hint on how to use it permanently visible.\n\n```yaml\nplugins:\n - panzoom:\n always_show_hint: true # default false\n```\n\nThis changes the location of the hint\n\n```yaml\nplugins:\n - panzoom:\n hint_location: \"top\" # default bottom\n```\n\n### Use different key\n\nOptions for activation key are:\n\n- alt\n- ctrl\n- shift\n- none\n\n```yaml\nplugins:\n - panzoom:\n key: \"ctrl\" # default alt\n```\n\n### Set Initial Zoom Level\n\nThis sets the initial zoom level for all diagrams and images.\n\n```yaml\nplugins:\n - panzoom:\n initial_zoom_level: 1.5 # default 1.0\n```\n\n### Exclude Pages\n\n```yml\nplugins:\n - panzoom:\n exclude:\n - Path/to/page.md\n```\n\n### Enable Fullscreen\n\n```yml\nplugins:\n - panzoom:\n full_screen: True # default False\n```\n\n## Automatic Zoom State Persistence\n\nThe plugin automatically saves the zoom level and pan position for each diagram to your browser's localStorage. This means:\n\n- **Persistent Settings**: Your preferred zoom level and position for each diagram are remembered across page reloads\n- **Per-Diagram Memory**: Each diagram on a page maintains its own zoom state independently\n- **Automatic Cleanup**: Saved states older than 30 days are automatically cleared\n- **Reset Functionality**: Using the reset button clears the saved state for that diagram and returns to the configured initial zoom level\n\nThis 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.\n\n## Star History\n\n[](https://www.star-history.com/#PLAYG0N/mkdocs-panzoom&Date)\n\n## Credits\n\nThe structure and some parts are from the [enumerate-headings-plugin](https://github.com/timvink/mkdocs-enumerate-headings-plugin) ([LICENCE](./licences/enumerate-headings-plugin))\n",
"bugtrack_url": null,
"license": "MIT",
"summary": "MkDocs Plugin to enable pan & zoom on images and mermaid diagrams",
"version": "0.3.0",
"project_urls": {
"Homepage": "https://github.com/PLAYG0N/mkdocs-panzoom.git"
},
"split_keywords": [
"mkdocs",
"zoom",
"pan",
"plugin",
"mermaid",
"images"
],
"urls": [
{
"comment_text": null,
"digests": {
"blake2b_256": "ec57815b0d1d9138bebcb6a0623c794f75b9cf98a31cc3b943885881c8175594",
"md5": "9f98cb1f0db8edf90af4f7ccc0c9a897",
"sha256": "e8f7921903d9e3ef9746304bb29a9f90cedbb00b9892b47891c32fce08434ae8"
},
"downloads": -1,
"filename": "mkdocs_panzoom_plugin-0.3.0-py3-none-any.whl",
"has_sig": false,
"md5_digest": "9f98cb1f0db8edf90af4f7ccc0c9a897",
"packagetype": "bdist_wheel",
"python_version": "py3",
"requires_python": ">=3.7",
"size": 22059,
"upload_time": "2025-07-31T11:21:17",
"upload_time_iso_8601": "2025-07-31T11:21:17.383797Z",
"url": "https://files.pythonhosted.org/packages/ec/57/815b0d1d9138bebcb6a0623c794f75b9cf98a31cc3b943885881c8175594/mkdocs_panzoom_plugin-0.3.0-py3-none-any.whl",
"yanked": false,
"yanked_reason": null
},
{
"comment_text": null,
"digests": {
"blake2b_256": "895a601d022eebad1d0111300c5f29b55544f85d0402a97a72299f19c7667543",
"md5": "131a3a18f92ccce858be5f80717786ad",
"sha256": "a1bda63405a4566d6d7b2711a9a80fd498d081a86ef54e12718847a4630fe363"
},
"downloads": -1,
"filename": "mkdocs_panzoom_plugin-0.3.0.tar.gz",
"has_sig": false,
"md5_digest": "131a3a18f92ccce858be5f80717786ad",
"packagetype": "sdist",
"python_version": "source",
"requires_python": ">=3.7",
"size": 21862,
"upload_time": "2025-07-31T11:21:18",
"upload_time_iso_8601": "2025-07-31T11:21:18.551239Z",
"url": "https://files.pythonhosted.org/packages/89/5a/601d022eebad1d0111300c5f29b55544f85d0402a97a72299f19c7667543/mkdocs_panzoom_plugin-0.3.0.tar.gz",
"yanked": false,
"yanked_reason": null
}
],
"upload_time": "2025-07-31 11:21:18",
"github": true,
"gitlab": false,
"bitbucket": false,
"codeberg": false,
"github_user": "PLAYG0N",
"github_project": "mkdocs-panzoom",
"travis_ci": false,
"coveralls": false,
"github_actions": true,
"requirements": [
{
"name": "mkdocs",
"specs": [
[
">=",
"1.1.2"
]
]
},
{
"name": "mkdocs-material",
"specs": [
[
">=",
"9.6.7"
]
]
},
{
"name": "mkdocs-d2-plugin",
"specs": []
}
],
"lcname": "mkdocs-panzoom-plugin"
}
JSON
