Share your CSS

Mermaid - Chart Widths

I found that when using Mermaid pie charts the chart would expand to fill all the available space. Therefore if you had a pie chart in a note with Joplin maximized on a large screen the pie chart was huge.

After some searching / experimenting I found that by adding the below to userstyle.css you can restrict the width of Mermaid charts.

svg[id^="mermaid-"] {
	width: 500px;

or maybe,

svg[id^="mermaid-"] {
	min-width: 200px;
	max-width: 500px;

There is also a “side-effect”. I previously reported an issue where having a flowchart without a “node” on its left side appeared to be cut off on its left.


This was closed as a Mermaid issue as it seems that when a chart is on the left Mermaid does not draw the “empty” line.

However using the above css moves the flowcart out from the left and the line is drawn!

This setting may cause problems for those with horizontal charts and possibly using % rather than px would be better, but hopefully it may assist someone else or act as a starting point for something better…

Edit: Added min/max-width variant.