Gantt charts are way too small to be readable

[htuy]

Steps to reproduce

Draw any gantt diagrams with mermaid.

Expected result

A moderately readable gantt chart will show up.

Actual result

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

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.

[cjaguilera]

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

Thanks!

[htuy]

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

[cjaguilera]

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!

[brhubbar]

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.

[brhubbar]

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:

^ Note the scroll bar under each diagram

[GLight]

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?

[a.u]

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.

[GLight]

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

Inspired by the posts in:

Meta Post - Common CSS Hacks

Hi, I want to start collecting common CSS hacks for people to reference. If the hack you’ve come across isn’t particularly large then go ahead and use the format Title Version it last worked with Code Otherwise just post a link and I will maintain a list Andy Matuschak mode - V2.7 (updated for 0.7+ new panes) Bullet Point Relationship Lines Collapsible Sidebars Block Cursor Auto-fade Note Controls Tag Pills Vim mode with line focus Naked Embeds Text Hyphenation and Justification Enlarge Im…

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.

[WhiteNoise]

will be “fixed” in 0.9.7.

[WhiteNoise]

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

Also see this:

Ability to resize and align mermaid diagrams

This is an update on this request. In theory, Mermaid supports customizing the size of the graph (and also the elements of the graphs) using “directives”. Unfortunately, the doc presents conflicting syntaxes. Their examples don’t work in their own live editor. Probably the devs haven’t finished implementing this yet. We will wait until this thing is sorted out and well documented upstream. Some users have attempted modifying the look of the graph using CSS directly.

[randallb]

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

[GLight]

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.