Share your CSS

Lounge
54

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.

piechart
piechart1528×1063 59.6 KB

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.

cutoff

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!

not_cutoff
not_cutoff962×451 14.3 KB

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.

7 Likes