Rob's Mermaid and Dot Diagrams Makefile

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

mermaid_config.json

{
  "theme": "neutral",
  "fontFamily": "arial",
  "deterministicIds": true
}

mermaid_png.css

#container > svg {
  max-width: 100% !important;
}

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.