README.md

Mermaid Diagrams

Requirements:

• Node.js
• watchexec

Usage:

make watch

config.json

{
  "sequence": {
    "diagramMarginX": 50,
    "diagramMarginY": 10,
    "boxTextMargin": 5,
    "noteMargin": 10,
    "messageMargin": 35,
    "mirrorActors": true,
    "showSequenceNumbers": true
  },
  "theme": "default",
  "themeCSS": ".node rect { fill: white; }"
}

Makefile

.PHONY: all clean watch

CURDIR := $(shell pwd)
BASEDIR := $(abspath $(CURDIR))
SRCDIR := $(abspath $(BASEDIR)/src/)

core_find = $(if $(wildcard $1),$(shell find $(1:%/=%) -type f -name $(subst *,\*,$2)))

SOURCE_MMD := $(sort $(foreach pat,*.mmd,$(call core_find,$(SRCDIR)/,$(pat))))
OUTPUT_MMD_SVG = $(addsuffix .svg, $(basename $(SOURCE_MMD)))
OUTPUT_MMD_PDF = $(addsuffix .pdf, $(basename $(SOURCE_MMD)))
OUTPUT_MMD_PNG = $(addsuffix .png, $(basename $(SOURCE_MMD)))
SOURCE_SVG := $(filter-out $(OUTPUT_MMD_SVG),$(sort $(foreach pat,*.svg,$(call core_find,$(CURDIR)/,$(pat)))))
OUTPUT_SVG_PDF = $(addsuffix .pdf, $(basename $(SOURCE_SVG)))
OUTPUT_SVG_PNG = $(addsuffix .png, $(basename $(SOURCE_SVG)))

# Disable PDF
OUTPUT_MMD_PDF =
OUTPUT_SVG_PDF =

# Platform detection.

ifeq ($(PLATFORM),)
UNAME_S := $(shell uname -s)

ifeq ($(UNAME_S),Linux)
PLATFORM = linux
else ifeq ($(UNAME_S),Darwin)
PLATFORM = darwin
else ifeq ($(UNAME_S),SunOS)
PLATFORM = solaris
else ifeq ($(UNAME_S),GNU)
PLATFORM = gnu
else ifeq ($(UNAME_S),FreeBSD)
PLATFORM = freebsd
else ifeq ($(UNAME_S),NetBSD)
PLATFORM = netbsd
else ifeq ($(UNAME_S),OpenBSD)
PLATFORM = openbsd
else ifeq ($(UNAME_S),DragonFly)
PLATFORM = dragonfly
else ifeq ($(shell uname -o),Msys)
PLATFORM = msys2
else
$(error Unable to detect platform. Please open a ticket with the output of uname -a.)
endif

export PLATFORM
endif

ifeq ($(PLATFORM),linux)
	MMDC := npx mmdc
else
	MMDC := $(BASEDIR)/node_modules/.bin/mmdc
endif

ifeq ($(PLATFORM),linux)
	SVGEXPORT := npx svgexport
else
	SVGEXPORT := $(BASEDIR)/node_modules/.bin/svgexport
endif

all: $(OUTPUT_MMD_SVG) $(OUTPUT_MMD_PDF) $(OUTPUT_MMD_PNG) $(OUTPUT_SVG_PDF) $(OUTPUT_SVG_PNG)

clean::
	rm -f $(OUTPUT_MMD_SVG)
	rm -f $(OUTPUT_MMD_PDF)
	rm -f $(OUTPUT_MMD_PNG)
	rm -f $(OUTPUT_SVG_PDF)
	rm -f $(OUTPUT_SVG_PNG)
	rm -f *.svg.tmp

watch::
	watchexec --workdir $(SRCDIR) --exts mmd -- 'make'

%.svg: %.mmd
	$(MMDC) -p puppeteer-config.json --input $< --output $@ -c config.json && \
	mv $@ $@.tmp && \
	gsed -i -e 's/_/\//g' -e 's/Z/_/g' $@.tmp && \
	xmlstarlet --no-doc-namespace sel -t -m '//div/*|/*[not(self::div)]' -c . -n $@.tmp > $@ && \
	rm -f $@.tmp

# %.pdf: %.svg
# 	cairosvg $< --output $@

%.pdf: %.svg
	$(SVGEXPORT) $< $@

%.png: %.svg
	$(SVGEXPORT) $< $@ 2x

package.json

{
  "name": "Diagrams",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "dependencies": {
    "@mermaid-js/mermaid-cli": "^9.0.3",
    "mermaid": "^9.0.1",
    "svgexport": "https://github.com/potatosalad/svgexport.git#add-pdf-support"
  }
}

puppeteer-config.json

{
  "args": ["--no-sandbox"]
}