Skip to content

Instantly share code, notes, and snippets.

@tedivm
Created April 11, 2024 21:00
Show Gist options
  • Save tedivm/57569a16e3b703181541c4bc07f4d787 to your computer and use it in GitHub Desktop.
Save tedivm/57569a16e3b703181541c4bc07f4d787 to your computer and use it in GitHub Desktop.
Rob's Mermaid and Dot Diagrams Makefile
# Configuration
MAKEFLAGS += -j8
DOT_OPTIONS:=-Nfontname=arial -Efontname=arial -Gfontname=arial
MMD_OPTIONS:=-w 2000 -b transparent --cssFile ./mermaid_png.css --configFile ./mermaid_config.json
# Get all diagram files
MERMAID_FILES:=$(shell find . -name "*.mmd" -type f -not -path '*/build/*')
DOT_FILES:=$(shell find . -name "*.dot" -type f -not -path '*/build/*')
# Files that should be generated
MMD_SVGS:=$(addsuffix .mmd.svg, $(basename $(MERMAID_FILES)))
MMD_PNGS:=$(addsuffix .mmd.png, $(basename $(MERMAID_FILES)))
MMD_PDFS:=$(addsuffix .mmd.pdf, $(basename $(MERMAID_FILES)))
DOT_SVGS:=$(addsuffix .dot.svg, $(basename $(DOT_FILES)))
DOT_PNGS:=$(addsuffix .dot.png, $(basename $(DOT_FILES)))
DOT_PDFS:=$(addsuffix .dot.pdf, $(basename $(DOT_FILES)))
# Begin Targets
.PHONY: all
all: diagrams
#
# Diagrams
#
.PHONY: diagrams
diagrams: mermaid_files dot_files
.PHONY: diagrams-fresh
diagrams-clean: delete_mermaid_images delete_dot_images
#
# Mermaid
#
.PHONY: mermaid_files
mermaid_files: $(MMD_SVGS) $(MMD_PNGS) $(MMD_PDFS)
.PHONY: mermaid_files_fresh
mermaid_files_fresh: delete_mermaid_images mermaid_files
.PHONY: delete_mermaid_images
delete_mermaid_images:
rm $(MMD_SVGS) || true
rm $(MMD_PNGS) || true
rm $(MMD_PDFS) || true
%.mmd.svg: %.mmd
$(eval TMP := $(shell mktemp -d))
npx -p @mermaid-js/mermaid-cli mmdc $(MMD_OPTIONS) -e svg -i $< -o $(TMP)/diagram.svg
xmllint --format $(TMP)/diagram.svg > $@
rm -R $(TMP)
%.mmd.png: %.mmd
npx -p @mermaid-js/mermaid-cli mmdc $(MMD_OPTIONS) -e png -i $< -o $@
%.mmd.pdf: %.mmd
npx -p @mermaid-js/mermaid-cli mmdc $(MMD_OPTIONS) -e pdf -i $< -o $@
#
# GraphViz
#
.PHONY: dot_files
dot_files: $(DOT_SVGS) $(DOT_PNGS) $(DOT_PDFS)
.PHONY: delete_dot_images
delete_dot_images:
rm $(DOT_SVGS) || true
rm $(DOT_PNGS) || true
rm $(DOT_PDFS) || true
.PHONY: dot_files_fresh
dot_files_fresh: delete_dot_images dot_files
%.dot.svg: %.dot
dot $(DOT_OPTIONS) -Tsvg -o$@ $<
%.dot.png: %.dot
dot $(DOT_OPTIONS) -Tpng -o$@ $<
%.dot.pdf: %.dot
dot $(DOT_OPTIONS) -Tpdf -o$@ $<
{
"theme": "neutral",
"fontFamily": "arial",
"deterministicIds": true
}
#container > svg {
max-width: 100% !important;
}
@tedivm
Copy link
Author

tedivm commented Apr 11, 2024

This is based on the makefile I used to create the diagrams for my book, Terraform in Depth. It looks for files with the .mmd or .dot extensions and then generates SVG, PNG, and PDF versions for each file.

Using the power of Make it will automatically detect stale versions of the files and build those while leaving the rest alone.

The CSS file fixes a bug with the Mermaid CLI where increasing the image size resulted in a large canvas with a diagram of the same size.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment