The markdown pdf and gh jekyll pages does not render the mermaid blocks.

[thatbeautifuldream]

Description

As you may see the diagram is not generated I've tried changing mermaid server and deploying it to gh pages it has no effect on the same, kindly guide me to fix the error, thanks.

Niether the gh pages deployment seems to have render the diagram, I've used the ```mermaid notation to indicate the diagram code

Steps to reproduce

Here is the link to my gh pages deployment.

Here is the markdown code

Here is the rendered pdf

Screenshots

No response

Code Sample

No response

Setup

• Mermaid version:
• Browser and Version: [Chrome, Edge, Firefox]

Additional Context

• Altough i have fixed it temporarily using the mermaid cli , if there exists a solution for markdown pdf kindly help me out.

[huynhicode]

Hi @thatbeautifuldream

You can try installing a VS Code extension called, "Markdown Preview Mermaid".

I cloned your repo and have the extension enabled. Was able to view the diagram in the markdown previewer.

[thatbeautifuldream]

Hi @thatbeautifuldream

You can try installing a VS Code extension called, "Markdown Preview Mermaid".

I cloned your repo and have the extension enabled. Was able to view the diagram in the markdown previewer.

Thank you for your reply, i have already tried that but that is not my problem problem is well when markdown-pdf generates the pdf it does not render the mermaid diagrams in the pdf instead it spits out a regular code block.

[thatbeautifuldream]

I have found a hack i may illustrate it here for others stuck in simmilar problem.

• To generate the svg files from the embedded mermaid code blocks inside markdown you may use mermaid-cli package, which can be globally installed using npm.

npm install -g @mermaid-js/mermaid-cli

• Transform a markdown file with mermaid diagrams

mmdc -i readme.md -o readme-out.md

This way I am able to genearate a markdown with diagrams that are rendered just as perfect.

Its just an extra step in my note taking process which i dont mind if there is no solution to it. But if there is do help me out here. Thanks.

[aloisklink]

Hi @thatbeautifuldream, markdown-pdf does not support Mermaid by default, see https://github.com/alanshaw/markdown-pdf/issues/177.

As far as I'm aware, the only tool that might help go from Markdown to PDF is pandoc with a mermaid-filter. But using mermaid-cli like you mentioned is probably the easiest way of doing things!

For your GitHub pages deployment, whatever tool that you're using to convert Markdown to HTML also needs to support Mermaid. For example, if you're using Jekyll, you may want to use the jekyll-spaceship plugin, or just embed the following HTML into your Jekyll templates:

    <script type="module">
      import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';
      mermaid.initialize({ startOnLoad: true });
    </script>

There is some generic documentation on how to do this here: https://mermaid.js.org/intro/n00b-gettingStarted.html, but you may want to follow a Jekyll specific guide.

---

By the way, I'm going to close this issue, since it's not an issue with the Mermaid project, and it's instead an issue with markdown-pdf and jekyll, but feel free to continue to comment here!