Skip to content

Instantly share code, notes, and snippets.

@shearichard
Last active March 11, 2025 21:36
Show Gist options
  • Save shearichard/1dd0645f53b451ab2e87bf129021f634 to your computer and use it in GitHub Desktop.
Save shearichard/1dd0645f53b451ab2e87bf129021f634 to your computer and use it in GitHub Desktop.
Converting Markdown (with embedded flowcharts) to pretty looking HTML

Converting Markdown (with embedded diagrams) to HTML

Flowcharts

The following assumes that :

 mkdir my-mermaid-project
 cd my-mermaid-project
 npm init -y
 npm install mermaid-filter
 cd ..
 pandoc -F ./my-mermaid-project/node_modules/.bin/mermaid-filter --template=clean_menu.html -f markdown -t html5 -o ./foo.html ./foo.md

Entity-Relationship Diagrams

To date I have not been able to render the mermaid format entity-relationship diagrams to HTML directly. However I have been able to render them to SVG and PDF.

mermaid-client

First install mermaid-client (in this example I have a NPM project within my-mermaid-project and I am installing the package locally into that).

cd my-mermaid-project
npm install @mermaid-js/mermaid-cli

Convert to PDF

Assume that a Markdown file exists which contains only the mermaid diagram (a more complex input may work but I haven't yet tested that), now execute the following command.

./my-mermaid-project/node_modules/.bin/mmdc -e pdf -i ./shea-test-material/test2.md -o ./shea-test-material/test2.pdf
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment