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


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.


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.


1 Like

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


Is there a way to do this by now?


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


related: Pie charts are always centered and very large

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