docsify-mermaid-zoom
Version:
A simple Docsify plugin enabling zoom in mermaid diagrams.
46 lines (45 loc) • 1.35 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Docsify-mermaid-zoom</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="description" content="Description" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, minimum-scale=1.0"
/>
<link
rel="stylesheet"
href="//cdn.jsdelivr.net/npm/docsify@4/lib/themes/vue.css"
/>
</head>
<body>
<div id="app"></div>
<script>
window.$docsify = {
name: "Docsify-mermaid-zoom",
mermaidConfig: {
querySelector: ".mermaid",
},
mermaidZoom: {
minimumScale: 1,
maximumScale: 5,
zoomPannel: true,
},
};
</script>
<!-- Docsify v4 -->
<script src="//cdn.jsdelivr.net/npm/docsify@4"></script>
<!-- Import D3.js -->
<script src="//cdn.jsdelivr.net/npm/d3@7"></script>
<!-- Import Mermaid -->
<script src="//unpkg.com/mermaid/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>
</body>
</html>