Operating system
Android
Joplin version
3.2.7
Sync target
File system
What issue do you have?
Is it possible to embed mermaid diagrams (e.g. flowchart) in HTML in Joplin?
Android
3.2.7
File system
Is it possible to embed mermaid diagrams (e.g. flowchart) in HTML in Joplin?
Joplin does support Mermaid Diagrams if that is what you are asking...
It is supported on desktop and mobile. I cannot recall if it is enabled by default so you may have to switch it on in the Markdown section of the app settings.
Thank you very much for your reply. I mean something like this:
<body>
<pre class="mermaid">
flowchart LR
A-->B
B-->C
C-->D
click A callback "Tooltip"
click B "https://www.github.com" "This is a link"
click C call callback() "Tooltip"
click D href "https://www.github.com" "This is a link"
</pre>
<script>
window.callback = function () {
alert('A callback was triggered');
};
const config = {
startOnLoad: true,
flowchart: { useMaxWidth: true, htmlLabels: true, curve: 'cardinal' },
securityLevel: 'loose',
};
mermaid.initialize(config);
</script>
</body>
in markdown editor you type ```mermaid and you are good to go.
By example you can take one of the demo provided by mermaid site:
sequenceDiagram
Alice ->> Bob: Hello Bob, how are you?
Bob-->>John: How about you John?
Bob--x Alice: I am good thanks!
Bob-x John: I am good thanks!
Note right of John: Bob thinks a long<br/>long time, so long<br/>that the text does<br/>not fit on a row.
Bob-->Alice: Checking with John...
Alice->John: Yes... John, how are you?
And then it will display a sequence Diagram:
in the mobile and desktop editors
Enjoy!
I think the question is also how to integrate the JS callback. I don't know unfortunately.