mermaid
mermaid copied to clipboard
mermaid-js
Ability to zoom HTML diagram
Is your feature request related to a problem? Please describe. I've created quite a large complicated flowchart with multiple subgraphs. I embed the diagram in the HTML (as described in the documentation) and am able to pass that to my colleagues. However....the webpage always fit the diagram to the page. As it's become more complex, it requires more space but the page keeps shrinking it to fit, making it harder to see, particularly on a small screen. The Zoom feature in the browser doesn't make the diagram larger.
Describe the solution you'd like Zooming the webpage should allow me to zoom in on the diagram (with horizontal and vertical scroll bars to allow navigation around the diagram).
Describe alternatives you've considered A larger monitor, and updating to glasses 1.1....?
Additional context
indeed, zoom in, zoom out, and panning is really important especially when diagram too large or screen resolution too small
++ after all the work to do the documentation of our complicated system to demonstrate where our tech debt is, I cannot effectively leverage the created diagrams without taking a screenshot, and using an image viewer to zoom in 😭
I use the github integration which is a dream otherwise.
This already seems to be a feature on the live editor but I can't find out how to enable it! https://mermaid-js.github.io/mermaid-live-editor/
The similar issue has been posted since 2019, I'm hesitating to reinvent the wheel to pan my large graph or give mermaid up. 😢
Dirty code sample to do it. Borrowed code from svg-pan-zoom used in the Live Editor (e.g https://github.com/mermaid-js/mermaid-live-editor/blob/master/src/lib/components/View.svelte#L4 and https://github.com/mermaid-js/mermaid-live-editor/blob/master/package.json#L80)
<html>
<head>
<style type="text/css">
#mySvgId {
height: 90%;
width: 90%;
}
</style>
</head>
<body>
<div id="graphDiv"></div>
<script src="https://bumbu.me/svg-pan-zoom/dist/svg-pan-zoom.js"></script>
<script type="module">
import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';
mermaid.initialize({ startOnLoad: false });
// Example of using the render function
const drawDiagram = async function () {
const element = document.querySelector('#graphDiv');
const graphDefinition = `
flowchart TD
A[Christmas] -->|Get money| B(Go shopping)
B --> C{Let me think}
C -->|One| D[Laptop]
C -->|Two| E[iPhone]
C -->|Three| F[fa:fa-car Car]
`;
const { svg } = await mermaid.render('mySvgId', graphDefinition);
element.innerHTML = svg.replace(/[ ]*max-width:[ 0-9\.]*px;/i , '');
var panZoomTiger = svgPanZoom('#mySvgId', {
zoomEnabled: true,
controlIconsEnabled: true,
fit: true,
center: true
})
};
await drawDiagram();
</script>
</body>
</html>
This worked for me, but I had to add some code to make the SVG bigger - it kept defaulting to 150px high:
document.getElementById('mySvgId').setAttribute("height", "1000px");
document.getElementById('mySvgId').setAttribute("width", "2000px");
