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 any ideas how to make this look better?
Best regards!
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];
Auswahl-->id8[Reihenfolge wichtig nein];
id7[Reihenfolge wichtig ja]-->id2[Mit Wiederholung ja] --- id13([F3]):::fuellungrot;
classDef fuellungrot fill:#f96;
id7[Reihenfolge wichtig ja]-->id5[Mit Wiederholung nein]--- id14([F4]):::fuellungrot;
id8[Reihenfolge wichtig nein]-->id3[Mit Wiederholung ja]--- id15([F5]):::fuellungrot;
id8[Reihenfolge wichtig nein]-->id6[Mit Wiederholung nein]--- id16([F6]):::fuellungrot;
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:
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.
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 userstyle ^-^
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 files which seem to contain their own stylesheet so forcing a font size may have an impact on scaling and / or break other types of chart.
I have no idea how to even start trying to control the box size!!!
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. 
Maybe it would help to report this issue in the Mermaid repo. Maybe they can either fix this or suggest workarounds for small screens.
@laurent @PackElend Do we really need to add horizontal scrolling to the mermaid graph as the viewer pane is scrollable and there is no difficulty in viewing the complete graph.
Is this scrollbar feature on desktop new? I have also just noticed that you can scroll wide charts on mobile (Android 1.0.327) as well.
Although I am not sure about desktop, on mobile it is definitely new.
If anyone is looking for it:
On v1.5.7 mermaid chart its auto resized to fit render pane.
If chart is big its rendering becomes too small. You can add code below to your note to make it bigger
<style>
.mermaid {width:200% !important}
</style>
I've noticed that too. See also Upgrading Mermaid
Actually i found it by searching for something else - when one makes very tall graph mermaid creates unnecessary big top and bottom margins. There's issue for it: