Love this idea! Having issues, though.

[jarodtaylor]

First of all, thank you for creating this! Mermaid diagrams are such a mess on docusaurus when they're large and complicated.

Additional Context: I'm on the latest version of Docusaurus right now (3.5.2).

I did have one issue when trying to install it. I couldn't install it with yarn or npm using yarn add docusaurus-plugin-panzoom or npm install docusaurus-plugin-panzoom. It couldn't find it in the registry, so I had to use yarn add @actinc/docusaurus-plugin-panzoom. So, you probably just need to update the README.

It would be really helpful to throw some more documentation in the README on how you might use this in Docusaurus. I know you link to the Panzoom package, but it would be helpful showing how we'd use your plugin in a Docusaurus site (e.g. for Mermaid Diagrams, etc) and in our .mdor .mdxfiles.

Second issue, I'm having now is it failing when I kick off yarn start. No errors in my terminal but when you view localhost:3000 you will get this in your Chrome console:

PanZoom.js:1 Uncaught TypeError: Cannot read properties of undefined (reading 'selectors')
    at eval (PanZoom.js:1:1)
    at ./node_modules/@actinc/docusaurus-plugin-panzoom/dist/PanZoom.js (main.js:55:1)
    at __webpack_require__ (runtime~main.js:34:32)
    at fn (runtime~main.js:334:21)
    at eval (client-modules.js:1:1)
    at ./.docusaurus/client-modules.js (main.js:31:1)
    at __webpack_require__ (runtime~main.js:34:32)
    at fn (runtime~main.js:334:21)
    at eval (App.js:7:83)
    at ./node_modules/@docusaurus/core/lib/client/App.js (main.js:63:1)

I haven't done anything other than install the package and add the plugin to my docusaurus.config.js.

plugins: [
    require.resolve("docusaurus-lunr-search"),
    "@actinc/docusaurus-plugin-panzoom",
  ],

[jarodtaylor]

Let me know if I can help in any way. I have seen tons of StackOverflow questions and other people out there wanting to be able to pan/zoom their Mermaid diagrams in Docusaurus.

[sguilly]

try to add zoom in themeConfig in docusaurus.config.ts

themeConfig: { zoom: {},

works for me :)

[philippnagel]

try to add zoom in themeConfig in docusaurus.config.ts

themeConfig: { zoom: {},

works for me :)

This exactly is what I did additionally to get it working:

zoom: { selectors: ['.panzoom-mermaid'], // Your specific selectors for elements to apply panzoom wrap: true, // Optional: whether to wrap elements in a div with overflow hidden timeout: 1000, // Optional: delay before initializing panzoom, in milliseconds options: { maxScale: 3, // Maximum zoom scale minScale: 1, // Minimum zoom scale contain: 'inside', // How the zoom should be contained }, },