Mermaid graph size is limited by the markdown rendering area width.
However, for too wide graph, it is displayed too small.
To deal with this, I apply the style below to .mermaid nodes.
/* Zoom the graph up to the window width. */
.mermaid {
width : calc(100vw - 8em) ! important;
transition : width 0.2s ease-in-out;
}
/* For horizontally long graph, zoom more on mouseover. */
@media only screen {
.mermaid:hover {
width : calc(250vw - 8em) ! important;
}
}However, it has limits to work only in css:
the extra-zoom on mouseover is released on mouse out.
If you leave the previewing graph of the browser to edit the mermaid code,
the extra-zoom or the :hover style ends losing mouse focus.
Also, you can't freely set zoom ratio either.
On the other hand, the original style, you can use browser page zoom feature,
but the zoom works up to the browser window width.
Powerless for extremely long graphs.
Don't you have any good idea for this?
Preparing some mermaid graph zoom UI, such as a check box and a menu for zoom ratio, might help,
but it is not a smart solution since the target document doesn't always have mermaid graphs.
Mermaid graph size is limited by the markdown rendering area width.
However, for too wide graph, it is displayed too small.
To deal with this, I apply the style below to
.mermaidnodes.However, it has limits to work only in css:
the extra-zoom on mouseover is released on mouse out.
If you leave the previewing graph of the browser to edit the mermaid code,
the extra-zoom or the
:hoverstyle ends losing mouse focus.Also, you can't freely set zoom ratio either.
On the other hand, the original style, you can use browser page zoom feature,
but the zoom works up to the browser window width.
Powerless for extremely long graphs.
Don't you have any good idea for this?
Preparing some mermaid graph zoom UI, such as a check box and a menu for zoom ratio, might help,
but it is not a smart solution since the target document doesn't always have mermaid graphs.