any plan to support mermaid?

[timestee]

from issue https://github.com/markedjs/marked/issues/1544 do we have any plan to support mermaid

[UziTech]

No, but you can create an extension that can support it though.

[fabiodrg]

I am trying to create an extension for this. My use case is for a Markdown -> PDF converter.

As mermaid does not have a proper API to generate the SVGs in Node.js context, I can only think of two alternatives:

1. The marked extension simply generates the HTML. It is up to the extension user to ensure it adds post-processing on the HTML in a browser context: loads the mermaid javascript libraries and invokes mermaid to render the diagrams (https://mermaid-js.github.io/mermaid/#/n00b-gettingStarted?id=_3-calling-the-javascript-api).

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

<script src="mermaid.js"> // load mermaid js
<script>mermaid.init()</script>

2. A hack-ish solution that I am trying is using a headless browser, e.g. puppeteer, for running mermaid and get the rendered SVG code. That way the output of marked using this extension would not require further processing. The issue is marked does not support async parsers... at least not yet, there is some WIP #2405

I will add a link to the repo where I am trying this. Let me know if you have any suggestion. :smile:

Update:

• First approach, https://github.com/fabiodrg/marked-mermaid.
• Branch exploring the second approach: https://github.com/fabiodrg/marked-mermaid/tree/headless-browser

[UziTech]

You could create the SVG on the server with @mermaid-js/mermaid-cli.

[politician]

Also found this https://github.com/yousifalraheem/mermaid-parse

[hyrious]

Here's what I did to add mermaid to my toy lib.

[cnshsliu]

I wrote my own:

https://github.com/cnshsliu/smp.nvim#mermaid

give it a try.