Skip to content

Instantly share code, notes, and snippets.

@letientai299
Last active May 31, 2024 12:40
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
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment