# docsify-mermaid-zoom

> A simple Docsify plugin enabling zoom in mermaid diagrams.

Latest version **3.0.0** (published 2023-03-09) · MIT license · 0 weekly downloads

## Install

```sh
npm install docsify-mermaid-zoom
pnpm add docsify-mermaid-zoom
yarn add docsify-mermaid-zoom
bun add docsify-mermaid-zoom
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 3.0.0 |
| Published | 2023-03-09 |
| First published | 2022-01-11 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 11.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 23 |
| Author | Corentin Le Berre |
| Maintainers | corentin.leberre |
| Keywords | Docsify, Mermaid |

## Links

- npm: https://www.npmjs.com/package/docsify-mermaid-zoom
- Repository: https://github.com/corentinleberre/docsify-mermaid-zoom
- Homepage: https://github.com/corentinleberre/docsify-mermaid-zoom#readme
- Issues: https://github.com/corentinleberre/docsify-mermaid-zoom/issues
- npm.io page: https://npm.io/package/docsify-mermaid-zoom

## Alternatives

- [@sindresorhus/slugify](https://npm.io/package/@sindresorhus/slugify.md) — 3.7M weekly downloads
- [solid-js](https://npm.io/package/solid-js.md) — 2.7M weekly downloads
- [expo-glass-effect](https://npm.io/package/expo-glass-effect.md) — 2.5M weekly downloads
- [nanoassert](https://npm.io/package/nanoassert.md) — 780.8K weekly downloads
- [@ffmpeg/ffmpeg](https://npm.io/package/@ffmpeg/ffmpeg.md) — 529.5K weekly downloads

## Recent versions

- 3.0.0 (latest) — 2023-03-09
- 2.2.5 — 2023-01-10
- 2.2.4 — 2023-01-09
- 2.2.3 — 2023-01-09
- 2.2.2 — 2023-01-09
- 2.2.1 — 2023-01-09
- 2.2.0 — 2023-01-07
- 2.0.0 — 2022-03-13
- 1.0.0 — 2022-01-11

## README

# Docsify-mermaid-zoom

A simple Docsify plugin enabling zoom in mermaid diagrams.

![Demo](assets/demo.png)

👉 You can test the plugin [here](https://corentinleberre.github.io/docsify-mermaid-zoom/)

## How to use

### Dependencies

- [mermaid-docsify](https://github.com/Leward/mermaid-docsify/])
- [D3.js](https://d3js.org)

Add the dependencies and plugin to `index.html`

```html
<script>
  window.$docsify = {
    ...,
    mermaidConfig: {
      querySelector: ".mermaid",
    }
    ...,
  };
</script>
<!-- Import D3.js -->
<script src="//cdn.jsdelivr.net/npm/d3@7"></script>
<!-- Import Mermaid (⚠️ Maximum V9 for now)-->
<script src="//cdn.jsdelivr.net/npm/mermaid@9/dist/mermaid.js"></script>
<script src="//unpkg.com/docsify-mermaid@latest/dist/docsify-mermaid.js"></script>
<script>
  mermaid.initialize({ startOnLoad: true });
</script>
<!-- Import Docsify-mermaid-zoom -->
<script src="//unpkg.com/docsify-mermaid-zoom/dist/docsify-mermaid-zoom.js"></script>
```

You can configure min/max scale and disable the zoom pannel.

The pannel provide **two button**. The first button activates the zoom feature on the mermaid diagram. The second one allows to reset the zoom.
This pannel can be disable.

You can also activate the zoom on the diagram by **double clicking on it**.
The diagram will return to its original scale once it leaves the viewport on your screen.

### Optional configuration

You can configure minimum zoom and maximum zoom.

You can also disable the zoom pannel. Zoom will still work if you double click on a diagramm.

```html
<script>
  window.$docsify = {
      ...,
      mermaidZoom: {
          minimumScale: 1,
          maximumScale: 5,
          zoomPannel: true
      },
      ...,
  }
</script>
```

## License

The code in this repository is licensed under the MIT License. See the LICENSE file for more information.

## Contributing

If you found a bug in my code or want to improve this plugin, please feel free to open a pull request or an issue. I am always looking for ways to improve my solutions and I appreciate any feedback or contributions.

---
_Source: https://npm.io/package/docsify-mermaid-zoom · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._