Resize and align mermaid diagrams

[htuy]

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

[WhiteNoise]

Resizing charts will be possible through css in 0.9.7.

[WhiteNoise]

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

https://mermaid-js.github.io/mermaid/diagrams-and-syntax-and-examples/directives.html

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.

Change Mermaid CSS

To style in the mermaid block the current way that works is to define the classes within the block itself. For example: graph LR; A-->B[AAA]; B-->D; %% Class Definitions %% ================= class A cssClass; classDef cssClass fill:#f9f,stroke:#333,stroke-width:4px, font-size:15px; It appears that adding the css do the custom.css file isn’t working for the moment. For more details see the mermaid docs: https://github.com/mermaidjs/mermaid-gitbook/blob/master/content/…

Gantt charts are way too small to be readable

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 diag…

[den]

@WhiteNoise

Resizing charts will be possible through css in 0.9.7.

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

The give me link just a link to Resize and align mermaid diagrams - #3 by WhiteNoise where is no solution. And from there you refere to here Gantt charts are way too small to be readable - #6 by brhubbar where you refere as solution back here Resize and align mermaid diagrams - #3 by WhiteNoise.

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.

[I-d-as]

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.

[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):