Mermaid Diagram Skill (mmdr) Skill

Mermaid Diagram Skill (mmdr)

Render Mermaid diagrams to SVG/PNG using mmdr -- a fast pure-Rust renderer.

Quick Start

# From file
mmdr -i diagram.mmd -o diagram.svg
mmdr -i diagram.mmd -o diagram.png -e png

# From stdin
echo 'flowchart LR\n  A --> B' | mmdr -i - -o diagram.svg

# Pipe to stdout (SVG)
mmdr -i diagram.mmd

Options

| Flag | Default | Description | |------|---------|------------| | -i, --input | | Input file (.mmd) or - for stdin | | -o, --output | stdout | Output file (svg/png) | | -e, --outputFormat | svg | svg or png | | -c, --configFile | | Config JSON (Mermaid-like themeVariables) | | -w, --width | 1200 | Width | | -H, --height | 800 | Height | | --nodeSpacing | | Node spacing | | --rankSpacing | | Rank spacing | | --dumpLayout | | Dump computed layout JSON | | --timing | | Output timing info as JSON to stderr | | --fastText | | Use fast approximate text metrics |

Supported Diagram Types

Standard Mermaid syntax:

flowchart (TB, LR, RL, BT)
sequenceDiagram
classDiagram
stateDiagram-v2
erDiagram
gantt
pie
gitgraph

Workflow

Write .mmd file with standard Mermaid syntax
Validate the diagram renders with mmdr -i file.mmd -o file.svg before finalizing
For docs, embed Mermaid directly in markdown (GitHub/editors render natively)
Only create .mmd and .svg artifacts when explicitly requested; otherwise just validate with mmdr
For exports, render to SVG/PNG with mmdr

Config (themeVariables)

Pass a JSON config file with -c for custom theming:

{
  "themeVariables": {
    "primaryColor": "#1e3a5f",
    "primaryTextColor": "#e5e5e5",
    "lineColor": "#4a9eed",
    "background": "#1e1e2e"
  }
}

Tips

Prefer embedding mermaid in markdown for docs (renders in GitHub, VS Code, etc.)
Use mmdr for CI/CD exports or when you need raster output
Always sanity-check new Mermaid diagrams by running mmdr to catch parser differences early
Use <br/> in node labels for line breaks (avoid literal \n showing in rendered output)
--fastText speeds up rendering at the cost of slightly less accurate text layout
--dumpLayout is useful for debugging element positions

Agent Skills: Mermaid Diagram Skill (mmdr)

Install this agent skill to your local

Skill Files