Mermaid Diagram Test

Testing inline Mermaid diagrams in Marp — rendered to SVG at build time.

Flowchart

A simple write → convert → output process flow.

width=400

Sequence Diagram

User → API → Database interaction.

width=380

How It Works

Build-time rendering with mmdc:

mmdc -p puppeteer-config.json -i diagram.mmd -o diagram.svg
  • Diagrams are pre-rendered to SVG before Marp runs
  • Full Marp features available on the page (themes, transitions, etc.)
  • SVGs are crisp at any zoom level
  • Works with PDF export

Configuration

The puppeteer config is stored at /tmp/puppeteer-config.json:

{
  "args": ["--no-sandbox", "--disable-setuid-sandbox", "--disable-dev-shm-usage"]
}

Without --no-sandbox, Puppeteer fails on Ubuntu with AppArmor restrictions.