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
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