# Mermaid Diagrams not resizing to fit in page

**URL:** <https://forum.obsidian.md/t/mermaid-diagrams-not-resizing-to-fit-in-page/98078>\
**Category:** Bug graveyard\
**Tags:** mermaid\
**Created:** [March 12, 2025, 2:16pm UTC](https://forum.obsidian.md/t/mermaid-diagrams-not-resizing-to-fit-in-page/98078 "2025-03-12T14:16:54Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![arden13](https://forum.obsidian.md/letter_avatar_proxy/v4/letter/a/85f322/32.png) [@arden13](https://forum.obsidian.md/u/arden13)\
**Post date:** [March 12, 2025, 2:16pm UTC](https://forum.obsidian.md/t/mermaid-diagrams-not-resizing-to-fit-in-page/98078/1 "2025-03-12T14:16:54Z")

</div>

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.

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

```

Changing it to Top down works

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

```

however making it wide still causes this issue

```mermaid
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

```mermaid
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

 ![image](https://forum.obsidian.md/uploads/default/original/3X/1/d/1dbbefbb0c6f7ae49272b53e079516633bbd63f0.png)

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

---

<div class="post-metadata">

**Author:** ![WhiteNoise](https://forum.obsidian.md/user_avatar/forum.obsidian.md/whitenoise/32/11_2.png) [@WhiteNoise](https://forum.obsidian.md/u/WhiteNoise)\
**Post date:** [March 12, 2025, 2:46pm UTC](https://forum.obsidian.md/t/mermaid-diagrams-not-resizing-to-fit-in-page/98078/2 "2025-03-12T14:46:48Z")

</div>

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

> [@Resize and align mermaid diagrams](https://forum.obsidian.md/t/resize-and-align-mermaid-diagrams/7019):
>
> 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](https://forum.obsidian.md/t/gantt-charts-are-way-too-small-to-be-readable/7017)

OR

> [@Pan and Zoom on Mermaid Diagrams](https://forum.obsidian.md/t/pan-and-zoom-on-mermaid-diagrams/65271):
>
> Introduce UI components (similar to the ones present on GitHub) to pan and zoom a Mermaid diagram. 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:

---

<div class="post-metadata">

**Author:** ![arden13](https://forum.obsidian.md/letter_avatar_proxy/v4/letter/a/85f322/32.png) [@arden13](https://forum.obsidian.md/u/arden13)\
**Post date:** [March 12, 2025, 8:33pm UTC](https://forum.obsidian.md/t/mermaid-diagrams-not-resizing-to-fit-in-page/98078/3 "2025-03-12T20:33:44Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![system](https://forum.obsidian.md/uploads/default/original/3X/b/e/bec35fbd23ab28909bb6bfe62cb32eb82dd34019.png) [@system](https://forum.obsidian.md/u/system)\
**Post date:** [June 10, 2025, 8:34pm UTC](https://forum.obsidian.md/t/mermaid-diagrams-not-resizing-to-fit-in-page/98078/4 "2025-06-10T20:34:32Z")

</div>

Closed on June 10, 2025, 8:34pm UTC

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.