mermaid-tools

Mermaid Tools

Overview

This skill enables extraction of Mermaid diagrams from markdown files and generation of high-quality PNG images. The skill bundles all necessary scripts (extract-and-generate.sh, extract_diagrams.py, and puppeteer-config.json) in the scripts/ directory for portability and reliability.

Core Workflow

Standard Diagram Extraction and Generation

Extract Mermaid diagrams from a markdown file and generate PNG images using the bundled extract-and-generate.sh script:

cd ~/.claude/skills/mermaid-tools/scripts
./extract-and-generate.sh "<markdown_file>" "<output_directory>"

Parameters:

• <markdown_file>: Path to the markdown file containing Mermaid diagrams
• <output_directory>: (Optional) Directory for output files. Defaults to <markdown_file_directory>/diagrams

Example:

cd ~/.claude/skills/mermaid-tools/scripts
./extract-and-generate.sh "/path/to/document.md" "/path/to/output"

What the Script Does

1. Extracts all Mermaid code blocks from the markdown file
2. Numbers them sequentially (01, 02, 03, etc.) in order of appearance
3. Generates .mmd files for each diagram
4. Creates high-resolution PNG images with smart sizing
5. Validates all generated PNG files

Output Files

For each diagram, the script generates:

• 01-diagram-name.mmd - Extracted Mermaid code
• 01-diagram-name.png - High-resolution PNG image

The numbering ensures diagrams maintain their order from the source document.

Advanced Usage

Custom Dimensions and Scaling

Override default dimensions using environment variables:

cd ~/.claude/skills/mermaid-tools/scripts
MERMAID_WIDTH=1600 MERMAID_HEIGHT=1200 ./extract-and-generate.sh "<markdown_file>" "<output_directory>"

Available variables:

• MERMAID_WIDTH (default: 1200) - Base width in pixels
• MERMAID_HEIGHT (default: 800) - Base height in pixels
• MERMAID_SCALE (default: 2) - Scale factor for high-resolution output