Render PDF from markdown that using mermaid

mermaid-pandoc-guide.md

Render PDF from Markdown that using mermaid

You will need:

• Pandoc

This guide is based on Ubuntu, for other OS, use their package manager instead.

sudo apt install pandoc -y

• pandoc mermaid-filter

# Assuming you have nodejs and npm installed
# (I have tried with yarn, and failed.)
npm i -g mermaid-filter

• pdflatex and font, get it from textlive

sudo apt-get -y install texlive-latex-recommended \
  texlive-pictures texlive-latex-extra texlive-fonts-recommended

After everything installed (assume that pandoc and mermaid-filter are available in your $PATH)

pandoc  -F mermaid-filter -o mermaid-pandoc-guide.pdf \
  mermaid-pandoc-guide.md

Note

• Pandoc in this setup doens't play well with github code fence. Hence, I intentionally omit that.
• Unlike HTML, PDF has fixed witdh, hence, the code is split in multiple line.
• The chart won't look nice on big screen :(

Example graph

graph TD;
    A-->B;
    A-->C;
    B-->D;
    C

Loading

mermaid-pandoc-guide.pdf

Add these and your chart will be of higher quality.

```{.mermaid format=svg}
%%{init: {"flowchart": { "htmlLabels": false}} }%%

png seems to work better for me.

Thanksss for the code.
For better result, without problems with the svg, we can use the format pdf.

```{.mermaid format=pdf}
graph TD;
    A-->B;
    A-->C;
    B-->D;
    C

Within the following screenshot it is show the pdf format first and second one using only ```mermaid