Resize and align mermaid diagrams

I’ve done some research and copied and assembled some css snippets to make mermaid diagrams resizable. Since I’m not an expert in css, there could be some bugs, though it works well for me.

svg[id^="m"][width][height][viewBox] {
    max-width: 95%;
    max-height: 95%;
}

div.mermaid {
    margin-left: 0 !important;
    text-align: center;
    resize:both;
    overflow:auto;
    margin-bottom: 2px;
    position:relative;
    max-height: 600px;
    max-width: 100%;
}

div.mermaid::after {
    content:'';
    display:block;
    width:10px;
    height:10px;
    background-color:yellowgreen;
    position:absolute;
    right:0;
    bottom:0;
}

mermaidResize

24 Likes

Thank you so much for this! I’ve been wrestling with Mermaid diagrams pushing off the side of the page. This works perfectly. :pray:

8 Likes

@smcllns You are absolutely right. Using .mermaid svg { *desired code* } works perfectly. Funny how I missed that. Will be using this from now on instead.

1 Like

Brilliant! Thank you very much. It is working perfectly for me.

I just made an empty file, CustomMermaid.css, in my vaults snippet directory. I then copy pasted your css into it, saved, and told Obsidian(settings) to rescan the Snippets folder. Then I just enabled it by clicking the toggle to enable. I did not need to reload Obsidian.

4 Likes

obsidian renders mermaid in Android badly. Long text is getting cut off and shorter text overflows the Rectangle boundary.

Are there any solutions or css workarounds to overcome this issue.

These two issues don’t happen with windows 10 desktop app

秀啊,在我这儿用的挺好,感谢分享,特地注册来回复!

1 Like

This is excellent! Thank you. I am rending some huge flowcharts so this is indispensable.

3 Likes

div.mermaid works great on desktop but how do I get it to resize on Android? My mermaid diagrams are still huge there.

Hi there,

mermaid diagrams seem to work in obsidian for me, however using them with the plugin “Advanced Slides” for presentations (based on revealjs) seem to have the same issues

I’m not too familiar with CSS, but maybe the commands shown above have to be copied into the css of the Advanced Slides Theme as well?

When I try to change e.g. the background color in the css of an Advanced Slides Theme with an editor and save it again, the changes don’t seem to be applied => is there a specific way to make changes to a css-file?

Thank you very much in advance for your answer.

Best Regards,

Karl

How to oversize your Gantt chart:

I was able to use all the excellent suggestions in this thread to find a solution to make my chart really big so I could read all the tiny text (I couldn’t reply to the original post Gantt charts are way too small to be readable because it looks like comments are turned off, but that thread links here so hopefully Gantt Chart users can find this.)

Here are a couple notable additions I made in the CSS below (works for me when adding to the mermaid.css file as described by others in this thread):

  1. Font is yellow to make it pop on dark mode (also sort of works on light mode). I also added a text shadow to help pop over contrasting colors (really evident if you turn on excludes weekends for the gantt chart)
  2. Text font fill color is controllable by a single variable --mermaid-gantt-text-fill. You can try setting “yellow” to “hotpink” in the 2nd line to test it.
  3. Scale the chart oversized to 200% (you might have to futz with the left translation calculation which is used to center the chart a bit if you change this). Too kludgy? Is there a better solution?
  4. Darken the vertical “exclude-range” bars that I have turned on when excluding weekends in my chart to increase readability (defaults with text extending out the right of the bars was unreadable over the weekend sections).
  5. Not an improvement, but a confession that I had to use !important everywhere. If any of the developers from Obsidian are reading this, couldn’t you always just make the user overrides the most important based on the order the CSS is evaluated? Wouldn’t everyone always want this?
  6. Request to Obsidian Devs #2 … Can you also add a css class named after the official Mermaid object type like “gantt”, “graph”, “classDiagram”, “stateDiagram-v2”, etc. So our selectors would look like .mermaid .gantt svg and .mermaid .stateDiagram-v2 svg. Currently if I added another mermaid block like a graph, it would also get all this styling too that I only want on the gantt chart. (PS - Obsidian is great. Thanks so much).
:root {
    --mermaid-gantt-text-fill: yellow;
}
.taskText, .taskTextOutsideRight, .taskTextOutsideLeft {
    fill: var(--mermaid-gantt-text-fill) !important;
    text-shadow: 0px 0px 2px rgb(0 0 0  / 80%) !important;
}
.exclude-range {
    fill: #888 !important;
}
.mermaid svg {
    max-width: 200% !important;
    width: 200% !important;
    height: auto;
    transform: translate(calc(-0.25 * 100%), 0) !important;
  }
text.titleText {
    fill: var(--mermaid-gantt-text-fill) !important;
}
1 Like

This works:

    ```mermaid <!-- element style="width:90%; height:auto" -->
1 Like

I just implemented support for all kinds of mermaid diagrams into my theme called Dune

with Dune enabled, you can :

  • resize svg diagrams as you like, ( desktop & mobile )
  • read svg diagrams clearly with both dark and light themes

If you like my theme, feel free to send me bug reports and some feature requests too.

Edit. corrected the link above

Use case or problem

Larger Mermaid graphs are currently very hard to read. There is also a design conflict between the size of the graph (which may need to be wide) and the available real estate in a note, in simple terms:

  • a note might be the equivalent of a portrait A4 page, but –
  • the Mermaid graph might actually be the equivalent of a landscape A3 page

In order to make them fit together in the current setup, something has to give. Either:

  • the Mermaid graph is shrunk down to the width of the note (this makes the graph unreadable) - OR
  • the Mermaid graph is rendered at actual size, breaking the flow of the note

I see there is a feature request for dynamic diagram resizing, but I don’t think that will actually break the fundamental tension between these two.

Proposed solution

What we need is a simple CTA (similar to the </> that appears in the sidebar on hover) that does one of the following:

  • enables the user to render the diagram as a pop-up SVG. A close icon is pinned permanently to the top of the window, no matter where the user scrolls, enabling them to quickly tab back out of the pane
  • creates an on-diagram magnifying glass that “pops up” the content of the diagram as a cursor hovers over it. This second option would work well in desktop but I am not sure how it would translate to mobile. There is a really nifty example of this idea here - see the Outer Drag example & notice what happens with the box below.

Current workaround (optional)

This is a screenshot (RL) of me trying to read a large SVG in Obsidian. I have used ctrl+ to zoom in because I know of no other way to make the text legible(ish):

The screenshot is taken from the whole of my screen. The circled bit is what I am trying to read.

Related feature requests (optional)

This: Can we make mermaid renders a little bigger, just like typora did? — but it’s not entirely clear what came of it.
Also this: Ability to resize and align mermaid diagrams - #34 by Durant

This does not work for me :confused:

Any updates on this one? It is pretty old

May i ask you to check out my solution? For some reason my link did not work correctly, sorry for that

Hi @Jopp,

I installed your theme as requested. Sorry for not catching your comment earlier. Obsidian did not notify me that you had responded.

I don’t think your theme solves the issues I described in Feb 21.

Here’s a screenshot:

As I mentioned, the ability to resize diagrams doesn’t actually fix the underlying issue of the diagram being too large for the obsidian viewport.

Since installing the theme, I am also blocked from accessing the settings menu.

You are welcome! @flatline
Uh-oh, from the screenshots i see Dune isn’t working correctly, so let’s check a few points:

  • did you install and activate Mgmeyers Style Setting plugin?
  • did you navigate to Obsidian’s preferences> Style settings> Dune> Colors> Theme to pick a light and a dark theme?
  • did you add ´cssclass: svg-50´ to your yaml header ? Please see Dune’s cssclasses

Edit
later today I’ll upload a new version of Dune with a few bugs fixed (including svg sizes) and a bunch of new features too :smiley:

Hi @Jopp ,

No, I had not installed the Style Settings plugin. I ended up putting “_Dune” in the vault to get Obsidian back to default view, and then switching back to Minimal. I will apologise in advance but I am a bit adventured-out on the Dune theme for now. Losing access to the side bar was not the greatest experience.

It would be great if you could post a few screenshots of how Dune currently tackles this issue?

@flatline
Oh, i am sorry to hear that Dune locked you out - without Style Settings you will experience some weird behaviour, because i hid many buttons by default to clean up Obsidians cluttered interface. With Style Settings activated you won’t have problems to access buttons or preferences not even if buttons are hidden away. In case of need like yours, i suggest you to use shortcuts like cmd+, or your custom shortcut to access Obsidan’s preferences and change your theme comfortably.

I recommend you to download themes from within Obsidian, just open Preferences>Appearance>Themes>Manage to download and update your themes. Dune is there as well. Since my theme is more a overhaul than a makeup, i suggest you to deactivate theme-related plugins like “Minimal Theme Settings” because of code conflicts.

To read more on how to install my theme, please consult Dune’s first steps
I added a brief description about mermaid diagrams in Dune’s documentation

Some of many mermaid diagrams available in Dune:

Class diagrams

image image

Gantt diagrams


Class diagrams

Relationship diagrams


I hope you’ll try again with Dune, good luck! :slight_smile: