Need advice on how to do this mermaid diagram

[obsidiannoob]

is there a way to fir a mermaid diagram if its really wide or at least have a scrollbar to scroll all the way to the right?

[CarolineMathieson]

I haven’t found a way yet, but would really like this feature. There are maybe some properties you can add inside the mermaid diagram code to do this, but i havent looked. Try the mermaid.live website documentation. There is another 3 ear old thread about this:

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: [image] Related bug report: Gantt charts are way too small to be readable

and this may be in the latest mermaid but not sure if obsidian uses the latest mermaid. This seems rely on using css snippets to add the required css code. I haven’t tried the Dune theme yet either which also does this. I try not to switch themes as it’s a time sink and some themes are difficult to get back out of without editing in the .obsidian directory.

[Craig]

Hi @obsidiannoob,

Yes, you can use custom CSS to size the diagram to fit the page. Here is the CSS I use for my mermaid diagrams:

/* Resize Mermaid diagrams to fit on the page by default */
.mermaid svg {
    max-width: 100%;
    height: auto;
}

/* Override resizing if desired */
.no-resize-mermaid .mermaid svg {
    max-width: inherit;
    height: inherit;
}

/* Make mindmap colors readable */
.theme-light .mermaid {
    --color-red: #ff7777;
    --color-orange: #ffbb99;
    --color-yellow: #ffeeaa;
    --color-green: #bbffbb;
    --color-cyan: #bbffee;
    --color-blue: #aaccff;
    --color-purple: #ddbbff;
    --color-pink: #ffcccc;
}

If you need help using CSS snippets with Obsidian, please see the help topic: CSS snippets - Obsidian Help

[obsidiannoob]

@Craig
thanks . i tried it and it worked. wish there was an easier time to change from fit to normal size (with maybe added new feature of making it scrollable). just in case the text gets harder to read

[Craig]

Glad I could help!

If you used my CSS snippet above, then you can turn off Mermaid resizing per page by adding the following to your frontmatter:

---
cssclasses:
  - no-resize-mermaid
---

Although not as easy as a button click, it’s faster than disabling the CSS snippet, and you can customize it per page.

[Waffles]

I Created an account only to like this and to tell you that you made my life so much better, this is the best thing to ever happen to me. In the most platonic way i love you so much.

[mrdrdiego]

Aww yeah this did the trick! I was struggling with this problem for a bit and you’ve saved my butt. Would be really awesome if we didn’t need this kind of workaround though.