Mermaid Diagrams not resizing to fit in page

[arden13]

In mermaid I am finding the diagrams do not resize to fit within their bounding box. Is there a way to get diagrams to resize similar to other markdown renderers or similar to mermaid.live?

Steps to reproduce

Going to make a mermaid diagram not fit on the page horizontally.

flowchart LR
	A --> B
	B --> C
	C --> D
	D --> E
	E --> F
	F --> G
	G --> H

Changing it to Top down works

flowchart TD
	A --> B
	B --> C
	C --> D
	D --> E
	E --> F
	F --> G
	G --> H

however making it wide still causes this issue

flowchart TD
	A --> B
	A --> C
	A --> D
	A --> E
	A --> F
	A --> G
	A --> H

And totally ruined if we have a wide and tall graph

flowchart TD
	A --> B
	B --> C
	C --> D
	D --> E
	E --> F
	F --> G
	G --> H
	H --> I
	H --> J
	H --> K
	H --> L
	H --> M
	H --> N
	H --> O
	H --> P

Did you follow the troubleshooting guide? [Y/N]

Yes, tried it in the sandbox vault

Expected result

I expect the diagram to resize to its bounding box.

Actual result

The diagram runs off the side

Environment

SYSTEM INFO:
Obsidian version: v1.8.9
Installer version: v1.8.9
Operating system: Windows 11 Enterprise 10.0.22631
Login status: not logged in
Language: en
Insider build toggle: off
Live preview: on
Base theme: adapt to system
Community theme: none
Snippets enabled: 0
Restricted mode: off
Plugins installed: 1
Plugins enabled: 1
1: Git v2.31.1

RECOMMENDATIONS:
Community plugins: for bugs, please first try updating all your plugins to latest. If still not fixed, please try to make the issue happen in the Sandbox Vault or disable community plugins.

[WhiteNoise]

This is not a bug. This is how it currently works.

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

OR

Pan and Zoom on Mermaid Diagrams

Introduce UI components (similar to the ones present on GitHub) to pan and zoom a Mermaid diagram. [chrome_iuAQmJIgOE] This assumes all mermaid diagrams are rendered to fill the available horizontal space of the page (line width) and the user zooms and pans via buttons. This FR is orthogonal to:

[arden13]

Saying that this is “how it currently works” does not make it not a bug. The diagram goes off the page and, again, is not readable.

I appreciate the first link has a list of how to hack a CSS property on top of obsidian to get it to work, but it’s pretty frustrating that this is the base property of the application itself. It’s not readable.

At least a configuration setting or something would make it easier for a lay person to utilize without having to dive into CSS