Skip to content

Instantly share code, notes, and snippets.

@vitoyayo
Forked from letientai299/mermaid-pandoc-guide.md
Created October 12, 2024 19:25
Show Gist options
  • Save vitoyayo/ec564c3c1d117d4b30e4b2394c4795e5 to your computer and use it in GitHub Desktop.
Save vitoyayo/ec564c3c1d117d4b30e4b2394c4795e5 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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment