Is it possible to embed mermaid diagrams (e.g. flowchart) in HTML in Joplin?

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?

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!

1 Like

I think the question is also how to integrate the JS callback. I don't know unfortunately.