pan and zoom for mermaid graphs #9

McShelby · Jul 2, 2021 · 1b06d27 · 1b06d27
1 parent 8a53387
commit 1b06d27
Show file tree

Hide file tree

Showing 5 changed files with 642 additions and 0 deletions.
diff --git a/exampleSite/content/credits.en.md b/exampleSite/content/credits.en.md
@@ -14,6 +14,7 @@ Special thanks to [@matcornic](https://github.com/matcornic) for his work on [le
 * [mermaid](https://mermaid-js.github.io/mermaid) - generation of diagram and flowchart from text in a similar manner as markdown
 * [font awesome](http://fontawesome.io/) - the iconic font and CSS framework
 * [jQuery](https://jquery.com) - The Write Less, Do More, JavaScript Library
+* [jquery-svg-zoom-pan](https://github.com/DanielHoffmann/jquery-svg-pan-zoom) - enable pan and zoom in mermaid graphs
 * [lunr](https://lunrjs.com) - Lunr enables you to provide a great search experience without the need for external, server-side, search services...
 * [horsey](https://bevacqua.github.io/horsey/) - Progressive and customizable autocomplete component
 * [clipboard.js](https://zenorocha.github.io/clipboard.js) - copy text to clipboard

diff --git a/exampleSite/content/shortcodes/mermaid.en.md b/exampleSite/content/shortcodes/mermaid.en.md
@@ -7,6 +7,8 @@ description : "Generation of diagram and flowchart from text in a similar manner
 
 Just insert your mermaid code in the `mermaid` shortcode and that's it.
 
+You can pan and zoom the generated graphs.
+
 ## Examples
 
 ### Flowchart example

diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html
@@ -60,6 +60,7 @@
     <script src="{{"js/perfect-scrollbar.min.js" | relURL}}{{ if not .Site.Params.disableAssetsBusting }}?{{ now.Unix }}{{ end }}"></script>
     <script src="{{"js/perfect-scrollbar.jquery.min.js" | relURL}}{{ if not .Site.Params.disableAssetsBusting }}?{{ now.Unix }}{{ end }}"></script>
     <script src="{{"js/jquery.sticky.js" | relURL}}{{ if not .Site.Params.disableAssetsBusting }}?{{ now.Unix }}{{ end }}"></script>
+    <script src="{{"js/jquery.svg.pan.zoom.js" | relURL}}{{ if not .Site.Params.disableAssetsBusting }}?{{ now.Unix }}{{ end }}"></script>
     <script src="{{"js/featherlight.min.js" | relURL}}{{ if not .Site.Params.disableAssetsBusting }}?{{ now.Unix }}{{ end }}"></script>
     <script src="{{"js/highlight.pack.js" | relURL}}{{ if not .Site.Params.disableAssetsBusting }}?{{ now.Unix }}{{ end }}"></script>
     <script>hljs.initHighlightingOnLoad();</script>