Mermaid: Pie Chart is cut off/clipped

Steps to reproduce

  • Be on Windows 10
  • enable 125% scaling
    create mermaid chart using markdown code:
pie showData
    title Key elements in Product X
    "Calcium" : 42.96
    "Potassium" : 50.05
    "Magnesium" : 10.01
    "Iron" :  5

Expected result

Chart should fit the page

Actual result

rightmost part of chart is clipped


  • Operating system: windows 10

  • Debug info:

	Obsidian version: v1.0.3
	Installer version: v0.15.9
	Operating system: Windows 10 Pro 10.0.19045
	Login status: not logged in
	Insider build toggle: off
	Live preview: on
	Legacy editor: off
	Base theme: dark
	Community theme: none
	Snippets enabled: 0
	Restricted mode: on


Additional information

This happens at 100% too. I am sorry but we are not gonna do anything about this until mermaid implements a way to specify size and position.

Makes sense.
Would it help if size was predictable? Allowing you to instead scale graphs based on expected graph size instead of forcing it?
Just asking because I’m taking this to the mermaid team and want to understand all options.
Any further detail you have that may help in my request for them is highly appreciated.

If you are in touch with the mermaid developers show them my FR.
I guess if mermaid produced a graph of fixed size, we could handle the resizing, position on our end.
We need something that works consistently and in the same way across all graphs.

Thanks for your answer. I’m in no way in touch with mermaid developers, but I’m willing to put some time in ensuring all details and options are on the table, including looking into some open source volunteering. Will see if I can get anything done.
I originally missed your feature request. Just seen it now.
Thanks again and all the best.

There is a specific issue upstream about pie charts:

I also brought this up here Beginner Questions · mermaid-js · Discussion #4441 (

In this BR there are two mixed issues. One is specifically tied to the pie chart, the other is more broadly the inability for user to specify the graph size and alignment.

In my theme Dune I reworked mermaid diagrams.
Now diagrams display full width and don’t get cut anymore, I improved diagram readability for both dark add light theme, added diagram zoom and much more. Read more in my documentation here