Mermaid graphs cropped on right edge of allocated frame

Steps to reproduce

Use the following mermaid instructions:

%%{ init: { 'flowchart': { 'curve': 'bumpX' } } }%%
graph LR
classDef L1 fill:#0f0,stroke:#000,stroke-width:1px,font-size:12pt;
classDef L2 fill:#0d0,stroke:#000,stroke-width:0px,font-size:12pt;
classDef L3 fill:#0b0,stroke:#000,stroke-width:0px,font-size:12pt;
classDef L4 fill:#090,stroke:#000,stroke-width:0px,font-size:12pt;
classDef L5 fill:#070,stroke:#000,stroke-width:0px,font-size:12pt;
11TrunkofHealth("1.1. Trunk of Health")
class 11TrunkofHealth internal-link
style 11TrunkofHealth font-size:50pt;
subgraph 11TrunkofHealthsub["1.1. Trunk of Health"]
direction LR
	111HumoralEnergies("1.1.1. Humoral Energies")
	11TrunkofHealth ==> 111HumoralEnergies
	class 111HumoralEnergies internal-link
	style 111HumoralEnergies font-size:30pt,fill:#440;
	subgraph 111HumoralEnergiessub["1.1.1. Humoral Energies"]
	direction LR
		11115LoongWindHumoralEnergy("1.1.1.1-5. Loong (Wind) Humoral Energy")
		111HumoralEnergies ==> 11115LoongWindHumoralEnergy
		class 11115LoongWindHumoralEnergy internal-link
		style 11115LoongWindHumoralEnergy font-size:20pt,fill:#0e0;
		subgraph 11115LoongWindHumoralEnergysub["1.1.1.1-5. Loong (Wind) Humoral Energy"]
		direction LR
			1111LifeSustainingWind("1.1.1.1. Life Sustaining Wind")
			11115LoongWindHumoralEnergy ==> 1111LifeSustainingWind
			class 1111LifeSustainingWind internal-link
			style 1111LifeSustainingWind font-size:16pt,fill:#0e0;
			1112AscendingWind("1.1.1.2. Ascending Wind")
			11115LoongWindHumoralEnergy ==> 1112AscendingWind
			class 1112AscendingWind internal-link
			style 1112AscendingWind font-size:16pt,fill:#0e0;
			1113PervasiveWind("1.1.1.3. Pervasive Wind")
			11115LoongWindHumoralEnergy ==> 1113PervasiveWind
			class 1113PervasiveWind internal-link
			style 1113PervasiveWind font-size:16pt,fill:#0e0;
			1114FireAccompanyingWind("1.1.1.4. Fire Accompanying Wind")
			11115LoongWindHumoralEnergy ==> 1114FireAccompanyingWind
			class 1114FireAccompanyingWind internal-link
			style 1114FireAccompanyingWind font-size:16pt,fill:#0e0;
			1115DescendingWind("1.1.1.5. Descending Wind")
			11115LoongWindHumoralEnergy ==> 1115DescendingWind
			class 1115DescendingWind internal-link
			style 1115DescendingWind font-size:16pt,fill:#0e0;
		end
		class 11115LoongWindHumoralEnergysub L5
		111610TripaBileHumoralEnergy("1.1.1.6-10. Tripa (Bile) Humoral Energy")
		111HumoralEnergies ==> 111610TripaBileHumoralEnergy
		class 111610TripaBileHumoralEnergy internal-link
		style 111610TripaBileHumoralEnergy font-size:20pt,fill:#ec8;
		subgraph 111610TripaBileHumoralEnergysub["1.1.1.6-10. Tripa (Bile) Humoral Energy"]
		direction LR
			1116Digestingbile("1.1.1.6. Digesting bile")
			111610TripaBileHumoralEnergy ==> 1116Digestingbile
			class 1116Digestingbile internal-link
			style 1116Digestingbile font-size:16pt,fill:#ec8;
			1117Colorchangingbile("1.1.1.7. Color-changing bile")
			111610TripaBileHumoralEnergy ==> 1117Colorchangingbile
			class 1117Colorchangingbile internal-link
			style 1117Colorchangingbile font-size:16pt,fill:#ec8;
			1118Accomplishingbile("1.1.1.8. Accomplishing bile")
			111610TripaBileHumoralEnergy ==> 1118Accomplishingbile
			class 1118Accomplishingbile internal-link
			style 1118Accomplishingbile font-size:16pt,fill:#ec8;
			1119Visionproducingbile("1.1.1.9. Vision-producing bile")
			111610TripaBileHumoralEnergy ==> 1119Visionproducingbile
			class 1119Visionproducingbile internal-link
			style 1119Visionproducingbile font-size:16pt,fill:#ec8;
			11110Complexionclearingbile("1.1.1.10. Complexion-clearing bile")
			111610TripaBileHumoralEnergy ==> 11110Complexionclearingbile
			class 11110Complexionclearingbile internal-link
			style 11110Complexionclearingbile font-size:16pt,fill:#ec8;
		end
		class 111610TripaBileHumoralEnergysub L5
		1111115BekenPhlegmHumoralEnergy("1.1.1.11-15. Beken (Phlegm) Humoral Energy")
		111HumoralEnergies ==> 1111115BekenPhlegmHumoralEnergy
		class 1111115BekenPhlegmHumoralEnergy internal-link
		style 1111115BekenPhlegmHumoralEnergy font-size:20pt,fill:#bbb;
		subgraph 1111115BekenPhlegmHumoralEnergysub["1.1.1.11-15. Beken (Phlegm) Humoral Energy"]
		direction LR
			11111Supportingphlegm("1.1.1.11. Supporting phlegm")
			1111115BekenPhlegmHumoralEnergy ==> 11111Supportingphlegm
			class 11111Supportingphlegm internal-link
			style 11111Supportingphlegm font-size:16pt,fill:#bbb;
			11112Mixingphlegm("1.1.1.12. Mixing phlegm")
			1111115BekenPhlegmHumoralEnergy ==> 11112Mixingphlegm
			class 11112Mixingphlegm internal-link
			style 11112Mixingphlegm font-size:16pt,fill:#bbb;
			11113Tastingphlegm("1.1.1.13. Tasting phlegm")
			1111115BekenPhlegmHumoralEnergy ==> 11113Tastingphlegm
			class 11113Tastingphlegm internal-link
			style 11113Tastingphlegm font-size:16pt,fill:#bbb;
			11114Satisfyingphlegm("1.1.1.14. Satisfying phlegm")
			1111115BekenPhlegmHumoralEnergy ==> 11114Satisfyingphlegm
			class 11114Satisfyingphlegm internal-link
			style 11114Satisfyingphlegm font-size:16pt,fill:#bbb;
			11115Connectingphlegm("1.1.1.15. Connecting phlegm")
			1111115BekenPhlegmHumoralEnergy ==> 11115Connectingphlegm
			class 11115Connectingphlegm internal-link
			style 11115Connectingphlegm font-size:16pt,fill:#bbb;
		end
		class 1111115BekenPhlegmHumoralEnergysub L5
	end
	class 111HumoralEnergiessub L4
	112BodilyConstituents("1.1.2. Bodily Constituents")
	11TrunkofHealth ==> 112BodilyConstituents
	class 112BodilyConstituents internal-link
	style 112BodilyConstituents font-size:30pt;
	subgraph 112BodilyConstituentssub["1.1.2. Bodily Constituents"]
	direction LR
		1121Nutritionalessence("1.1.2.1. Nutritional essence")
		112BodilyConstituents ==> 1121Nutritionalessence
		class 1121Nutritionalessence internal-link
		style 1121Nutritionalessence font-size:20pt;
		1122Blood("1.1.2.2. Blood")
		112BodilyConstituents ==> 1122Blood
		class 1122Blood internal-link
		style 1122Blood font-size:20pt;
		1123Muscle("1.1.2.3. Muscle")
		112BodilyConstituents ==> 1123Muscle
		class 1123Muscle internal-link
		style 1123Muscle font-size:20pt;
		1124Fat("1.1.2.4. Fat")
		112BodilyConstituents ==> 1124Fat
		class 1124Fat internal-link
		style 1124Fat font-size:20pt;
		1125Bones("1.1.2.5. Bones")
		112BodilyConstituents ==> 1125Bones
		class 1125Bones internal-link
		style 1125Bones font-size:20pt;
		1126Marrow("1.1.2.6. Marrow")
		112BodilyConstituents ==> 1126Marrow
		class 1126Marrow internal-link
		style 1126Marrow font-size:20pt;
		1127Reproductiveessences("1.1.2.7. Reproductive essences")
		112BodilyConstituents ==> 1127Reproductiveessences
		class 1127Reproductiveessences internal-link
		style 1127Reproductiveessences font-size:20pt;
	end
	class 112BodilyConstituentssub L4
	113WasteProducts("1.1.3. Waste Products")
	11TrunkofHealth ==> 113WasteProducts
	class 113WasteProducts internal-link
	style 113WasteProducts font-size:30pt;
	subgraph 113WasteProductssub["1.1.3. Waste Products"]
	direction LR
		1131Feces("1.1.3.1 Feces")
		113WasteProducts ==> 1131Feces
		class 1131Feces internal-link
		style 1131Feces font-size:20pt;
		1132Urine("1.1.3.2. Urine")
		113WasteProducts ==> 1132Urine
		class 1132Urine internal-link
		style 1132Urine font-size:20pt;
		1133Sweat("1.1.3.3. Sweat")
		113WasteProducts ==> 1133Sweat
		class 1133Sweat internal-link
		style 1133Sweat font-size:20pt;
	end
	class 113WasteProductssub L4
	114Conclusion("1.1.4. Conclusion")
	11TrunkofHealth ==> 114Conclusion
	class 114Conclusion internal-link
	style 114Conclusion font-size:30pt;
	subgraph 114Conclusionsub["1.1.4. Conclusion"]
	direction LR
		11411GoodHealth("1.1.4.1.1. Good Health")
		114Conclusion ==> 11411GoodHealth
		class 11411GoodHealth internal-link
		style 11411GoodHealth font-size:20pt;
		11412Longevity("1.1.4.1.2. Longevity")
		114Conclusion ==> 11412Longevity
		class 11412Longevity internal-link
		style 11412Longevity font-size:20pt;
		11421Dharma("1.1.4.2.1. Dharma")
		114Conclusion ==> 11421Dharma
		class 11421Dharma internal-link
		style 11421Dharma font-size:20pt;
		11422Wealth("1.1.4.2.2. Wealth")
		114Conclusion ==> 11422Wealth
		class 11422Wealth internal-link
		style 11422Wealth font-size:20pt;
		11423Happiness("1.1.4.2.3. Happiness")
		114Conclusion ==> 11423Happiness
		class 11423Happiness internal-link
		style 11423Happiness font-size:20pt;
	end
	class 114Conclusionsub L4
end
class 11TrunkofHealthsub L3

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

Yes! Sandbox vault. And my own vault in restricted mode.

Expected result

Before the recent update to 1.5.3 (I was on 1.4.x), the graph would shrink to fit as best as possible within the confines of the window. Now, part of the graph just isn’t visible.

Actual result

Right part of graph is beyond the edge of the space allocated for it and is not visible. It is not reduced in size to fit.

Environment

SYSTEM INFO:
Obsidian version: v1.5.3
Installer version: v1.4.14
Operating system: Darwin Kernel Version 23.1.0: Mon Oct 9 21:33:00 PDT 2023; root:xnu-10002.41.9~7/RELEASE_ARM64_T6031 23.1.0
Login status: logged in
Catalyst license: none
Insider build toggle: off
Live preview: on
Base theme: adapt to system
Community theme: none
Snippets enabled: 0
Restricted mode: on

RECOMMENDATIONS:
none


Additional information

Partly cropped:

Removing “Readable line length” allows for more space to see complete graph. However, I have graphs that are far larger that still won’t fit.

Workaround: use ![[mermaid graph note]] in another note, and at least you can scroll left and right to see the complete graph.

you did not search before posting. I think it’s this:

I did search, but didn’t come across that bug report. Thanks for pointing it out. It’s been several months with what seems like an easy fix, so we shall see…

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