Ability to resize and align mermaid diagrams

Using mermaid diagrams in Obsidian is currently a bit clunky, and not everything works. Most of these issues can be addressed by allowing the users to resize and realign the mermaid diagram. I think this screenshot can demonstrate my points pretty well:

Related bug report: Gantt charts are way too small to be readable

12 Likes

Resizing charts will be possible through css in 0.9.7.

1 Like

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.

3 Likes

Any solution?
You have closed my bug report: Mermaid diagrams (scale difference) and do not provide any solution.

The give me link just a link to Ability to resize and align mermaid diagrams where is no solution. And from there you refere to here Gantt charts are way too small to be readable where you refere as solution back here Ability to resize and align mermaid diagrams.

So make it simple:

  1. Where is the solution for resizing?
  2. Please revert the unreasonable decision in version 0.9.7. and make graph scale same like it was before. Until there is real solution for resizing.
1 Like

I would agree that it would definitely be nice to be able to resize. Finding a suggestion to use the following gave me hope, but I had no luck.

mermaid.flowchartConfig = {
width: 100%
}

Lately, when editing diagrams, I have just been using ctrl ± on Obsidian and using another editor to do the coding. It does make the process visually annoying and less convenient. Also, I tend to sometimes get various rendering artifacts when resizing or updating the code. It also means having to save every time I want the diagrams to update.

Anyways, I’m not sure what past solution you are talking about, but it gives me hope that resizing used to work. Going to check it out soon and potentially try to revert, although I am guessing it’s not possible to have multiple Obsidian instances installed.

As a side note, I am looking forward to some of the mermaid features in beta like the ability to define connections for subgraphs, the new connector shapes, and potentially eventually properly implemented nested subgraphs.

I just really feel like there is so much potential for plugins, hopefully core, that would let note connections be visualized and links be functional within diagrams. I know there are supposed workarounds but I haven’t succeeded with those either.

It’s good to see someone else excited about Mermaid in Obsidian, because I would definitely also be sad if things came to a permanent standstill.

I should add that I am extremely happy with all aspects of Obsidian development, and am mainly supporting mermaid as a continued direction regardless of what needs fixing.

Thanks.

1 Like

Some existing syntax for adding attributes to fenced code blocks (for inspiration or reuse to stay compatible):

2 Likes

Is there a way to do this by now?

3 Likes

Bumping this, is there still no way to align diagrams?

4 Likes

related: Pie charts are always centered and very large

github issue: Left align output? (pie chart specifically) · Issue #1983 · mermaid-js/mermaid · GitHub

To align all mermaid diagrams, you can write the following in your obsidian.css file (you can replace “center” with “left” or “right” if you choose to do so):

div.mermaid {
    text-align: center;
}

Adjusting the width and height of mermaid diagrams is a bit trickier, but I found the following solution. The example below sets the width of the mermaid diagrams as 400px while preserving the aspect ratio:

svg[id^="m"][width][height][viewBox] {
    width: 400px;
    height: auto;
}

You can also have several variations of the above code. A couple of examples include:

  • A width of 80% of the current window’s width:

    svg[id^="m"][width][height][viewBox] {
        width: 80%;
        height: auto;
    }
    
  • A minimum width of 350px and a maximum width of 600px:

    svg[id^="m"][width][height][viewBox] {
        min-width: 350px;
        max-width: 600px;
        width: 80%;
        height: auto;
    }
    

I hope this helps! Also, for anyone interested, the steps I used to find this solution were the following:

  1. I used Ctrl+Shift+I (on Windows) to open the obsidian developer tools while in preview mode. Then, I inspected the mermaid elements in my page and found that they have randomly generated id attributes all starting with the letter “m”. An example was the following:

    <svg id="me4c26fffe5bb1328" ...>
    
  • N.B. The mermaid id attribute changes for an obsidian diagram after an obsidian site is published, so targeting a particular id using css and hoping for those changes to carry over is not feasible.
  1. Through some searching online, I found that I can change the attributes of an html element whose name starts with a string by following the recipe:

    element_name[attribute_name^="starting_string"] { *desired code changes here* }
    
  • In this case, the html element is svg, the attribute name is id, and the starting string is “m”, so I would have to write:

    svg[id^="m"] { *desired code here* }
    
  • However, there may be other svg elements on a page that also have their id attribute start with “m”, so the above solution isn’t too specific.

  1. In pursuit of greater specificity, I added [width], [height], and [viewBox] because each mermaid diagram I saw also had width, height, and viewBox attributes:

    svg[id^="m"][width][height][viewBox] { *desired code here* }
    

Finally, I have to say that I only tested this on mermaid flowcharts, so if it doesn’t work for other types of mermaid diagrams, please let me know.

7 Likes

Thank you so very much for this, I’ve been looking for how to do this for ages, and couldn’t figure it out!

Glad to help!