Gantt charts are way too small to be readable

Bug graveyard
1

Steps to reproduce

Draw any gantt diagrams with mermaid.

Expected result

A moderately readable gantt chart will show up.

image
image865×481 35.3 KB

Actual result

The gantt chart is way too small and it’s unreadable. Resizing the window will not make it larger:

image
image1701×736 92.5 KB

Environment

  • Operating system: Linux
  • Obsidian version: 0.9.3

Additional information

It would be great if we can resize and change the alignment of the mermaid diagrams.
I have a feature request here: Ability to resize and align mermaid diagrams

This is not related to: Mermaid scaling issues as I’m not on a high-DPI display and not using any kind of UI scaling.

11 Likes
2

Hi! did you manage to resize it?
Can you change the time scale of the Gantt?

Thanks!

3

Resizing is not currently possible and reducing the time scale does not help with this problem unfortunately.

4

That is a pity. This Gantt charts look really nice for presentation and reports purposes, but they are unreadable, hope they can fix it soon!, thanks!

5

I wonder how much work it would require to put Mermaid charts in a scrollable window…

Unfortunately, this would not be very useful for exporting to PDF, if that ever makes it on the roadmap.

This is a little tough since detailed Gantt charts are a PITA to put on paper in the first place.

1 Like
6

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;
}

Result:

image
image709×605 17.8 KB

^ Note the scroll bar under each diagram

1 Like
7

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?

8

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.

2 Likes
9

for the image enlarging issue, there is a .css workaround that can help. you can try that.

Inspired by the posts in:

the code I used right now is like this:
in case the mouse hovers on a image:

.markdown-preview-view img:hover {
	/*cursor:zoom-out;*/
	display:block;
	z-index:100;
	/*position:fixed;*/
    max-height:100%;
    max-width:100%;
    height:100%;
    width:100%;
    object-fit: contain;
    margin:0 auto;
    text-align:center;
    /*top: 50%;
  	transform: translateY(-50%);*/
    padding:0;
    left:0;
    right:0;
    bottom:0;
    background:var(--background-primary);
    outline:none;
}

in case you click an image:

.markdown-preview-view img:active {
	cursor:zoom-out;
	display:block;
	z-index:100;
	position:fixed;
    max-height:100%;
    max-width:100%;
    height:100%;
    width:100%;
    object-fit: contain;
    margin:0 auto;
    text-align:center;
    top: 50%;
  	transform: translateY(-50%);
    padding:0;
    left:0;
    right:0;
    bottom:0;
    background:var(--background-primary);
}

For me, they can enlarge the image to the extent that is readable.

10

will be “fixed” in 0.9.7.

3 Likes
11

In 0.9.7 we have stopped forcing the size of the graph being the same as page width by default.

Also see this:

12

Sorry this wasn’t clear for me… you’re adding this to obsidian.css?

13

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.

1 Like