Skip to content

Instantly share code, notes, and snippets.

@letientai299
Last active July 18, 2025 07:25
Show Gist options
  • Save letientai299/2c974b4f5e7b05be52d369ff8693c29a to your computer and use it in GitHub Desktop.
Save letientai299/2c974b4f5e7b05be52d369ff8693c29a to your computer and use it in GitHub Desktop.
Render PDF from markdown that using mermaid

Render PDF from Markdown that using mermaid

You will need:

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

sudo apt install pandoc -y
# 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
Display the source blob
Display the rendered blob
Raw
@aleddaheig
Copy link

Add these and your chart will be of higher quality.

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment