CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-mermaid-js--mermaid-cli

Command-line interface for converting Mermaid diagrams to SVG, PNG, and PDF formats

—

Pending
Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

SecuritybySnyk

Pending

The risk profile of this skill

Overview
Eval results
Files

cli.mddocs/

Command Line Interface

The mmdc command provides a comprehensive CLI for converting Mermaid diagrams to various output formats. It supports single diagram conversion, markdown processing, and extensive customization options.

Capabilities

Basic Diagram Conversion

Convert Mermaid diagram files to SVG, PNG, or PDF formats.

mmdc -i <input> -o <output>

Parameters:

  • -i, --input <input>: Input mermaid file path or "-" for stdin
  • -o, --output [output]: Output file path or "-" for stdout

Usage Examples:

# Convert .mmd file to SVG
mmdc -i diagram.mmd -o diagram.svg

# Convert to PNG
mmdc -i flowchart.mmd -o flowchart.png

# Convert to PDF
mmdc -i sequence.mmd -o sequence.pdf

# Read from stdin, write to stdout
cat diagram.mmd | mmdc -i - -o -

Output Format Selection

Specify the output format explicitly when it cannot be inferred from the file extension.

mmdc -e <format>

Parameters:

  • -e, --outputFormat [format]: Output format (svg, png, pdf)

Usage Examples:

# Force SVG output even if output file has different extension
mmdc -i input.mmd -o diagram.img -e svg

# Use with stdout output
mmdc -i input.mmd -o - -e png

Theme and Styling

Customize the appearance of generated diagrams with themes, colors, and CSS.

mmdc -t <theme> -b <color> -C <cssFile>

Parameters:

  • -t, --theme [theme]: Chart theme (default, forest, dark, neutral)
  • -b, --backgroundColor [color]: Background color (transparent, red, '#F0F0F0', etc.)
  • -C, --cssFile [file]: CSS file for custom styling

Usage Examples:

# Dark theme with transparent background
mmdc -i input.mmd -o output.png -t dark -b transparent

# Custom CSS styling
mmdc -i input.mmd -o output.svg -C custom-styles.css

# Specific background color
mmdc -i input.mmd -o output.png -b '#E8F4FD'

Page Dimensions and Scaling

Control the size and scale of the output image.

mmdc -w <width> -H <height> -s <scale>

Parameters:

  • -w, --width [width]: Page width in pixels (default: 800)
  • -H, --height [height]: Page height in pixels (default: 600)
  • -s, --scale [scale]: Puppeteer scale factor (default: 1)

Usage Examples:

# Large canvas size
mmdc -i input.mmd -o output.png -w 1600 -H 1200

# High DPI output
mmdc -i input.mmd -o output.png -s 2

# PDF with fit-to-content
mmdc -i input.mmd -o output.pdf -f

Configuration Files

Use external configuration files for Mermaid and Puppeteer settings.

mmdc -c <configFile> -p <puppeteerConfigFile>

Parameters:

  • -c, --configFile [file]: JSON configuration file for Mermaid
  • -p, --puppeteerConfigFile [file]: JSON configuration file for Puppeteer

Usage Examples:

# Use Mermaid config file
mmdc -i input.mmd -o output.svg -c mermaid-config.json

# Use both config files
mmdc -i input.mmd -o output.png -c mermaid.json -p puppeteer.json

Example Mermaid config file:

{
  "theme": "dark",
  "themeVariables": {
    "primaryColor": "#ff6b6b",
    "primaryTextColor": "#ffffff",
    "primaryBorderColor": "#ff4757"
  },
  "flowchart": {
    "useMaxWidth": false,
    "htmlLabels": true
  }
}

Example Puppeteer config file:

{
  "headless": "shell",
  "args": ["--no-sandbox", "--disable-setuid-sandbox"],
  "timeout": 30000
}

Markdown Processing

Process markdown files containing embedded Mermaid diagrams, extracting and converting them to images.

mmdc -i <markdown> -o <output> -a <artefacts>

Parameters:

  • -a, --artefacts [path]: Output directory for generated diagram images

Usage Examples:

# Process README.md and generate diagram images
mmdc -i README.md -o README-processed.md

# Store images in specific directory
mmdc -i documentation.md -o docs-processed.md -a ./diagrams

Markdown Input Example:

# Project Documentation

Here's our system architecture:

\`\`\`mermaid
graph TD
    A[Client] --> B[Load Balancer]
    B --> C[Web Server]
\`\`\`

And here's the user flow:

\`\`\`mermaid
sequenceDiagram
    User->>App: Login request
    App->>DB: Validate credentials
\`\`\`

Generated Output:

# Project Documentation

Here's our system architecture:

![diagram](./README-processed-1.svg)

And here's the user flow:

![diagram](./README-processed-2.svg)

Advanced Options

Additional options for specialized use cases.

mmdc -I <svgId> -f -q --iconPacks <packages>

Parameters:

  • -I, --svgId [id]: The id attribute for the SVG element
  • -f, --pdfFit: Scale PDF to fit chart dimensions
  • -q, --quiet: Suppress log output
  • --iconPacks <packages...>: Icon packs to use (Iconify NPM packages)

Usage Examples:

# Custom SVG ID
mmdc -i input.mmd -o output.svg -I "my-diagram"

# PDF with fit-to-content scaling
mmdc -i large-diagram.mmd -o output.pdf -f

# Quiet mode (no console output)
mmdc -i input.mmd -o output.png -q

# Use icon packs
mmdc -i input.mmd -o output.svg --iconPacks @iconify-json/logos @iconify-json/mdi

Error Handling

The CLI exits with code 0 on success and code 1 on error. Error messages are printed to stderr.

Common Error Scenarios:

# Input file doesn't exist
mmdc -i nonexistent.mmd -o output.svg
# Error: Input file "nonexistent.mmd" doesn't exist

# Invalid output format
mmdc -i input.mmd -o output.xyz
# Error: Output file must end with ".md"/".markdown", ".svg", ".png" or ".pdf"

# Invalid theme
mmdc -i input.mmd -o output.svg -t invalid
# Error: argument '-t, --theme [theme]' argument 'invalid' is invalid. Allowed choices are default, forest, dark, neutral.

Help and Version

Get help information and version details.

mmdc -h
mmdc --version

Usage Examples:

# Show help
mmdc -h

# Show version
mmdc --version

docs

cli.md

index.md

nodejs-api.md

tile.json