Skip to content

Instantly share code, notes, and snippets.

@letientai299
Last active April 29, 2024 18:39
Show Gist options
  • Star 32 You must be signed in to star a gist
  • Fork 4 You must be signed in to fork a gist
  • 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 Markdonw that using mermaid

You will need:

sudo apt install pandoc -y
# Assuming you have nodejs and npm installed
# (I have try to install it 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
Display the source blob
Display the rendered blob
Raw
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