Have only started to use mermaid a few days ago. After some trial and error I turned to Android, entered the same markup examples already tried before on desktop. Errors in my example's syntax got reported by the mermaid engine - probably meaning everything works. But how can I switch to "seeing" my rendered mermaid diagrams (on Android) ?
Your help appreciated !!
Once the note is saved they should just appear / render.
The mermaid code only appears in the note because I have also included it in a fenced code block.
Interesting, so it works on some Android phones, and it doesn't on others. I am afraid that is all I can contribute because there is nothing in my logs.
It may be worth just double-checking your Mermaid code. I have a vague recollection of speaking on this forum to someone was having a bit of difficulty with Mermaid. There was a small error in the Mermaid markdown for one of several charts in a note, but the end result was interpreted differently on Windows and Andriod. IIRC one did not display the error chart but displayed subsequent charts in the note, the other displayed nothing at all. I cannot remember which way round it was 
By the way, I assume that you have switched on Mermaid in Joplin Android settings?
It's ON as I said in my initial post, and the code comes from the joplin website 
Hm I can confirm this on Android 10 and Joplin 1.7.5 but on a Android Virtual device the mermaid ist working ...
Solved !
I had copied the first line (```mermaid) from some note (created on desktop) into my new Android mermaid note. Only when I deleted this first line and typed it again on the Android keyboard, the mermaid diagram got rendered. Other test mermaid diagrams I had made for testing all shared this problem.
I wonder if you had a space after the mermaid keyword. On desktop it's rendered as text if there's a trailing space.
No matter how I do it, write on the desktop, write on the mobile, copy together, the result is always the same. On the desktop the mermaid is rendered on the mobile not.
My code:
```mermaid
graph LR;
A-->B;
```
Preview on the mobile device
graph LR; A-->B
No space at my example, with a space it looks like this
graph LR;
A-->B;
This works for me. Have you enabled mermaid in settings?
@roman_r_m mermaid support is enabled.
Mermaid enabled on Motorola one Vision:
Mermaid disabled on Motorola one Vision:
Attached the mairmaid from the screenshots.
mermaid_test.jex (2.5 KB)
| Device | OS | Joplin | Mermaid |
|---|---|---|---|
| Desktop | Windows 10 | 1.8.2 / 1.8.3 | OK |
| Motorola one Vision | Android 10 | 1.7.5 | nOK |
| Motorola X4 | Android 11 (LineageOS 18.1) | 1.7.5 | OK |
| AVD Pixel 4 | Android 10 | 1.7.5 | OK |
| AVD Pixel 4 | Android 11 | 1.7.5 | OK |
Looks like the Mermaid plugin is just not loaded on One Vision. Is there any error in the log?
1 Like
No errors in the logfile, or I have overlooked them.
syncReport-1620208685493.txt (2.3 MB)
Are the errors from the LOG and Export debug report the samea nd the LOG button is only for direct viewing in the app or are there differences?
Yes these logs would be the same. Strange issue especially since it works on all other devices. Maybe they have a webview version that doesn't quite work with Mermaid.
We should update Mermaid anyway. Not sure if it will fix the issue, but we're a bit behind.
OK with the Android WebView update from 90.0.4430.91 to 90.0.4430.210 the mermaid diagrams work again.
3 Likes
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.