I’ve worked out a way to resize rendered Mermaid objects. Unfortunately, all of your charts have to be a similar size for it to be useful.
This would be a lot easier to handle if we had access to the scaling that is done to the rendered diagram before plopping it into its box. That behavior is a little ambiguous, since you can define font sizes and such, but they’re neglected during render.
/*
prevent the box from extending past the page width,
creating a scrollable window around only the diagram.
*/
.mermaid {
max-width: 100%;
overflow: scroll;
}
/*
Assume that the gantt chart will be made very short
during scaling, so set a minimum height. Ensure that
the width adjusts to compensate.
*/
.mermaid svg {
min-height:200px;
width: auto;
}
one question about the usage of mermaid with obsidian:
in your case, are you using the obsidian as the tool for maintaining the Gantt charts or the charts (and the code) are created somewhere else and pasted into obsidian?
I have a feeling that the solution for this would have to be a way to “zoom in” pages instead of just resizing the whole Obsidian MD window. I have encountered similar issues with viewing images. It’s really just difficult to view or zoom into images in Obsidian as well. Opening them in external viewer’s the only option.
Although with this kind of use case, a zoom functionality’s really the only way. As well as allowing for “full width” on pages. So might as well apply it to the rest of the use cases.
Yes.
The CSS code describes how will the attributes of the image change when you move the mouse over them or click on the image. For example, image may be enlarged when you move(hover) your mouse over an image.