Mermaid graph is cropped when too wide for screen

[Sareth]

Importing some old markdown notes to see how Obsidian handles them.
Turns out the graphs aren’t quite there yet…

Steps to reproduce

Open a new note and paste the following into it:

```mermaid
graph TD
subgraph Client
client("Client")
end
subgraph Authentication
authFilter["Authentication Filter"]
request["HTTP Servlet Request"]
token["UsernamePasswordAuthenticationToken"]
authManager["Authentication Manager"]
secContext["Security Context"]
client --sends request--> authFilter
request --"(1) extracts name/pwd"--> authFilter
authFilter --"(2) creates"--> token
authFilter --"(3) call `authenticate` on" --> authManager
authManager --"returns populated Authentication"-->authFilter
authFilter --"(4) sets"--> secContext
end
```.

(don’t paste the last ., that’s just there to prevent the tripple-backticks from closing the code block)

Expected result

• show full graph
• e.g. as rendered in Typora:

Actual result

• graph is cropped

Environment

• Operating system: Kubuntu , Android
  (Android is even worse because of the more narrow screen)

• Debug info:

SYSTEM INFO:
	Obsidian version: v0.15.9
	Installer version: v0.15.9
	Operating system: #138-Ubuntu SMP Wed Jun 22 15:00:31 UTC 2022 5.4.0-122-generic
	Login status: logged in
	Catalyst license: none
	Insider build toggle: off
	Live preview: on
	Legacy editor: off
	Base theme: dark
	Community theme: none
	Snippets enabled: 0
	Restricted mode: off
	Plugins installed: 2
	Plugins enabled: 1
		1: Editor Syntax Highlight v0.1.3

[Dave73]

For me, it is truncated in Live Preview but complete in Read-only mode although you have to scroll to see it all. (MacOS)

[Sareth]

I’d much prefer it to be uncropped in live preview too. Because it’s annoying having to switch.

[xypage]

There’s another post about mermaid cropping their graph but someone said that it worked as expected in read only mode, and you could just scroll in preview mode, however that doesn’t work for my example.

Steps to reproduce

The following mermaid diagram:

graph TD

A[Name]
B[Name 2 sort of long]
C[short]

A --> B --> C --> A

produces the error for me. In general, the label for the middle block must be significantly longer than the label for the bottom one.

Expected result

I’d expect to see A pointing to B pointing to C pointing back to A, with the full lines visible.

Actual result

As you can see, the right side of the arrow pointing back up is partially not visible.

Environment

• Screen resolution: 1920x1080
• Operating system: Windows 10
• No community/custom themes, no extensions.
• Debug info: SYSTEM INFO:
  Obsidian version: v0.15.9
  Installer version: v0.14.5
  Operating system: Windows 10 Home 10.0.19044
  Login status: not logged in
  Insider build toggle: off
  Live preview: off
  Legacy editor: off
  Base theme: dark
  Community theme: none
  Snippets enabled: 0
  Restricted mode: on

RECOMMENDATIONS:
none

---

[Dave73]

The previous test continues to truncated in Live Preview and work under read for me. The new test is truncated in both Live Preview and read modes using default, Minimal, and Things themes.

[xypage]

Exactly, thank you for a much more succinct description of what I was trying to say.

[gauravkesarwani]

Did someone found a solution to this. My class diagrams are cropped too.

[Dave73]

Both examples seem to work for me these days.

Using V1.0.3 with 1.0.0 installer and Minimal Theme V6.1.11

[gotro]

Updating the theme to Minimal fixed this problem for me. My graphs are no longer cut off and now I have a horizontal scrollbar in both edit and read-only views.