Resize and align mermaid diagrams

[malecjan]

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

• https://talk.commonmark.org/t/consistent-attribute-syntax/272
• relevant discussion thread: https://talk.commonmark.org/t/mermaid-generation-of-diagrams-and-flowcharts-from-text-in-a-similar-manner-as-markdown/1882/18
• on last page in pdf https://rstudio.com/wp-content/uploads/2015/02/rmarkdown-cheatsheet.pdf
• https://leanpub.com/markua/read#leanpub-auto-figure-captions-and-alt-text-together
• last paragraph in chapter https://michelf.ca/projects/php-markdown/extra/#fenced-code-blocks

[base]

Is there a way to do this by now?

[XMach]

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

[luckman212]

related: Pie charts are always centered and very large

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

[Salamander23]

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.

EDIT: While the solution below does technically work, please replace anywhere I’ve written svg[ig^="m"][width][height][viewBox] { *desired code* } in the css below with the much simpler .mermaid svg { *desired code* }. This simpler solution was offered by @smcllns in a later post on this thread.

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.

2. 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.

3. 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.

[Nilat]

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

[Salamander23]

Glad to help!

[Craftidore]

@Salamander23

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

I’ve tried using this inside a <style></style> block, but it had no effect on my graph, which remained far larger than my obsidian pane.

[Salamander23]

I’ve previously tried things inside <style></style> blocks as well, which didn’t end up working.

Instead, copy the CSS in a CSS file in the snippets folder of your obsidian vault, then go on the Appearance settings and activate said CSS file. Here are the steps:

• Go to Settings > Appearance > Scroll down to CSS Snippets > Click on the folder icon on the right to Open snippets folder
• Make a CSS file in the snippets folder with the desired CSS, then save the file (file must have extension “.css”)
• Activate the CSS file snippet by toggling it on under “CSS Snippets” in the Appearance settings.

You used to also be able to write CSS in an obsidian.css file in the .obsidian folder, but I believe that feature is deprecated now, in favor of using CSS snippets instead.

[Craftidore]

This worked perfectly. Thank you!

[mo-seph]

Is there a way to set the aspect ratio of diagrams here? I’m making a Gantt chart, and in the Mermaid online editor, it is wide and shallow, e.g. 800 x 150 px. In Obsidian, it comes out much closer to square, e.g. 800 x 600 px. I’ve added a CSS snippet, and verified that setting height or width has an effect, but if I set them both, it keeps the aspect ratio the same.

[flatline]

Agreed with everyone here that the option to resize would be incredible. Also a big shout out to @Salamander23 for your snippets here.

Question - would it be possible to:

1. Create a setting under themes that enables users to force fit all mermaid diagrams into their notes? This could be made more sophisticated later if there is a strong preference for different kinds of behaviours depending on the type of diagram.
2. Add a mini menu when you hover over the rendered SVG with 2 options:
   a. Download diagram as SVG
   b. “Full size” this SVG - essentially popping it out into a resizable, floating window within Obsidian. The window would be centred on the starting node in the diagram by default. Having the diagram in a pop up window means that Obsidian could (in theory) render the SVG as a vector (zooming in / out as needed) without affecting the rest of the note. Users could then close the vector when they are done viewing it.

There may be better ways of doing it, but as I understand it, there appear to be two conflicting needs:

• Ability to live-edit and fit diagrams within the regular flow of their notes no matter what size the diagram
• Ability to view and read the diagram as and when needed, e.g. for sharing purposes

Enabling a 2nd layer of navigation for these objects (either via pop up / fixed size in line rendering engine) might go some way towards resolving the central conflict, as there is no way to control how large / wide a person’s Mermaid diagram might get.

[FriSti]

The option to Zoom in and out would be amazing!

[smcllns]

Thanks Salamander! Would it be simpler to use .mermaid svg { *desired code* } ? Seems to work for me.

[smcllns]

@WhiteNoise leaving aside the Mermaid upstream issues with styling nodes, it seems like it would be helpful for everyone if Obsidian shipped with this css by default and didn’t require adding custom css:

.mermaid svg { 
  max-width: 100%; 
  height: auto;
}

Before (large mermaid diagram gets cropped):

After (mermaid diagram scaled to fit doc width):

[tctco]

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

[Craig]

@smcllns

.mermaid svg { 
  max-width: 100%; 
  height: auto;
}

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

[Salamander23]

@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.

[Hunanbean]

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.

[kngautham]

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