Add support for mermaidjs

[aksdb]

mermaidjs would allow writing diagrams/graphs in code, which comes in very handy for technical presentations.

[yhatt]

👉 TL;DR

mermaid.js relies on client-side scripts for size measurement of fonts and diagrams. is Marp Core does not support mermaid.js because Marp designed for reliable slide rendering based on server-side rendering (SSR).

Check out the blocker issue of mermaid.js 👉 mermaid-js/mermaid#3650

If you want, you can render mermaid.js, with injected client script via raw HTML or plugins. Check out following discussion by community.

However, Marp team does not take any responsibility for its rendering issues (e.g. differences in font sizes)

Tip

Instead of using mermaid.js client script in Markdown/plugins directly, I'm suggesting to render mermaid.js via the external service for server-side diagram rendering such as kroki and mermaid.ink. Diagram and slides can be fully rendered within server, no required client scripts, and Marp can return the reliable result.
👉 #139 (comment)

---

We had tried to implement mermaid.js into Marp Core once, but we've stopped working because of some technical problems.
yhatt/marp#125 (comment)

In Marp Core, you can try to use markdown-it plugin for enhancing features as you like.
https://www.npmjs.com/search?q=keywords%3Amarkdown-it-plugin%20mermaid

And you can also use mermaid.js in Marp through inline script (Require to enable insecure HTML in your tool): yhatt/marp#125 (comment)

[acgrissom]

In VS Code for Windows, I managed to get Mermaid working in the preview by using a div tag. (It doesn't seem to render with ```mermaid). There are no obvious problems. But it doesn't appear in the HTML or PDF export. I'm wondering if there's a quick fix for this.

[Chlorie]

The <div> tag workaround doesn't seem to be working well on my side, the font size is too big to fit in the boxes...

[jschlenker]

Not quite sure why it's working but here is my workaround anyways:
Adding a custom theme (mermaid.css) that imports your favourite theme and changes the font-size of the mermaid class:

/* @theme mermaid */

@import "uncover";

.mermaid {
  font-size: 10px;
}

Then, when creating the div add the following:

<div class="mermaid">
%%{init: {'themeVariables': { 'fontSize': '200%'}}}%%
flowchart LR;
    A([Some node])-->B;
    B[Some other node]-->C;
    B-->D;
    C-->D;
</div>

where the fontSize should be some value >= 200%, also allowing you to scale your charts.
Leaving me with:

Of course you also need to set the theme accordingly and add your custom theme as described here.

[yhatt]

I've made the basic plugin example to render various diagrams at
https://gist.github.com/yhatt/8931dd98769bcc1c5b4b92fd1234a190. It is powered by kroki.io for reliable rendering in Marp slide.

Currently we have no plan to integrate as the default feature of Marp to prevent wasting kroki.io instance by free riding.

[niosus]

Cycling back to the using the <div> trick: is there a way to make it render in the HTML output? I don't know much about these things but it seems logical that if we do get a nice rendering in the marp preview we should get one also in HTML 🤔 Am I missing the point here?

[yhatt]

Aren't you using Markdown Preview Mermaid Support extension in VS Code? This extension will try to recognize <div class="mermaid"> and render the diagram in the preview of VS Code, if Marp preview mode was enabled or not.

VS Code has no ability to get "exactly" same rendering result as built-in Markdown preview if modified preview pane by scripts provided from other extensions. Thus, the export HTML (provided by internal Marp CLI) may be differ from the preview.

Again, as described in yhatt/marp#125 (comment), just adding 2 lines at the end of Markdown is working for me.

<script src="https://unpkg.com/mermaid@8.1.0/dist/mermaid.min.js"></script>
<script>mermaid.initialize({startOnLoad:true});</script>

These scripts manually instruct rendering mermaid diagrams on behalf of Markdown Preview Mermaid Support extension.

Ability of extending Marp export process by VS Code extensions has been discussed at marp-team/marp#176.

[codingluke]

Maybe this could be a way to add mermaid to marp. https://github.com/mermaid-js/mermaid-cli#transform-a-markdown-file-with-mermaid-diagrams. When there would be a way to add preprocessors to the engine, the marmaid-cli could transform the mermaid code to SVG before marp is rendering it.

In the meentime I am using the kroki-plugin. However kroki has at the moment a mermaid font rendering problem...

[tisuchi]

@yhatt Unfortunately it doesn't work for Mac.

I use the mermaid plugin, and it works for .md files but when I use it for marp, it doesn't recognize it. This is what I get it.

[yhatt]

@tisuchi Marp for VS Code does not allow raw HTML tags by default because of security reason. You must opt-in to use HTML tags manually.
https://github.com/marp-team/marp-vscode#enable-html-in-marp-markdown-%EF%B8%8F

After enabling HTML from the preference, you can use mermaid with <script> tag. Probably you may also have to mitigate the security setting for VS Code's Markdown preview.

---
marp: true
---

<div class="mermaid">
graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;
</div>

<!-- Put this script at the end of Markdown file. -->
<script type="module">
import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';
mermaid.initialize({ startOnLoad: true });

window.addEventListener('vscode.markdown.updateContent', function() { mermaid.init() });
</script>

[tisuchi]

Thanks for your answer @yhatt

I found the same solution and I note it here for further reference for others.

https://laravel-school.com/snippet/how-to-enable-mermaid-or-html-directive-with-marp-in-vs-code-62