{"_id":"@chadfurman/docsify-mermaid-zoom","_rev":"4-5486de3932395f4a2a2aaecb6880ef56","name":"@chadfurman/docsify-mermaid-zoom","dist-tags":{"latest":"2.0.0"},"versions":{"1.0.0":{"name":"@chadfurman/docsify-mermaid-zoom","version":"1.0.0","keywords":["docsify","docsify-plugin","mermaid","zoom","pan","fullscreen","interactive","diagrams","svg-pan-zoom"],"author":{"name":"Chad Furman"},"license":"MIT","_id":"@chadfurman/docsify-mermaid-zoom@1.0.0","maintainers":[{"name":"chadfurman","email":"chad@chadfurman.com"}],"homepage":"https://github.com/chadfurman/docsify-mermaid-zoom#readme","bugs":{"url":"https://github.com/chadfurman/docsify-mermaid-zoom/issues"},"dist":{"shasum":"5c33f70b612c8b3aa26cf297c911e580822405fa","tarball":"https://registry.npmjs.org/@chadfurman/docsify-mermaid-zoom/-/docsify-mermaid-zoom-1.0.0.tgz","fileCount":7,"integrity":"sha512-qkAyQ4RjU3olnoHHOSvq+fXBf856BnZY7M9CGYHhArdJ2W5xjUMk2TRIT3ii+ZvFKq2r3so7fa6JJxRDP8MSPQ==","signatures":[{"sig":"MEQCIEAM546rbBYg9P/YsTKtYv6fI/8gL5S/x3rpUobP1ITDAiAcOlUjafBVe4JFAXmAsj/vGQh25USVLlJyto8yxY1/GA==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":26621},"main":"dist/docsify-mermaid-zoom.js","gitHead":"5086798780ce9ab6d59d1deffc1726f902f101b3","scripts":{"build":"mkdir -p dist && cp src/docsify-mermaid-zoom.js dist/ && cp src/docsify-mermaid-zoom.css dist/","prepublishOnly":"npm run build"},"_npmUser":{"name":"chadfurman","email":"chad@chadfurman.com"},"repository":{"url":"git+https://github.com/chadfurman/docsify-mermaid-zoom.git","type":"git"},"_npmVersion":"10.9.2","description":"Interactive mermaid diagrams for docsify — zoom, pan, resize, and fullscreen","directories":{},"_nodeVersion":"23.9.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"peerDependencies":{"docsify":">=4.0.0","mermaid":">=10.0.0"},"_npmOperationalInternal":{"tmp":"tmp/docsify-mermaid-zoom_1.0.0_1776092404951_0.4536713611086738","host":"s3://npm-registry-packages-npm-production"}},"1.1.0":{"name":"@chadfurman/docsify-mermaid-zoom","version":"1.1.0","keywords":["docsify","docsify-plugin","mermaid","zoom","pan","fullscreen","interactive","diagrams","svg-pan-zoom"],"author":{"name":"Chad Furman"},"license":"MIT","_id":"@chadfurman/docsify-mermaid-zoom@1.1.0","maintainers":[{"name":"chadfurman","email":"chad@chadfurman.com"}],"homepage":"https://github.com/chadfurman/docsify-mermaid-zoom#readme","bugs":{"url":"https://github.com/chadfurman/docsify-mermaid-zoom/issues"},"dist":{"shasum":"e5d9a42700701e6b1dc5804b731dbeccc3d8828c","tarball":"https://registry.npmjs.org/@chadfurman/docsify-mermaid-zoom/-/docsify-mermaid-zoom-1.1.0.tgz","fileCount":7,"integrity":"sha512-AEYqJWWIzg3/LRWljfSw1Y9BACZbE+I7ZayYbYUutlx8en4i/tPz880Pk0AZqIr5LJis1jTvHU0eMUfUNmocVw==","signatures":[{"sig":"MEQCIG2qHI2/W8L07fn1WKkZnEKhzq5g78m31PEXeFiRWJMpAiBU1GlGMgFWGpwIC8YwxjeuspCsmVr9nOeNmzmHIhh79w==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":27535},"main":"dist/docsify-mermaid-zoom.js","gitHead":"afbd9aa458d710b07f230214f706eb674561f504","scripts":{"build":"mkdir -p dist && cp src/docsify-mermaid-zoom.js dist/ && cp src/docsify-mermaid-zoom.css dist/","prepublishOnly":"npm run build"},"_npmUser":{"name":"chadfurman","email":"chad@chadfurman.com"},"repository":{"url":"git+https://github.com/chadfurman/docsify-mermaid-zoom.git","type":"git"},"_npmVersion":"10.9.2","description":"Interactive mermaid diagrams for docsify — zoom, pan, resize, and fullscreen","directories":{},"_nodeVersion":"23.9.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"peerDependencies":{"docsify":">=4.0.0","mermaid":">=10.0.0"},"_npmOperationalInternal":{"tmp":"tmp/docsify-mermaid-zoom_1.1.0_1776097633706_0.5384730692239619","host":"s3://npm-registry-packages-npm-production"}},"1.2.0":{"name":"@chadfurman/docsify-mermaid-zoom","version":"1.2.0","keywords":["docsify","docsify-plugin","mermaid","zoom","pan","fullscreen","interactive","diagrams","svg-pan-zoom"],"author":{"name":"Chad Furman"},"license":"MIT","_id":"@chadfurman/docsify-mermaid-zoom@1.2.0","maintainers":[{"name":"chadfurman","email":"chad@chadfurman.com"}],"homepage":"https://github.com/chadfurman/docsify-mermaid-zoom#readme","bugs":{"url":"https://github.com/chadfurman/docsify-mermaid-zoom/issues"},"dist":{"shasum":"1e32b404fceb3ee8094e07570d92f7d52e60031b","tarball":"https://registry.npmjs.org/@chadfurman/docsify-mermaid-zoom/-/docsify-mermaid-zoom-1.2.0.tgz","fileCount":7,"integrity":"sha512-9VNTqdtEYPNokqDqVChTwi89qWUajxJuyus8REXAJZZRNG+30l3+NYB72coNEMr1CEGM/I+bjLTeI1H16EIGPQ==","signatures":[{"sig":"MEQCIEQwGdBDZswlHCurMd+VP5qnR0Erj8goK0REagzB9Wm/AiB9fSPiS1eL6z/4K1EQwDFMKMFL415pkJP/KJKgO9A/lQ==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":33209},"main":"dist/docsify-mermaid-zoom.js","gitHead":"0b7d7841c4791e3513ac1d70ce21e771981eee12","scripts":{"build":"mkdir -p dist && cp src/docsify-mermaid-zoom.js dist/ && cp src/docsify-mermaid-zoom.css dist/","prepublishOnly":"npm run build"},"_npmUser":{"name":"chadfurman","email":"chad@chadfurman.com"},"repository":{"url":"git+https://github.com/chadfurman/docsify-mermaid-zoom.git","type":"git"},"_npmVersion":"10.9.2","description":"Interactive mermaid diagrams for docsify — zoom, pan, resize, and fullscreen","directories":{},"_nodeVersion":"23.9.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"peerDependencies":{"docsify":">=4.0.0","mermaid":">=10.0.0"},"_npmOperationalInternal":{"tmp":"tmp/docsify-mermaid-zoom_1.2.0_1776098978129_0.9674573106632587","host":"s3://npm-registry-packages-npm-production"}},"2.0.0":{"name":"@chadfurman/docsify-mermaid-zoom","publishConfig":{"access":"public"},"version":"2.0.0","description":"Interactive mermaid diagrams for docsify — zoom, pan, resize, and fullscreen. Auto-loads dependencies.","main":"dist/docsify-mermaid-zoom.js","scripts":{"build":"mkdir -p dist && cp src/docsify-mermaid-zoom.js dist/ && cp src/docsify-mermaid-zoom.css dist/","prepublishOnly":"npm run build"},"keywords":["docsify","docsify-plugin","mermaid","zoom","pan","fullscreen","interactive","diagrams","svg-pan-zoom"],"author":{"name":"Chad Furman"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/chadfurman/docsify-mermaid-zoom.git"},"homepage":"https://github.com/chadfurman/docsify-mermaid-zoom#readme","bugs":{"url":"https://github.com/chadfurman/docsify-mermaid-zoom/issues"},"peerDependencies":{"docsify":">=4.0.0"},"optionalDependencies":{"mermaid":">=10.0.0","svg-pan-zoom":">=3.6.0"},"_id":"@chadfurman/docsify-mermaid-zoom@2.0.0","gitHead":"a31781b9229538b3dafff26f5cbf73ab4fb3bb33","_nodeVersion":"23.9.0","_npmVersion":"10.9.2","dist":{"integrity":"sha512-SrSLoSudG7pmngaBC7+aupGpFYW5fqOgRB/eECHQBXfdDyvL0CvtP4wj+L7WjKA3Gx3IuHUQ47fjkthTexF02w==","shasum":"fa75a63b4190c9efbc7a02ad1e5fcb316e6c36d3","tarball":"https://registry.npmjs.org/@chadfurman/docsify-mermaid-zoom/-/docsify-mermaid-zoom-2.0.0.tgz","fileCount":7,"unpackedSize":42015,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIHLtxHVB0iWGtAJ7pkhRemEhDC1ytqT6ETYDf+/hEVDeAiEAn0AGVcPdlmJuGIoitmdnedueVaIwg2T0l6at88yVVmQ="}]},"_npmUser":{"name":"chadfurman","email":"chad@chadfurman.com"},"directories":{},"maintainers":[{"name":"chadfurman","email":"chad@chadfurman.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/docsify-mermaid-zoom_2.0.0_1776186746531_0.7084079425122582"},"_hasShrinkwrap":false}},"time":{"created":"2026-04-13T15:00:04.840Z","modified":"2026-04-14T17:12:26.797Z","1.0.0":"2026-04-13T15:00:05.085Z","1.1.0":"2026-04-13T16:27:13.849Z","1.2.0":"2026-04-13T16:49:38.263Z","2.0.0":"2026-04-14T17:12:26.687Z"},"bugs":{"url":"https://github.com/chadfurman/docsify-mermaid-zoom/issues"},"author":{"name":"Chad Furman"},"license":"MIT","homepage":"https://github.com/chadfurman/docsify-mermaid-zoom#readme","keywords":["docsify","docsify-plugin","mermaid","zoom","pan","fullscreen","interactive","diagrams","svg-pan-zoom"],"repository":{"type":"git","url":"git+https://github.com/chadfurman/docsify-mermaid-zoom.git"},"description":"Interactive mermaid diagrams for docsify — zoom, pan, resize, and fullscreen. Auto-loads dependencies.","maintainers":[{"name":"chadfurman","email":"chad@chadfurman.com"}],"readme":"# docsify-mermaid-zoom\n\nInteractive mermaid diagrams for [docsify](https://docsify.js.org/) — zoom, pan, resize, and fullscreen.\n\n\n\n## Features\n\n- **Click-to-focus interaction** — click a diagram to focus it. When focused: two-finger scroll pans the diagram, arrow keys navigate. ESC releases focus. Unfocused diagrams let scroll pass through to the page.\n- **Pinch-to-zoom / Ctrl+scroll** — always works regardless of focus state\n- **Click-and-drag to pan** with grab/grabbing cursor\n- **Resize handle** — drag the bottom-right corner to make the diagram taller/shorter\n- **Fullscreen mode** — expand any diagram to fill the viewport (auto-focused, ESC to exit)\n- **Zoom controls** — +, -, reset buttons in the top-right corner\n- **Auto-fit** — diagrams fit and center on load, resize, and page navigation\n- **Visual focus indicator** — teal outline ring shows when a diagram is active\n- **Auto-loads dependencies** — mermaid and svg-pan-zoom are loaded from CDN automatically if not already present\n- **Configurable** — min/max zoom, container height limits, render delay, debug mode, mermaid config pass-through\n- **Graceful fallback** — if svg-pan-zoom fails, diagrams still render normally\n\n## Install\n\n### CDN (recommended for docsify)\n\nJust two lines in your docsify `index.html` — that's it:\n\n```html\n\n\n```\n\nThe plugin auto-loads mermaid and svg-pan-zoom from CDN if they aren't already on the page.\n\n### npm\n\n```bash\nnpm install @chadfurman/docsify-mermaid-zoom\n```\n\nThen reference `node_modules/@chadfurman/docsify-mermaid-zoom/dist/` in your HTML.\n\n### Manual setup (advanced)\n\nIf you want to control exact dependency versions, load them yourself before the plugin. The plugin will detect they're already present and skip auto-loading:\n\n```html\n\n\n\n\n\n\n\n```\n\n> **Note:** As of v2.0, `docsify-mermaid` is no longer needed as a separate dependency — its functionality is inlined into this plugin.\n\n## Configuration\n\nOptional — configure via `window.$docsify.mermaidZoom`:\n\n```html\n\n```\n\n### Mermaid config pass-through\n\nThe `mermaidConfig` option is passed directly to `mermaid.initialize()` along with `{ startOnLoad: false, theme: 'default' }` as defaults. Any keys you provide will override the defaults. This is useful for setting mermaid themes, flowchart options, sequence diagram config, etc.\n\n## Theming\n\nThe accent color used for hover borders and button highlights can be customized with a CSS variable:\n\n```css\n:root {\n --mermaid-zoom-accent: #0F766E;\n}\n```\n\n## How it works\n\n1. The plugin registers a docsify `afterEach` hook that converts mermaid code blocks into `
` elements\n2. In the `doneEach` hook, it auto-loads mermaid and svg-pan-zoom from CDN (if not already present)\n3. Mermaid is initialized once, then `mermaid.run()` processes unrendered diagrams\n4. Each `.mermaid` element gets wrapped in a `.mermaid-zoom-container` div\n5. The container is sized proportionally to the diagram's aspect ratio\n6. `svg-pan-zoom` is initialized on the SVG with fit + center\n7. Zoom controls, fullscreen button, and resize handle are added\n8. A `ResizeObserver` watches the container so dragging the resize handle re-fits the diagram\n\n## Full example\n\n```html\n\n\n\n \n \n\n\n \n \n \n \n\n\n```\n\nThen in any markdown file:\n\n````markdown\n```mermaid\ngraph TD\n A[Start] --> B{Decision}\n B -->|Yes| C[Do something]\n B -->|No| D[Do something else]\n C --> E[End]\n D --> E\n```\n````\n\n## Migrating from v1.x\n\nv2.0 is a breaking change that simplifies setup. Remove the old dependency lines:\n\n```diff\n \n- \n- \n- \n- \n \n```\n\nIf you were passing options to `mermaid.initialize()`, move them to `mermaidConfig`:\n\n```javascript\nmermaidZoom: {\n mermaidConfig: { theme: 'neutral' }\n}\n```\n\n## License\n\nMIT\n","readmeFilename":"README.md"}