Hi there, I have a question. Is it possible to set the Mermaid Graphs to a specific size? One screenshot shows a graph once the note has been opened (little visible). The second screenshot shows the graph in horizontal mode and when zoomed out. The font size is of course very small. Do you have …

They look a bit strange indeed. Please could you post the complete Markdown you are using to replicate this issue? By the way, for now you can already zoom in or out on the diagram, which might help a bit.

Hi This is the mermaid markdown text: graph TB; Kombinatorik-->Alle; Alle-->leer1-->id1[Mit Wiederholung ja]--- id11([F1]):::fuellungrot; Alle-->leer2-->id4[Mit Wiederholung nein]--- id12([F2]):::fuellungrot; Kombinatorik-->Auswahl; Auswahl-->id7[Reihenfolge wichtig ja]; …

Additional Information In the latest windows version of joplin (1.0.197), i can’t zoom in/out of mermaid graphs and i can’t scroll to the right. So this is how it looks like: [win111]

It's a bit of a hack but you can use userstyle.css to add a bit of control over Mermaid chart sizes in the desktop client. [image] Share your CSS couch_and_lampLounge Mermaid - Chart Widths I found that when using Mermaid pie charts the chart would expand to f…

Thanks for your answer! I added in the beginning of the note: <style> svg[id^="mermaid-"] { min-width: 200px; max-width: 500px; } </style> The mermaid graph is now smaller (see the screenshot). But is there a way to change the lettersize and the size of the boxes? I’m a beginner with the userst…

[image] schreibelehmann: But is there a way to change the lettersize and the size of the boxes? I have only had a quick look and test but it seems that font sizes can be modified. svg[id^="mermaid-"] { min-width: 200px; max-width: 500px; font-size: 20px; } However Mermaid charts are SVG fil…

Mermaid rendering is a big buggy on mobile and I’m not certain we can fix that, as we have very little control on how the lib renders graphs. On desktop though we should have an horizontal scrollbar to allow large graphs like in your example.

Issue is there: https://github.com/laurent22/joplin/issues/3097

Thanks for the clarification. Lets see what the future brings for scrolling horizontally:)

This is the right topic. :wink: Maybe it would help to report this issue in the Mermaid repo. Maybe they can either fix this or suggest workarounds for small screens.

Mermaid graph size

Support

dpoulton 1 April 2020 18:37 5

It's a bit of a hack but you can use userstyle.css to add a bit of control over Mermaid chart sizes in the desktop client.

Topic		Replies	Views
Incomplete rendering of text in the mermaid code block Support	6	1129	22 July 2020
Mermaid Font Size Support	0	1268	11 January 2022
Mermaid output window Features	1	644	16 January 2024
Mermaid rendering is too tall Support	7	3471	10 January 2021
Enhancements to the Mermaid window Features	1	393	15 January 2024

Mermaid graph size

Related topics